Tutorial 44 : Membuat Floating Button

Assalamualaikum.
Maaf sangat sebab terlepas pandang untuk membuat tutorial ini.
Ramai yang nak tutorial ni tapi asyik lupa je hehhe..
Di malam hari yang hening ni aku nak ajar cara-cara nak buat floating button. Apakah fungsi floating button ni? Okeh, benda ni memudahkan reader connect dengan korang. Contoh kalau click button Facebook terus boleh tengok facebook profile korang dan sebagainya. Lagipun cara ini dapat ringankan blog korang. Korang dapat kurang berat blog korang. Contoh, kalau korang letak facebook badge, twitter badge atau sekawan dengannya memang memberatkan blog untuk loading tapi kalau korang guna floating button untuk connect dengan reader korang dapat kurangkan ber"kb-kb" berat badan ooppps berat blog korang.
Tampa berlenggah-lenggah lagi mohh aku ajorkan cara nak buat benda alah ni..karang aku merepek sampai berkilo-kilo karang korang juga yang susahkan..
Kalau sesiapa yang masih blur..meh tengok gambar ni..kasi faham sikit.

Faham tak wahai kawan-kawan? Kalau tersuka jom ikuti langkah-langkah yang penuh dramatik ini :

1. Sign in blogger > > Design > Add Gadget > Html/Java Script
2. Copy coding di bawah dan paste ke dalam Html/Java Script

<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/fara.idola' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://3.bp.blogspot.com/-uh3ocOkbMAw/TVlX5p7MFhI/AAAAAAAAA4I/B2i8PqfvgPU/s1600/Facebook-icon.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/#!/fara_idola' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://2.bp.blogspot.com/-_9k-0vJXPdY/TVlX8Q5Jm6I/AAAAAAAAA4c/PJp04NF-9ZA/s1600/TwitterIcon.png" /></a><br />

<a class='linkopacity' href='http://bicarafarah.blogspot.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='go to dashboard'><img border="0" src="http://1.bp.blogspot.com/-tpmuYty_yCg/TVlX5OwSzZI/AAAAAAAAA4E/-jLUOu1jVsA/s1600/blogger-icon-big.png" /></a><br />

</div>

3. Tulisan warna merah ialah link url korang ( contoh, Facebook, Twitter ), dan link biru link url gambar/icon. Kalau nak tambah lagi button copy tanda ni je sebelum code </div>
left boleh tukar kepada right kalau suka.
# Ubah font warna hijau sekali
4. Faham tak? dan SAVE je.

Kerana mood aku baik dan rajin. Aku edit dan carikan korang icon-icon yang sesuai diletak untuk floating button.  Tapi korang jangan la letak semua benda ni..nanti serabut serabai pula. Letak yang penting je k..


http://1.bp.blogspot.com/-tpmuYty_yCg/TVlX5OwSzZI/AAAAAAAAA4E/-jLUOu1jVsA/s1600/blogger-icon-big.png

 http://3.bp.blogspot.com/-uh3ocOkbMAw/TVlX5p7MFhI/AAAAAAAAA4I/B2i8PqfvgPU/s1600/Facebook-icon.png

http://2.bp.blogspot.com/-_9k-0vJXPdY/TVlX8Q5Jm6I/AAAAAAAAA4c/PJp04NF-9ZA/s1600/TwitterIcon.png

http://4.bp.blogspot.com/-sgwOM_XXZA0/TVlX9nUIgFI/AAAAAAAAA4k/F9H3I7-c8Dg/s1600/youtube-icon-PNG.png

 http://4.bp.blogspot.com/-V-Ww-pHyPl8/TVlX7ViavnI/AAAAAAAAA4U/XUxdhWcnrbo/s1600/Skype.png

 http://3.bp.blogspot.com/-vOjQl7fw9VE/TVlX6Q4jPbI/AAAAAAAAA4M/uGWKG4nGisQ/s1600/Icon-Gmail.png

http://4.bp.blogspot.com/-rMkd6_kRc4M/TVlX81R2tsI/AAAAAAAAA4g/9BwGQsKnXio/s1600/yahoo_icon.png

http://1.bp.blogspot.com/-zi7st4AFR8A/TVlX7x8ElRI/AAAAAAAAA4Y/n-NS3_N6HWc/s1600/Tumblr.png

 http://2.bp.blogspot.com/-VH2sdFilWdA/TVlX6z6Z_kI/AAAAAAAAA4Q/PuoA-RSc9wU/s1600/myspace-icon.png
http://4.bp.blogspot.com/-ZpfG33C9Gtg/TVnrCiXDO-I/AAAAAAAAA40/TAI0X5eoHOY/s1600/formspring.png


http://2.bp.blogspot.com/-o-IXIIlx9_g/Voc2z8hFuJI/AAAAAAAAJ4Y/K3jQwssblaA/s1600/inst46.png



http://4.bp.blogspot.com/-xlteMIfFvx8/Voc3BS_Dq6I/AAAAAAAAJ4g/-rqs9uPQUiM/s1600/googleinst46.png



Macam mana hasil? suka?..okeh nanti komen ye..
p/s : nak icon lain sila rajin cari sendiri..
Share this PostPin ThisEmail ThisShare on Google PlusShare on Tumblr
108 Comments for "Tutorial 44 : Membuat Floating Button"

beb, formspring punya icon tiada? hehe

beb, untuk formspring mmg takde icon ye?

tuto ni la saye duk cari. finally kak farah buat gak, hehe.

farah, boley x buat tutorial buat textbox mcm yours ? textbox yg ade border n background bunga2 pink tuh. ke da ade buat tutorial tu ? thanks~~

@Haura Malina

ada cik Haura..sila tengok tutorial 14..

http://bicarafarah.blogspot.com/2010/11/tutorial-14-cara-membuat-kotak.html

@Puteri Balqis

Ada..tgk kat tepi tu..tapi aku tak aktif twitt2..aku gilokan belog je muahahaha..

wah.... tima kasih Miss Farah....!!
I Like it....!!

thx kak farah da lme cri tuto ni .. :) dpt jgk .. cute ..

kalau mcm akak punya floating button tu cmna nk buat?

@cik mieza

copy je yang sedia ada di atas..tak payah tukar url icon dia..

@izyan

awak cuma copy je code yang di atas tak pyh tukar icon url..cuma tukar url akaun fb twtt je

dh try akak farah..ngee~ TQ sharing..

tutorial yg ni la dicari2. ;) thx miss Farah.

Tq akak~ <3
murah ati tul akak nie ajar psl blog~
xoxo :)

jd la. http://viewingmyblog.blogspot.com/. do follow thnx :D

menjadi! thanks ya!
ada credit utk miss farah dlm entri terbaru saya...

light|shadow

Kak , Mne nak cari icon-2 yg lain ekk ?

Kalau skype mcm mana pulak nk letak tuh ye?takdek url kn?

@syud

Letak id or nickname untuk senang orang add kat skype hehehe :)

sudah jadi !! thanks kak farah :)

olla..
juz wanna ask...
sy ltak tumblr then icon dia xmcm yg len...yg kertas terkoyak tu..np ye?
maceh..=)

@nurul izzati

yang already code tu memang gambar icon "terkoyak" so tukar dengan code gambar di bawah untuk icon petak :)

ada tak url pic untuk formspring ada ada kesan koyak2 kt tepi?

@FANA

Tak ada ler dik..kalau nak kena cari. Yg pic di atas je yg ada :)

Thanks ye sis. Dah lama cari macam mana nak buat bendi ni. Hari ni baru jumpa. Tq a lot.! :)

thanz akak fara . da lame cari bnde nnihh <3

sis,, iqa nyr button xmo ke tepi la,,huhu,,
kiri dy xbtul2 ke kiri na ke tengah pn ad..huhu
cane nh sis??

@iqa

remove balik widget tu..buat semula tapi jangan click rich text dia xmau jadi nnt

dah boleh da!
thanks sis =)

salam akak , ni cara nak buat floating button , kalau nak buang button floating home dengan on top tu cam ne ek ??

sangat mmbntu! berbulan2 saya cari. akhirnya jumpa jugak tutorial ni. BIG thanks

alhamdulillah... dah jadi..trima kasih... ^_^

waaaa..pelik laa..nape twitter dy prgi kebawah pulok..adoi..kenape cik farah ? tak pahe neyh...huuu

a little help please? kenapa saya punya memanjang ehh? tak menegak pon :'(

Kak Farah , Yang Skype Tuhh Pulak Macam Mana Nak Cari Kodd Nya ? Buley Ajarkan Tak ?

Thanks atas tutorial..dh lamer cari..jupe gak akhirnya..:)

kak farah , mcm mane nak wat URL facebook sendiri? tolong ajarkan

knpa nak wat tagged x jadi ye??
=X

Assalamualaikum ! ^^ Terima kasih atas tutorial nie ^^ LIKE,LIKE,LIKE :D

terima kasih kak farah ! jadi jgk ! =D

farah, link utk ym & skype tu na amik kt mne???

@CeRiTa GaDiS 92
ym ambil id n skype pun id yg boleh org add kita :)

kak farah . me again . and untuk ke berapa puluh kali , thanks for ur tuto :)

terima kasih sgt2! mmg da lama cari tutorial ni. trimas kak farah

waaaa!!sys,tuto kakak nie berguna,akhirnya menjadi gak floating button tuh,trimass!!apy plak rasanya taw!hehe..klu sys x keberatan,lawat la blog saya yg xsberapa nie,huhu..klu ble follow saya sekali..:)http://aqchentacnu.blogspot.com/

hi kak Farah. nak tnye la, yg link biru tu kene ubah jugak atau x?? sye try copy n paste then just tukar url, tapi bila tkn facebk tu, x keluar.. macam mana? tq :)

akak..thank you so much...akhirnya berjaya jugak saya buat..muah muah muah.. ;)

Wow kak! jadi..thank you..sayang kak >.<

thanks!!follow me! http://aunimadihah12.blogspot.com/

Icon Intagram tu nk dpt mana ye? terima kasih.. :)

icon instagram tu naa dapat di mana yaa?

icon instagram tu naa dapat di mana yaa?

cik, floating bar awak tak bise di click, gimana ni? :(

bestnyerrr dpt belajar cantikkan blog thanks kak farah nanti buat lah tutorial yg banyak lagi...bye

Thankyouu very much ! Dah lame cari bende ni :D

Assalamualaikum pemilik Blog dan Pembaca. Jom Like Page Al Haura Craft.
#FabricButtonBadge

https://www.facebook.com/pages/Al-Haura-Craft/306487389385871?fref=ts

akakkkkk. boleh bagi url untuk icon instagram tak ? :)

Hi... Assalam...saya dah cuba tapi icon jadi bertimpa kenapa ye?? nanti tengok kat blog saya..xtau nak edit kat mana...

http://mamaputerialeiya.blogspot.com/

assalamualaikum..kakak,best la tutorial kakak..huhu..kakak programmer ke?

kenapa facebook punya tak appear ye?

Kakak,minta copy kat blog yer....Jgn risau nama url blog akak akan terpampang kat blog sayer tue..hehehehe

Thnx . klu ade mase jom singgah http://budakblank98.blogspot.my/

sis cmner nk tukar link facebook kita, sbb bila klik keluar fb org lain

Ambil bahagian link gantikan dengan link fb sis :)

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)
Pesanan:
Anda tidak dibenarkan sama sekali mengambil/menyalin/menyimpan/print screen mana-mana kandungan blog ini kecuali atas keizinan tuan punya blog. Tuan punya blog tidak teragak-agak untuk mengambil tindakan undang-undang jika hak persendirian ini dilanggar.

Pendapat penulis tidak semestinya kekal.
Cik Nurfarah

Related Posts Plugin for WordPress, Blogger...
Back To Top