Skip to content Skip to sidebar Skip to footer

Cara Membuat Social Like Button Sticky di Blog

Cara Membuat Social Like Button Sticky Melayang, Sobat blogger, Widget Social Like button sticky ini adalah sebuah widget social yang terdapat di pinggir tampilan blog, cukup ringan dan tentunya responsif. Yang di maksud sticky ini adalah melekat dan widget ini juga melayang kemanapun kita scrool, widget social like ini juga muncul di semua halaman, untuk kelebihannya adalah untuk memudahkan supaya pengunjung mengklik tombol like social media yang terdapat di sebuah posting atau blog kita, meski widget ini muncul di semua halaman namun penempatan widget ini tidak akan menggangu pembaca, karena widget ini berada di luar post body oke sobat blogger, jika anda ingin membuat sticky widget like social ini, silahkan ikuti tutorial berikut:

Cara Membuat Social Like Button Sticky di Blog

Cara Membuat Social Like Button Sticky Melayang

1. Pertama buka akun blogger.
2. Pilih menu tata letak > Add widget >Pilih  HTML/Java script.
3. Lalu paste semua code di bawah ini tepat di kolom pop up widget yang muncul

<!-- floating share bar Start sepintasseo.blogspot.com-->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;}
</style>
<div id='pageshare' title="Get this from sepintasseo.blogspot.com">
<div class='sbutton' id='like' style='margin-left:8px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.sepintasseo.blogspot.com/">widget</a></div><!-- Do not remove this link -->
</div>
<!-- floating share bar End -->


4. Klik save.

Catatan : Agar widget tersebut muncul di bagian kiri template, pastikal letakan widget tersebut penempatannya seperti contoh gambar dibawah ini.
Cara Membuat Social Like Button Sticky di Blog
Selesai!! oke sobat blogger, saya rasa sangat mudah sekali untuk tutorial Cara Membuat Social Like Button Sticky Melayang pada Blog, untuk lebih dan kurangnya saya mohon maaf. Jika ada masalah silakan berkomentar.

3 comments for "Cara Membuat Social Like Button Sticky di Blog"