Tutorial Floating Button

Preview:

Floating button digunakan untuk memudahkan reader connect dengan sosial network anda. Floating button ini akan muncul pada sebelah sisi kanan atau kiri blog anda. Selain sosial network, anda juga boleh letak button lain untuk floating button ini (cth: email, link blog, youtube dan etc), bergantung kepada apa yang akan anda reader connect.

Caranya:

1) Sign in account blogger

2) Dashboard > Design > Page Element > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:140px;left:-12px;'>

<a class='linkopacity' href='URL FACEBOOK ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/232.png" /></a><br />

<a class='linkopacity' href='URL TWITTER ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/432.png" /></a><br />

<a class='linkopacity' href='URL BLOG ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png" /></a><br />


</div>

Nota:
- Pada tulisan berwarna biru, masukkan url facebook, twitter dan blog anda.
- Pada tulisan berwarna merah, masukkan url button yang akan anda Search button di google atau mana-mana image hosting. Kalau menggunakan yang tersediapun tdk masalah.
- Yang warna purple pula, boleh ganti mengikut kesesuaian blog. Left boleh ditukar kepada right.

4) Save dan lihat hasilnya.

Selamat mencoba! :)
:Lanjuut