[Tutorial Simple] Cara Membuat Floating Share Button pada Blogspot

Sore menjelang, sembuarai cahaya jingga nampak indah di langit barat. Hemmm,,, subhanallah.... Yuk marilah kita belajar dunia Optimasi Blog. Sore ini saya akan membagikan sebuah tips singkat dalam hal tentang How To Make A Simple Floating Share Button at Blogspot. Here is ... Semoga bermanfaat yaw... ^_^

Apa itu Floating Share Button???

Sebuah cara untuk menyematkan widget share social bookmark seperti Facebook, Twitter, dan juga Google Plus-Plus.. Namun, caranya Floating Share Button lebih dikhususkan pada penggunaan floating alias share buttonnya nanti akan melayang mengikuti gerakan scrolling mouse. Ok, paham???

#bila belum, wah".. gubrak!!! Guling" nguing", hehehe

Simple Floating Share Button Blogspot
1. Login ke blogger
2. Pilih rancangan lalu edit HTML
3. Expand Template Widget
4. Biasakan back up template dulu
5. Pasang kode css berikut di atas ]]></b:skin>

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

#sharebuttonsimple .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='sharebuttonsimple'>
<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 lihatlah blog Anda... Keyen bukan??? Right???

 Semoga bermanfaat ^_^

Keyword :

Cara Membuat Floating Share Button pada Blogspot, Cara Membuat Floating Share Button, Floating Share Button, How to make floating share button, Floating Button Share, Floating, Share, Button, Simple Floating Share Button, Tutorial Membuat Floating Share Button pada Blogspot, Tutorial Mudah Membuat Floating Share Button.

[Tutorial Simple] Cara Membuat Floating Share Button pada Blogspot 2011-10-03T16:00:00+07:00 Rating: 4.5 Diposkan Oleh: Pengagum Wanita