Cara Buat Widget Share Melayang di Sisi Blog 100% Working

Cara Buat Widget Share Melayang di Sisi Blog

Kali ini setyablogger akan mengeshare tentang bagaimana cara membuat widget share melayang, widget ini sangat populer karena memiliki banyak kelebihan yang menarik, karena dapat mengetahui jumlah like page di postingan sobat, dan juga akan mempercantik penampilan blogger sobat dengan widget ini, baiklah mari kita ikuti cara memasangnya :

1. Login ke blogger.com,

2. Lalu buka => Tata Letak => Elemen Halaman => Tambah Gadget => HTML/Javascript

3. Lalu copy kan kode  berikut kedalamnya :

<style type="text/css">

*{margin:0;padding:0;}

* html #z33sHare{

position: absolute;

}

#z33sHare{

right:0%;width: 70px;background:transparant;border:0px solid #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px;

position:fixed;

bottom: 40%;

}

#z33sHare div{

padding:6px 6px 6px 5px;

}

#stw{

margin-left:-2px;

}

#sfs{

margin-left:-5px;

}

</style>

<div id="z33sHare">

<div id="ssl-box">

<div id="stw">

<div><a name="Widget" type="Widget" href="http://setyabloggerslalu.blogspot.com/">Share</a><script src="Widget" type="text/javascript">

</script></div>

<!-- Place this tag where you want the +1 button to render -->

<g:plusone size="tall"></g:plusone>

<!-- Place this render call where appropriate -->

<script type="text/javascript">

  (function() {

    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

    po.src = 'https://apis.google.com/js/plusone.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

  })();

</script>

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</div>

<!-- Tambah code lainnya -->

<div>

<script type="text/javascript">

(function() {

var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];

s.type = 'text/javascript';

s.async = true;

s.src = 'http://widgets.digg.com/buttons.js';

s1.parentNode.insertBefore(s, s1);

})();

</script>

<a class="DiggThisButton DiggMedium"></a>

</div>

</div>

<div><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">

</script></div>

<div style="clear:both;"></div></div>

Catatan :

# Yang berwarna Merah silahkan tambahkan code Widget share lainnya jika sobat punya. Jika tidak gunakan yang sudah tersedia diatas saja. Widget diatas sudah terdapat tombol Facebook share, Twitter, Google+, dan Digg.

# Yang berwarna Hijau itu merupakan posisi widget, sobat bisa gunakan right = posisi kanan dan left = untuk posisi kiri.

# Dan untuk yang berwarna Biru yaitu jarak (dalam %) dari bawah, sobat bisa ganti sesuai dengan ukuran yang sobat mau.

4. Sekarang SAVE. Lalu refresh bolag sobat dan akan terlihat hasilnya. Jika masih bingung silahkan bertanya.