Membuat social sharing widget dengan css3 + 2 tooltip

    Nah, widget ini, keren kalau menurut saya. Karena, selain dengan 2 tooltip, juga dilengkapi dengan efek hover. Caranya juga mudah. Anda tidak perlu mengedit script lagi. Ok, mulai.......

Live Demo

1. Login blog.
2. Template.
3. Edit HTML.
4.  Lanjutkan -> Centang Expand Template Widget -> Klik CTRL + F
5. Cari kode </head>, letakkan kode dibawah ini diatas kode </head>
<style type="text/css">
/* Beautiful Social Bookmarking DONT EDIT!! @ Infoiki.blogspot.com/ */
ul.infoiki-social { list-style:none; margin:15px auto;display:inline-block; } 
ul.infoiki-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.infoiki-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } 
ul.infoiki-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);} 
ul.Infoiki-social li.Infoiki-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgifbxlhdPWg7DyUJUVL49Acn_RhVXW6pp9ER9Xwqp6z4HNdAjw-SEabB__ijzsoa0RvCJPabDJP9ISJoOjG5bfMTRWJo_lSFM3zJNqv5Yrc0MosEjwxmZRxl8rBxf8-SlRZ9fcAdfcyG71/s1600/theoriginalbloggertricks-facebook.png"); } 
ul.Infoiki-social li.Infoiki-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRCPYsPzOp42MtluFeLYykrpXfyUextnMzYp8A6Zmm-n6An4_PlBnScdPWGxhBcZ2FxqW-qCDMnK1vLNiJio0fD2PO-ZzMBp10fhx4Bfq7A7PfinLxwHcZxZ9HCaLQHJsM-LvLVkXDTNCZ/s1600/theoriginalbloggertricks-twitter.png"); }
ul.Infoiki-social li.Infoiki-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7pcV4-fclJO0-g9N6wUQSrD174F9DkV-xdY7-H3GUfPxKr7iLWLIR7QCcAHxpIcSj4ohuvnVrD3JSx71JEw4Tvyh8QC-YFHsJW6FKRplewMJdFlrttbY0mZPrYLKMdLrH6PzLwcZ5cgG1/s1600/theoriginalbloggertricks-googlebuzz.png"); } 
ul.Infoiki-social li.Infoiki-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjETMPyUbCaVl57YO4H2yl8NOSpFx17Ol-A0F2ETWInDMQjrg1pMgFaw_zmNjWm7GEsLZcSjXau00nBgUPDrZuBdJAJxvTFbcM2uGF4xoKSXKWJTsM0V6bPaY5ElsJW-CS1CKZAHTOtHUyG/s1600/theoriginalbloggertricks-stumbleupon.png"); } 
ul.Infoiki-social li.Infoiki-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSKgfw0z5RhukqoqXCBnhrI1IO8-DLLFtLJhqPknrXQEo7Jem_iEFI_m-_SYvdHRLcE31QFr2vtbhEop_JA7ZpIh4bHtBvY8OgTt1uo-5KOSxnJ3bJ9ec5WhaVjqhJ4HZeNZYZDpGJGU0t/s1600/theoriginalbloggertricks-digg.png"); } 
ul.Infoiki-social li.Infoiki-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFvNF-mXYs9gpxYT0Sh1u4x7z_0SJcSuKh2X5yW7U89as7TUhDuXGn8U0ojtkcY3vm1VObirJxhoUBPXtYRTOlOiamkAbwjciTexAj5kgoBvm9S3VY4ccurWQg6DNAu1oNAvI3xSWQDDrz/s1600/theoriginalbloggertricks-delicious.png"); } 
ul.Infoiki-social li.Infoiki-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1TN6E2Et2811bA3HkZ1suULFiBBpfVhj92DqfUKf-ns6ncHFRAYdwH1wQ2HwC0sEvYI10o-yKmO-FkcLOTspw_X5lCx3hOlaka6ggc4NqDk8nFnjtUTHNlWnto_056z5ibsertZBuo3fE/s1600/theoriginalbloggertricks-linkedin.png"); } 
ul.Infoiki-social li.Infoiki-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifoJaDqxAzBrF9mE7xWWJVvL0k7QOJOrQQWNoGkWLuH07uMi3FM63Y-X3__KzIk691Kf-JSGt2OjRBk8KBVsaDquEqBHu-_DM-h6Z-VqpX8tQhjj6t4PJDeMd9EMdb9NdjzIfNCH8V_-W_/s1600/theoriginalbloggertricks-reddit.png"); } 
ul.Infoiki-social li.Infoiki-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc7Dmqh8JDeu3d7G__q6w7vC7QhXuuF2RpPOiwP2lRY7fNRDU0-EmHatPW3RtEJvCUjD38Phlg2SDfBRGop86POVA6Tm2IRKs1sOQAstx2nwN1kX01f4dJvXeNf_aSD2MgfKwEo1IoyH67/s1600/theoriginalbloggertricks-technorati.png"); } 
#Infoiki-cssanime:hover li { opacity:0.2; } 
#Infoiki-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } 
#Infoiki-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } 
#Infoiki-cssanime li:hover { opacity:1; } 
#Infoiki-cssanime li:hover a strong { opacity:1; top:-10px; } 
/* Beautiful Social Bookmarking Widget By Yustin Annisa@ http://Infoiki.blogspot.com/ */
</style>

6. Setelah itu, cari kode <data:post.body/>. Bila kode <data:post.body/> ada dua, pilih yang bekerja.
7. Letakkan kode dibawah ini, dibawah kode no.6

<!-- EDIT SCRIPT BILA INGIN SCRIPT TIDAK BEKERJA --!> <b:if cond='data:blog.pageType == &quot;item&quot;'><ul class='Infoiki-social' id='Infoiki-cssanime'>
<li class='Infoiki-facebook'>
<a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
</li>
<li class='Infoiki-twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
</li>
<li class='Infoiki-googlebuzz'>
<a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
</li>
<li class='Infoiki-stumbleupon'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
</li>
<li class='Infoiki-digg'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
</li>
<li class='Infoiki-delicious'>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
</li>
<li class='Infoiki-linkedin'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
</li>
<li class='Infoiki-reddit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
</li>
<li class='Infoiki-technorati'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
</li>
</ul>
</b:if> 

8. Langkah terakhir, save template. And, you are done!