Membuat Social Like Button Sticky Melayang

Cara Membuat Social Like Button Sticky Melayang, Sobat blogger, social Like button sticky ini adalah sebuah widget social yang terdapat di pinggir template, yang di maksud sticky ini adalah melekat dan widget ini juga melayang, 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 penempatannya pun memang tidak menggagu pembaca, karena anda bisa meletakannya di pinggir template atau di sisi kiri template, oke sobat blogger, jika anda ingin membuat sticky widget like social ini, silahkan ikuti tutorialnya.

DEMO

Cara Membuat Social Like Button Sticky Melayang

1. Buka akun blogger.

2. Pilih menu tata letak > Add widget >Pilih  HTML/Java script.

3. Lalu paste code di bawah ini tepat di kolom pop up yang muncul

<!-- floating share bar Start madamvia.web.id-->
<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 madamvia.web.id">
<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.madamvia.web.id/">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.

Selesai!! oke sobat blogger, saya rasa sudah cukup untuk tutorial Cara Membuat Social Like Button Sticky Melayang pada blog, untuk lebih dan kurangnya saya mohon maaf.

Share to:

Google+ Facebook Twitter