Jumat

Mermbuat Pop Out Bookmarking With Jquery Hover Effect

Sahabat Ade Blogs Pop Out Widget Social Bookmarking dengan Efek Jquery Halus Hover untuk blogger, ini adalah upgrade dari versi sebelumnya Bagaimana menambahkan media sosial mengambang (Google +1, Facebook, Twitter, Digg, Stumbleupon) tombol di blogger, tapi di sini saya menambahkan Widget Social Bookmarking dengan Jquery Efek sederhana hover. Anda dapat Lihat demo tinggal di sisi kiri halaman demo dan ketika mouse di atas lencana dengan tombol Social Bookmarking terlihat oleh Sliding ke kanan.





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)
  1.      Pergi ke Blogger Dashboard> Desain tab> Edit Html
  2.      Mencari </ head> tag
  3.      Tambahkan bawah baris kode Sebelum </ head> tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
Langkah 2: Menambahkan Kode Widget
  1.      Sekarang mencari <head>
  2.      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
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
    3.Pergi ke Desain> Elemen Halaman, klik Tambah Gadget, lalu pilih HTML / JavaScript.
    4.Paste kode ini di dalamnya.
 <script type="text/javascript">
/*<![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/AVvXsEgzUtKbatW-_Q2iLtFUoUTRpG0rpNbx-uA01y17XojOZcRuH3w0tzVk324ts6HA4Vxk9UD9ZG8u-t20KX6ySGSvKY4gpO4V465yxWWWH_zFEXsVS4kz-f8lcZvAlJsgn4ecE7VpwQJ-GfM/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> 
    5.Simpan widget Anda, refresh blog Anda. Sekarang Anda dapat melihat widget.

Description: Mermbuat Pop Out Bookmarking With Jquery Hover Effect
Rating: 4.5 4.5
Diposting oleh di
Label: