Tutorial Floating Button

بسم الله الرحمن الرحيم

Assalamualaikum...agak lama jugak ye saya tak update blog ni. Maklumlah dah start semester baru..sibuk cket.hehe.. Kalau tak update tu, tak semestinya tak bukak blog kan. Tiap-tiap hari saya bukak, tapi tak ada masa nak update je. Ok la, tak nak cite pasal tu banyak-banyak. Jom kita cakap pasal tutorial ni plak..

Apa floating button tu eh? Dalam bahasa Melayu maknanya butang terapung la kan. hehe.. Floating button tu macam ni. Tengok kat bawah ni..

Tutorial ni request daripada sorang adik ni. Dia tanya tentang hide chatbox/shoutbox dan floating button. Hide chatbox tu saya dah bagi link dan dia buat sendiri. Sekarang jom saya tunjukkan macam mana nak buat floating button yang comel-comel ni..

1. Design -> Add a gadget -> HTML/Javascript

2. Salin kod ni..ctrl+c untuk copy

<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='http://www.facebook.com/atikaahmadiah' 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='http://www.blogger.com/home' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='blogger home'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png" /></a><br />

</div>

3. Ok...kemudian, kawan-kawan tukar link. Contohnya.."http://www.facebook.com/AtikaAhmadiah" kepada url kawan-kawan sendiri. Buat jugak macam tu pada url Twitter n lain-lain jugak.

4. Lepas tu, boleh juga tukar kedudukan sama ada nak kat kiri atau kanan dengan cara ubah kod yang ada tulis left..tukar kepada right jika nak pada kedudukan kanan. Nombor tu pula korang boleh adjust mengikut kesesuaian..

5. Kalau nak tambah button yang lain..cuma salin balik je code yang ni.

<a class="'linkopacity'" href="'LINK" imageanchor="'1'" rel="'nofollow'" style="'margin-left:" target="'_blank'" title="'feed'"><img border="0" src="URL IMAGE" /></a><br />

LINK ganti dengan url kawan-kawan, feed pulak ganti contohnya facebook, twitter, blogger home dan lain-lain. URL IMAGE pula ganti dengan url gambar floating button tu. Boleh pilih di sini..ambil url image tu ye, pastu letak pada URL IMAGE.

Contoh button yang saya guna :

Image facebook : http://img.photobucket.com/albums/v486/mafiatrg/232.png

Image blog : http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png

Image twitter : http://img.photobucket.com/albums/v486/mafiatrg/432.png

Try preview dulu..kalau jadi, save la.

Semoga berjaya

والسلام