Percantik Postingan Blogger Dengan Fancy ShareThis Social Bookmarking Widget

Bagaimana cara menambahkan tombol ShareThis dengan On-hover efek animasi ( Fancy Style ) di postingan blogspot? 

Menambahkan tombol share this pada setiap postingan merupakan salah trik agar blog kita mendapatkan trafik yang lebih tinggi, dengan tombol share this ini di harapkan pengunjung membagikan / menshare postingan kita di situs jejaring sosial meraka. Nah kalau biasanya tombol sharethis terlihat biasa-biasa saja, kali ini saya akan berbagi tips cara menambahkan tombol ShareThis dengan On-hover efek animasi di setiap halaman postingan blogspot. 

 Lihat LIVE DEMO disini.

Berikut Cranya :

Step 1.

Langkah pertama yang harus kita lakukan adalah Login Ke Blogger, 

kalau sudah login, masuk ke menu "Rancangan" dan pilih Tab "Edit HTML".

Step 2. 

Tekan CTRL+F pada keyboard dan temukan kode berikut :

]]></b:skin>

Letakkan kode berikut diatas/seblem nya.

/* Fancy SocialBookmark*/ #sharebox{height:48px; width:400px; margin:0; padding:5px 0;} ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;} ul.sharebox li a { margin:0 0 0 -24px; display:block;} ul.sharebox li a:hover { margin:0 0 0 -8px; } ul.sharebox li img { border:none;}

Step 3. 

Tekan CTRL+F pada keyboard dan temukan kode berikut :
</head>

Letakkan kode berikut diatas/seblem nya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> (function($){ $.fn.sharebox = function(){ var element = this; $(element).find("li").each(function(i){ $(this).css("z-index", 12- i); if (i>0) $(this).css("left", i * 24 + 100); }); } })(jQuery); </script> <script type='text/javascript'> $(document).ready(function(){ $("#sharebox").sharebox(); }); </script>

Step 4. 

Tekan CTRL+F pada keyboard dan temukan kode berikut :

<data:post.body/>

Letakkan kode berikut dibawah/sesudahnya nya.

<ul class='sharebox' id='sharebox'><li><img alt='Share this' src='http://dotinfo.co.tv/images/sharebox/sharethis.png'/></li> <li><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Digg' src='http://dotinfo.co.tv/images/sharebox/digg_48.png'/></a></li> <li><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to StumbleUpon' src='http://dotinfo.co.tv/images/sharebox/sumbleupon_48.png'/></a></li> <li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Delicious' src='http://dotinfo.co.tv/images/sharebox/delicious_48.png'/></a></li> <li><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Technorati' src='http://dotinfo.co.tv/images/sharebox/technorati_48.png'/></a></li> <li><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Reddit' src='http://dotinfo.co.tv/images/sharebox/reddit_48.png'/></a></li> <li><a expr:href='" http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Mixx' src='http://dotinfo.co.tv/images/sharebox/mixx_48.png'/></a></li> <li><a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'><img alt='Sumbit to Twitter' src='http://dotinfo.co.tv/images/sharebox/twitter_boxed_48.png'/></a></li> <li><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Furl' src='http://dotinfo.co.tv/images/sharebox/furl_48.png'/></a></li> <li><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Design Float' src='http://dotinfo.co.tv/images/sharebox/designfloat_48.png'/></a></li> <li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Blinklist' src='http://dotinfo.co.tv/images/sharebox/blinklist_48.png'/></a></li> <li><a expr:href='"http://buzz.yahoo.com/article/" + data:post.url' target='_blank'><img alt='Sumbit to Yahoo Buzz' src='http://dotinfo.co.tv/images/sharebox/yahoo_48.png'/></a></li> <li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Google Bookmarks' src='http://dotinfo.co.tv/images/sharebox/google_48.png'/></a></li> </ul>


Lihat LIVE DEMO disini.