Slide Out Share Melayang Dengan jQuery Untuk Blogger

Slide Out Gadget Social Bookmarking Dengan jQuery Untuk Blogger,sudah biasanya kita menemukan gadget ini di kala kita berkunjung ke banyak blog teman kita dan menemukan gadget seperti ini.Namun pada hari ini saya akan share tentang social bokmark yang agak berbeda dengan yang lain,karna gadget ini akan muncul jika pengunjung blog kita mengarahkan cursors mostnya mengarah ke gadget Tanpa di klik.Karna gadget ini mengggunakan script JQuery yang di tanam di dalam template di atas </head>.

Mungkin untuk social bookmark yang biasa-biasa saja sobat sudah tidak asing lagi,nah apabila sobat berminat untuk membuatnya silahkan anda ikuti caranya di bawah.

Langkah pertama silahkan anda login blogger edit html dan simpan kode di bawah di atas kode </head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Dan save template
Kalaupun di template anda sudah menggunakan kode di atas,hiraukan saja atau tidak perlu untuk memasangnya.

Selanjutnya anda masuk ke tata letak dan simpan kode di bawah,di add Gadget HTML/javascript.

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function () { jQuery(".hbslidebox").hover(function () { jQuery(this).stop().animate({ left: "0" }, "medium"); }, function () { jQuery(this).stop().animate({ left: "-70" }, "medium"); }, 500); }); /*]]>*/ </script><style type="text/css"> .hbslidebox { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH77Dkas_xVlLA45l_aUDiBIkKKnhtz9uP96n8bAl3zl1eE7PV7dgZ-HBmckymFnKuwYS4vIWBkJKZPGIOz-y0Rdxaeb720wVGpv32oAWleVS6tklA94uo2fSqUcDgxXgPWGpFXFDStOU/s1600/helperblogger.com-tab_left_vertical.png") no-repeat scroll right top transparent !important; display: block; float: left; height: auto; padding: 0 45px 0 0px; width: 65px; z-index: 99999; position:fixed; left:-70px; top:20%; } .hbslidebox div { border:none; position:relative; display:block; } #floatingbuttons { background: #fff; border-radius: 5px 5px 5px 5px; border: 1px solid #CCCCCC; float:left; padding:0 0 3px 0; bottom:15%; z-index:399; } #floatingbuttons .floatbutton { float:left; clear:both; margin:5px 4px 0 4px; } .addbuttons { clear:both; text-align:center; padding-top:5px; } .addbuttons a span.getfloat, .addbuttons a span.sharebuttons { color:#000; background:none; font-family:arial, sans-serif; display:block; font-size:9px; font-weight:bold; text-decoration:none; line-height:11px; } .addbuttons a:hover span { color:#fff; background:none; text-decoration:underline; } </style><div class="hbslidebox" style=""> <div> <div id='floatingbuttons' title="Share this post!"> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"> </script> <script type="text/javascript"> (function () { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script> <!-- Medium Button --> <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script> <div class='floatbutton' id='facebook'> <fb:like layout="box_count" show_faces="false" font=""></fb:like> </div><div class='floatbutton' id='google+1'> <g:plusone size="tall"></g:plusone> </div><div class='floatbutton' id='stumbleupon'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div><div class='floatbutton' id='digg'> <a class="DiggThisButton DiggMedium"></a> </div></div></div></div>

Setelah anda memasangnya simpan saja dan lihat hasilnya,nah sobatt zigzoor demikianlah cara membuat Slide Share Melayang Dengan jQuery Untuk Blogger,mudah-mudahn bermanfaat.
Selamat mencoba dan semoga berhasil.( Sumber ).