Membuat Share Melayang disamping Blog

Bookmark and Share
Bismillah... Saya akan menjelaskan cara membuat share count melayang disamping halaman blog.


Share Count Melayang


Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :




Membuat share count melayang ini sangat simple karena kita tidak perlu pusing mengutak-atik HTML template kita. Untuk membuat widget ini, kalian harus sudah login ke blogger kalian dan selanjutnya, silahkan kalian ikuti tahap-tahapnya dibawah ini:

1. Pilih Rancangan
2. Pilih Elemen Halaman
3. Klik TAMBAH GADGET
4. Pilih HTML/Java Script
5. Silahkan Copy kode berikut dan paste didalam konten HTML/Java script nya

<style type="text/css">
*{margin:0;padding:0;}

* html #z33sHare{
position: absolute;
}

#z33sHare{
right:1%;width: 70px;background:transparant;border:0px solid #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px;
position:fixed;
top: 20%;
}

#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">
<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><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</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>
<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>



5. Jangan Lupa Disimpan

{ 0 komentar... Views All / Send Comment! }

Posting Komentar

Powered By Blogger