Membuat Scroll Jquery Sosial Bookmark Untuk Blog

 

Setelah beberapa kali postingan saya hanya membahas tentang hal-hal SEO, kali ini saya akan kembali memposting tentang bagaimana cara membuat widget sosial bookmark yang melayang namun letaknya di samping blog kita. Langsung saja kamu lihat tutorialnya :

1. Masuk ke blogger.com

2. Klik Template untuk blog baru atau Rancangan untuk blog lama --> Pilih Edit HTML --> Klik Lanjutkan -->  Centang Expand Template Widget.

3. Cari kode <b:includable id='post' var='post'> gunakan ctrl+f untuk memudahkan pencarian lalu salin kode di bawah ini dan letakan sesudah / di bawah kode <b:includable id='post' var='post'>.

<!--Start Sticky Bar Code http://www.hzndi.blogspot.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='paulcrowepro' 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'><fb:like expr:href='data:post.url' font='' layout='box_count' send='false' show_faces='false' width='50'/></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/hzndi' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc5wmsg74DYJHjbgYC35l3ykS-68V729GmrG_tYVtOpUB1PxzN8HNPL5BShOO4mwoWpHS8gNGTFssJ-rcsWQH7FbCgsiVAZVkbjql5e98YQY10Wkm6sozANq8CtLQCdbzV2892tFXRvE0/s1600/rss-seat.png'/></a>
<br/><a href='http://www.hzndi.blogspot.com/' target='_blank' title='Dapatkan Widget Ini'><small>Get Gadget</small></a></div></b:if>
<!--End Sticky Bar Code http://www.hzndi.blogspot.com-->

Ganti kode yang berwarna biru dengan alamat feedburner kamu.

4. Kemudian cari kode ]]></b:skin> dan salin lagi kode di bawah ini, lalu kamu letakan kode yang tadi sudah di salin di atas kode ]]></b:skin>.

/*Start Sticky Bar Css http://www.hzndi.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://www.hzndi.blogspot.com*/

5. Kemudian kamu cari lagi kode </head> setelah itu kamu salin lagi kode di bawah ini dan letakkan diatas kode </head>.

<!--Start Sticky Bar Scripts http://www.hzndi.blogspot.com-->

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<script src='http://yourjavascript.com/4701293254/share-bar-script.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function () {
$(&#39;#share-buttons&#39;).stickySidebar({speed: 300, constrain: true})

});
</script>
<!--End Sticky Bar Scripts http://www.hzndi.blogspot.com-->

6. Kemudian kamu cari lagi kode </head> setelah itu kamu salin lagi kode di bawah ini dan letakkan di bawah / sesudah kode </head>.

<!--Start FB Code http://www.hzndi.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://www.hzndi.blogspot.com--> 

7. Simpan template, mudah bukan ?

source code : spiceupyourblog.com

Postingan Terkait:

Posted in: Blogger,Social Bookmarking,Social Sharing,Widget