Home » » Tutorial Floating Button

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, Tutorial Floating Button, Tutorial Blog, Cara nak Buat Floating Button

Tutorial, Tutorial Floating Button, Tutorial Blog, Cara nak Buat Floating Button



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..


Tutorial, Tutorial Floating Button, Tutorial Blog, Cara nak Buat Floating Button

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.




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
Cute Icon, Icon Comel


والسلام



Syukran kerana sudi membaca..boleh Like dan Share entri ini

20 luahan hati:

sicomot-comel said...

wahh..
tips yang menarik !
nnt la Comot cube :)

syira aka sepatu hijau said...

salam

terima kasih kerana follow sy, sy sudah lama follow anda :D

Anis izyan Abd Rahman said...

tQ for this...

erm, taue tak cemane nak buat shout box yg kuar masuk tuh?

ruby zaizi said...

wahh sgt bgus ruby pon nk cube hehe

deqdeq said...

tima kasih bg tutorial nih....DeQdEq dah buat....hehehe

Tok Esah said...

best!!! TQ

Nur Zaheera said...

entry yang menarik minat ! :D thanks atika.

by the way, selamat tahun baru !

FasiHaH SupiaN said...

time kasih sis atika, lama dah cari camna nak buat nie..:)

| cik azeya | said...

dah try. haha. sgt kelakar. tq. :))

Peqaxlol ;DD said...

ai cutenyer.... :)

Atia Qistina said...

thanx 4 da info...=)

missoyahanisah said...

mne nak dptkn url nye..tak jmpe pon..:)

COMEL said...

xphm la...hihihi

COMEL said...

lupe nk gtau...xfhm yg part salin balik kod tue...mksdnye...kod yg kt ats sekali tue xyah salin lagi la?

pastue kod yg salin blik tue kne add gadget lagi ke?

AmY said...

salam...thanx dear! love it!

Fasya said...

wahh. done! menjadi menjadi! mekasehhh :D

kitty lovers said...

assalamualaikum :)

syukran kak :)
tuto ini mmg best

follow blog adk yg x sberapa ni kak

AdeeyaMayeesa said...

kakak ..deeya dah buat .n skg ase nak buang floating button tu ,tapi bile tgok kat design-html code yg deeya letak u floating button hari tu dah ilang .tapi floating button tu maseh ag berfungsi .camane ek kakak deeya nak buang floating button tu?konfiuss :'(

Miss SG-AINA!! said...

thank you, saya amik <3

Yuyu Ichigo said...

klo nk buat "top" button terapung2(haha),camne ek...sebb top button code lain ,n ni plk ada code lain...

Related Posts Plugin for WordPress, Blogger...

ShareThis

Copyright Control : Atika Aula