Floating share button, Sudah tau kan pastinya teman-teman, itu lhoooooo yang buat ngeshare Artikle kita ke facebook/tweeter atau bisa juga digunakan untuk yang lainya pokonya yang berjenis button-button deh, Floating Share Button ini memang cukup trend apalagi kalau penempatanya pas, wedeh membuat blog kita tampil Keren pastinya..
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>
#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;
}
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'/> atau Terserah anda mau diletakan dimana kreasi anda sendiri bebass,,
<b:if cond='data:blog.pageType == "item"'>
<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>
<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.
OK! cukup sekian dari mas uwah tentang Membuat Floating Share Button Blogspot, nantikan artikle menarik lainya yah..
Semoga bermanfaat ya kawan,, .
related post :
9 Testimonial:
trik bagus nie mas,,, langsung di coba dech,,, ada cara buat bikin artikel terkait yg ada backgroundnya g??? hehhe
salam kenal balik sob,,,
mas uwah, kira-kira klo dpasang berpengaruh sama berat loading page blog gak? :)hehe
@threex-hans.com: belum ada mas besok dah kalo sempet ane posting,
@nC: Pasti pengaruh sob,, tapi kalau anda host JS nya sendiri di google js loading dijamin tetep sleketep,,lancar hehehe
wah gitu ya mas :) hehe nais inpo nii :)
host JS itu apa ya mas? (*lohh?) wkakak,, hehe sekalian ane nuntut ilmu dari mas uwah +.+
@Nc: jelasnya di label java script aja mas baca2,, ok
hehe ok d mas :) thenkyuu brader. :)
Siiipp,, sama2 brader
wahh.. terima kasih ya mas.. :)
tutorialnya dapat dipahami dgn cukup baik dan hasilnya juga sesuai..
berbagi link : http://hudayazik.blogspot.com
@Zikri Hudaya : thnkyu mas,, selamat membaca aja
SILAHKAN KOMENTAR
Maturnuwun sampeyan sudah mampir di Blog Mas uwah, tinggalkan komentar untuk menjalin persahabatan ingat NO SPAM.