Cara Buat jQuery Scroll Bar Social Bookmark Bergulir

D-Copy Blog's | Tutorial paling diminta selama beberapa bulan terakhir telah ada untuk tombol fixed  bergulir yang tampil di samping postingan dan bergulir ke halaman bawah dan dengan gadget reader. Gadget ini sangat populer di semua blog dan benar-benar membantu meningkatkan jumlah postingan Anda memalalui share Twitter, Facebook dan jQuery networks. Sosial yang digunakan lainnya kami lampirkan dengan bar ke samping posting blog Anda dan dengan tombol bookmark. Ini akan membuat halaman bar menjadi rapi dan memberikan pembaca memilih untuk berbagi di setiap gadget time. Saya telah menggunakan untuk beberapa bulan terakhir dan saya berhasil membuat 'share' dengan Anda hari ini dan memiliki pilihan berikut, seperti : Tweet, Facebook, Stumble Upon, Google+, Pin Pinterest dan penggunaan icon lainnya.

1. Buka akun blogger Anda
2. Masuk ke menu Template > Edit HTML > Proceed > edit HTML > centang Expand Template Widget
3. Cari kode dibawah ini :

<b:includable id='post' var='post'>

<!--Start Sticky Bar Code http://www.spiceupyourblog.com-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='share-buttons'><div class='twitter scount'> <a class='twitter-share-button' data-count='vertical' data-via='NAMA_PENGGUNA-TWITTER' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div><div class='facebook scount'><iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:blog.url + &quot;&amp;amp;send=false&amp;amp;layout=box_count&amp;amp;width=80&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;font=arial&amp;amp;height=90&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:90px;'/></div><div class='stumble scount'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div><div class='gplus scount'> <script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/> </div><center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>

<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>

<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

<script type='text/javascript'>

function run_pinmarklet() {

var e=document.createElement(&#39;script&#39;);

e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);

e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);

e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);

document.body.appendChild(e);

}

</script> </center><br/><a href='http://feeds.feedburner.com/blogspot/frupz' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0zhtamtdZFGquQxsSjX6F0Lrq8knx4XWrXBQn2FEt-6A8vqovEtoEeKaHMfkrvoP16OBqEUtzJNx91O2VyZicWe2l2jbGK3BqReJ4Bp_YZFnJHPhK35i_zOWGEKUaxsgkvbWpRUVVDB8/s1600/rss-seat.png'/></a>

<br/><a href='http://www.spiceupyourblog.com/2012/05/jquery-scroll-bar-social-bookmark.html' target='_blank' title='Get This Scrolling Bookmark Gadget For Blogger'><small>Get Gadget</small></a></div></b:if>

<!--End Sticky Bar Code http://d-copy.blogspot.com-->

• Ganti NAMA_PENGGUNA-TWITTER dengan nama pengguna Twitter Anda
• Ganti blogspot/frupz dengan nama pengguna Feed Burner Anda

]]></b:skin>

/*Start Sticky Bar Css http://d-copy.blogspot.com*/
#share-buttons {
background: none repeat scroll 0 0 #fff;
border: 1px solid #CCCCCC;
left: -80px;
padding: 8px;
position: absolute;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
border-radius: 6px;
}
#share-buttons .scount{
clear: both;
display: block;
margin: 2px auto;
text-align: center;
width: 55px;z-index:-1;
}
.facebook.sbutton .fb_ltr{width:40px !important;}
.post-outer{height:auto;}
#main{position:relative;}
#main-wrapper{position:relative;}
/*End Sticky Bar Css http://d-copy.blogspot.com*/

</head>

<!--Start FB Code http://d-copy.blogspot.com-->
<div id='fb-root'/>
<script>
(function() {
var e = document.createElement(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js#xfbml=1&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<!--End FB Code http://d-copy.blogspot.com-->

• Jangan lakukan modifikasi pada kode.
• Gadget akan bekerja atau hanya bekerja di postingan bukan di home page.