Membuat Widget Share Melayang di Blog

    Membuat Widget Share Melayang di Blog - Banyak cara untuk meningkatkan traffic blog kita, salah satunya yaitu melalui jejaring sosial seperti facebook, twitter, dll. Dan fasilitas inilah yang akan kita manfaatkan.

    Pada kesempatan kali ini saya akan coba membagikan kepada anda, bagaimana membuat widget share social bookmarking. Yang menarik adalah, widget ini nantinya akan berada melayang di blog, sehingga tampak lebih cantik. Berikut langkah-langkahnya :

• Masuk akun blog anda
• Pilih Tata Letak - Tambah Gadget - HTML/Javascripts
• Lalu Copy pastekan kode berikut

 <style type="text/css">

*{margin:0;padding:0;}

* html #z33sHare{

position: absolute;

}

#z33sHare{

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

position:fixed;

top: 35%;

}

#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='pageshare' title="Share dari MaenBlogging utk para Blogger">

<div id="stw">

<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>

<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>

<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><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>

• Simpan dan lihat hasilnya

 Keterangan :
- anda bisa mengubah posisi widget sesuai dengan keinginan anda, bisa dilihat pada kode yang saya cetak biru

Budayakan Untuk Meninggalkan Komentar Meskipun Hanya Satu Huruf