Jumat, 22 Februari 2013

Cara Buat jQuery Scroll Bar Social Bookmark Bergulir

Bookmark Bar Blogger Screenshot
  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='http://3.bp.blogspot.com/-Gwmjs5V-gQ0/Tx7dIzN3I8I/AAAAAAAAFYM/2V9IaJE1_ww/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.
Sumbernya disini : http://adf.ly/JlyU7


Artikel Terkait Lainnya :



Ditulis Oleh : Rendo Aditama

Artikel Cara Buat jQuery Scroll Bar Social Bookmark Bergulir ini ditulis oleh Rendo Aditama pada hari Jumat, 22 Februari 2013. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Cara Buat jQuery Scroll Bar Social Bookmark Bergulir dapat Anda sampaikan melalui kotak komentar dan jangan lupa klik like facebook diatas ya

:: Add My FB ::

Tidak ada komentar: