Bagaimana Tambahkan Pop Out Widget Social Bookmarking dengan Efek Hover Jquery ?
Berikut ada 2 Langkah Sederhana
Langkah 1: Menambahkan Plugin Jquery JavaScript (Abaikan langkah ini jika blog Anda sudah punya Plugin jquery)
- Pergi ke Blogger Dashboard> Desain tab> Edit Html
- Mencari </ head> tag
- Tambahkan bawah baris kode Sebelum </ head> tag
Langkah 2: Menambahkan Kode Widget<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
- Sekarang mencari <head>
- Paste kode ini tepat di bawah dan menyimpan template Anda. Catatan: Google +1 tombol hanya bekerja ketika Anda menonaktifkan tombol default share di "Blog Posts" widget
3.Pergi ke Desain> Elemen Halaman, klik Tambah Gadget, lalu pilih HTML / JavaScript.<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
4.Paste kode ini di dalamnya.
<script type="text/javascript">5.Simpan widget Anda, refresh blog Anda. Sekarang Anda dapat melihat widget.
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".btntslidebox").hover(function() {jQuery(this).stop().animate({left: "0"}, "medium");}, function() {jQuery(this).stop().animate({left: "-70"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.btntslidebox{ background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzTFODiYu_0W28X6CVX2F7nfhf_csrFO94bSvhbxqp-KFnfzur9U20LEdWb-rnt83Wqu4W-2cwMuyRYxPwttTVIoczMxDWY2up0KrGzFoi_rusqdUxNzLbF3-6VE6iURcGCvFlDNgDHYU/s1600/tab_left_vertical.png") no-repeat scroll right top transparent !important; display: block; float: left; height: auto; padding: 0 40px 0 5px; width: 65px; z-index: 99999; position:fixed; left:-70px; top:20%;}
.btntslidebox 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="btntslidebox" 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 class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>
<div class="addbuttons"><a href="http://www.blogtipsntricks.com/2012/01/add-pop-out-social-bookmarking-widget.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div>
</div>
</div>
Description: Mermbuat Pop Out Bookmarking With Jquery Hover Effect
Rating: 4.5 4.5
