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, Facebookdan 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 gadgettime. 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.

Langkah :

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'>

    4.  Pastekan kode dibawah ini dibawah pada kode diatas :

<!--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/AVvXsEhRYvQOX0VCN7IwO2yYGZVqd3IUY8oVOAD-2FT6Cpfj-ous8nwmk18cFV92FwgUOmioL4fC19tdzR3CbVc3N-wjIVbUdxJanWJ6ycsnpEt62tDp8rs8Ixb0Yuc3urOGhrt609nhVwDzVcE/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-->

Keterangan :

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

    5.  Cari kode dibawah ini :

]]></b:skin>

    6.  Pastekan kode dibawah ini, diatas pada kode diatas :

/*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*/

   7.  Cari kode dibawah ini :

</head>

   8.   Pastekan kode dibawah ini, dibawah pada kode diatas :

<!--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-->

   9.  Preview dan Save Template Anda.

Keterangan :

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

Description: Cara Buat jQuery Scroll Bar Social Bookmark Bergulir Rating: 4.5 Reviewer: Odii Siitohang - ItemReviewed: Cara Buat jQuery Scroll Bar Social Bookmark Bergulir Description: Cara Buat jQuery Scroll Bar Social Bookmark Bergulir Rating: 5 Reviewer: Odii Siitohang - ItemReviewed: Cara Buat jQuery Scroll Bar Social Bookmark Bergulir

Sumber

Artikel Terkait:

Share it to your friends..!