Cara Buat Widget Share Melayang di Sisi Blog

Iklan
Sebelumnya saya juga sudah memberikan Tutorial Membuat Widget Iklan Text Melayang di Blog, kali saya akan menyampaikan tutorial Widget Share Melayang di Sisi Blog. Widget ini akan dipasang pada posisi samping blog sobat, serta tampilannya yang sangat menarik, tanpilannya seperti gambar berikut ini :


Fungsi utama Widget ini yaitu untuk memudahkan sobat share / submit artikel sobat pada media di internet contohnya media social seperti Google plus, Twitter, Digg, dan facebook. Sebenarnya sobat bisa taruh widget tambahan lainnya, cuma saja kalau terlalu banyak tentu akan memenuhi halaman blog sobat dan terlihat tidak rapi.

Sebenarnya sebelumnya saya juga pernah memberikan cara buat tombol share pada blog, hanya saja widget ini lebih cocok dipasang pada bawah / atas posting, karena tampilannya yang berkesan memenuhi blog kalau dipasang melayang. Sobat bisa lihat di Widget Share Blog.

Baiklah berikut cara untuk memasang Widget Share Melayang di Sisi Blog sobat,


1. Login ke akun blog sobat,
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://mankita.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>

Silahkan Rubah :
# 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.

Source Link : Widget Melayang