Rabu, 07 Desember 2011

Membuat Floating Share Button

1. Login ke blogger
2. Klik rancangan 
3. Klik edit HTML
4. Jangan lupa centang, Expand Template Widget
5. Pasang kode css berikut di atas ]]></b:skin>

#sharebuttonfery {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:5px;
bottom:150px;
margin-top:10px;
position:fixed;
width:64px;
}

#sharebuttonfery .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px !important;
}

6. Kalau sudah, tambahkan kode berikut di atas atau sebelum <div class='post-header-line-1'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharebuttonfery'>
<div class='float'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='float'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='float'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='float'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
</div>
</b:if>
7. Save template dan lihat hasilnya.

Tidak ada komentar:

Posting Komentar

Tulis pesan Disini