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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi28t5fUlNjKpkzOD-Y-lVFMbLnB7lH12kj7k4JYiPyTAC24UZ3Wppce224knzmmB1D6cne-vp6nKcQPFGcWYoTRFHwN2wF7tzUhDsDiHfWFTCTe9iDpGmg8yNZRX3e4Ix05W6x5PumlSE/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjIYS4fIAyWWo8vJkyXPiqB5PUGBy77GVYb2lDg_ODbyUeMfEsrNOJ0aYHIXgastMKab2BJBKXlA4KIpb5KDKuyMnZAWoy_DAooIW08zZRqfrziGZ-quyhb_d7hlp7n1ObDdy_DESAz4/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqnnR5Pn3yjiU2dyWYIonUjnIqwh43KGZtpxLoTR3oWIh6RqNeDquN-BtPnXaYOtMMv_rzZIdlyaznFzJeW0QZcfoOrOlyDr0AJGCCmlMsuKXDR32W-UufiWtUB3fdoD6DWmMX3LAnpvs/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..
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqnnR5Pn3yjiU2dyWYIonUjnIqwh43KGZtpxLoTR3oWIh6RqNeDquN-BtPnXaYOtMMv_rzZIdlyaznFzJeW0QZcfoOrOlyDr0AJGCCmlMsuKXDR32W-UufiWtUB3fdoD6DWmMX3LAnpvs/s1600/blogger-icon-big.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi28t5fUlNjKpkzOD-Y-lVFMbLnB7lH12kj7k4JYiPyTAC24UZ3Wppce224knzmmB1D6cne-vp6nKcQPFGcWYoTRFHwN2wF7tzUhDsDiHfWFTCTe9iDpGmg8yNZRX3e4Ix05W6x5PumlSE/s1600/Facebook-icon.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjIYS4fIAyWWo8vJkyXPiqB5PUGBy77GVYb2lDg_ODbyUeMfEsrNOJ0aYHIXgastMKab2BJBKXlA4KIpb5KDKuyMnZAWoy_DAooIW08zZRqfrziGZ-quyhb_d7hlp7n1ObDdy_DESAz4/s1600/TwitterIcon.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8QYD6AHa9RQLz8ZPs5HjskL3G6JEnE7Q4yZU0VJhO8yGcodHsFPG2GkKwQkyPBkmIQL4ghb4a2OHIbxw17UFaO2nKYPiqLJJkMNOPKGmGXESkpst-Io6tIUDaLOzXT-Zs7YkPV-rRM0U/s1600/youtube-icon-PNG.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQSWTPI3G36uOR4hIv-HenD4y2WdkzxpAlGak6NW2kW3jE7QRB7Jkkrh4V5kw24Jcxyfy_t4engjncvHMLKBZpZeSftpZpL1tTn106BARQ7cu85Nx14wzHl0SlSo_K1Y69p2c6W1-O2E/s1600/Skype.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSE2F0AXnQ292Jl3i01rHaQyXhWxD3_oKwvo_hjW2jQhQSZm6FUhbOIlj2F2MxktYyhGKNN2g0YymV42zHf82APe0VVBitLHQ6fphEpNCWzRrJ4K6QOUroko5IHmvUIgkrpTg-q0rqiDk/s1600/Icon-Gmail.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwsfDX-RNJfl5LEerK2C9wbB2brWdw8x8kYVUQveCH2gtdy4YL-rkgWiVI-vTQjd7Vh6UlCbKQQnORA_Xne9dj2vjToKq7Ca97eznupkL3FBixb23Op4maQ8q56P98lF_EjmlCQw8JfA/s1600/yahoo_icon.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjOBLUUdgFzaaCGVOo1rTgzMizdD9Qx8Ml9qQ1zEcEZzUIdN2TnGvAQKDrbRtorNYvSwqIQGQr68QM4LUA3l4BQygWHAzPR87aeRQ2Gubd5zaVGdSq4jTFWRfiL5lEMG9boiyI6JnoCuY/s1600/Tumblr.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG7irxPRhz-W4_cgwIfvKY5S4ECohRqSy8o_jMG1U5X1eFg6QKlo7DSCw-Ztl3fQUaIQAlE8PhGj8ZNObd452hYXTklWUKYzq5Al2I5Qh1C4zLNDuzpUxNn6TGMaxHpEMW2n-srJC_xqg/s1600/myspace-icon.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYuUbfBtPUuJl11wkBG531OmExVeCTDPXxSPRzaWna22ApDP51F-V3mQPVWDPYYYgsG4c8DxkTtPk7unNKHrj9iqn-itEjiIu-H7rH0os0X7E9RH5_tUC6Tezfoy7cMpxJTfqNpzHjd6Q/s1600/formspring.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQBMxswxyz8juA7L2rc6XlAK4OSsLel52XrgwdQwQjFQMMCFylvhj_JOXDEVq8dnIv1GW0hm0IjPYhDl46aMGDF3UpG_MrxG3-8Eh6SYKNYCKDFcqCBZsEfgKqQJcGXoPsBzMc8X0Sumze/s1600/Instagram.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ-MoZn8hT69d5n2XuMi0xgZ8YgxRnPo0wBWocrToqf9MY_lY9Jo2FoFKsB1NAsYo9KPeclPg-szvWdiBVso16vvErQ1v4FqFb2JbzfXKQgKkEtjoKCdyjdvA3f2Su_ezBUBOKhO0mjlLL/s1600/googleinst46.png
Macam mana hasil? suka?..okeh nanti komen ye..
p/s : nak icon lain sila rajin cari sendiri..
beb, formspring punya icon tiada? hehe
ReplyDeletebeb, untuk formspring mmg takde icon ye?
ReplyDeletetuto ni la saye duk cari. finally kak farah buat gak, hehe.
ReplyDelete@jenab jenub
ReplyDeletesudah di update
@athirahzaki
ReplyDelete:)
teqiue bely bely much :D
ReplyDeleteko ader twitter ko farah??
ReplyDeletefarah, boley x buat tutorial buat textbox mcm yours ? textbox yg ade border n background bunga2 pink tuh. ke da ade buat tutorial tu ? thanks~~
ReplyDelete@Haura Malina
ReplyDeleteada cik Haura..sila tengok tutorial 14..
http://bicarafarah.blogspot.com/2010/11/tutorial-14-cara-membuat-kotak.html
@Puteri Balqis
ReplyDeleteAda..tgk kat tepi tu..tapi aku tak aktif twitt2..aku gilokan belog je muahahaha..
@jenab
ReplyDelete:)
wah.... tima kasih Miss Farah....!!
ReplyDeleteI Like it....!!
thx kak farah da lme cri tuto ni .. :) dpt jgk .. cute ..
ReplyDeletekalau mcm akak punya floating button tu cmna nk buat?
ReplyDeletethx share :)
ReplyDelete@cik mieza
ReplyDeletecopy je yang sedia ada di atas..tak payah tukar url icon dia..
@Nabiela Humaira
ReplyDeletewelcome :)
@izyan
ReplyDeleteawak 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..
ReplyDeletetutorial yg ni la dicari2. ;) thx miss Farah.
ReplyDeleteTq akak~ <3
ReplyDeletemurah ati tul akak nie ajar psl blog~
xoxo :)
@Ija Faezah
ReplyDeletewelcome...come again honey
@Cik Jierah
ReplyDeletewelcome :)
@FazeEla gloom
ReplyDeletethank yoi..tochei
thanks..=)
ReplyDeletethanks you Miss Farah! bjaya! hehe.;)
ReplyDeleteoke . tenkiu tenkiu ! :D
ReplyDeletejd la. http://viewingmyblog.blogspot.com/. do follow thnx :D
ReplyDelete| Pocodot icon tade kee ? :'(
ReplyDelete@'mochamochi
ReplyDeleteitoo kena cari sndiri hehehe :)
menjadi! thanks ya!
ReplyDeleteada credit utk miss farah dlm entri terbaru saya...
light|shadow
@Ahmad Hisyam (Lighta Shadowee)
ReplyDeletethank you so much... :)
thank you . jadi2 ! hee .
ReplyDeleteKak , Mne nak cari icon-2 yg lain ekk ?
ReplyDelete@capital A
ReplyDeletewelcome
@DafiRyna
ReplyDeleteGoogle je dik :)
Kalau skype mcm mana pulak nk letak tuh ye?takdek url kn?
ReplyDelete@syud
ReplyDeleteLetak id or nickname untuk senang orang add kat skype hehehe :)
sudah jadi !! thanks kak farah :)
ReplyDeleteolla..
ReplyDeletejuz wanna ask...
sy ltak tumblr then icon dia xmcm yg len...yg kertas terkoyak tu..np ye?
maceh..=)
@nurul izzati
ReplyDeleteyang 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?
ReplyDelete@FANA
ReplyDeleteTak ada ler dik..kalau nak kena cari. Yg pic di atas je yg ada :)
tq sis.. nice tuto :)
ReplyDeleteThanks ye sis. Dah lama cari macam mana nak buat bendi ni. Hari ni baru jumpa. Tq a lot.! :)
ReplyDeletesgt membantu...=)
ReplyDeletethanz akak fara . da lame cari bnde nnihh <3
ReplyDeletethanks miss..i dh buathehehe
ReplyDeletesis,, iqa nyr button xmo ke tepi la,,huhu,,
ReplyDeletekiri dy xbtul2 ke kiri na ke tengah pn ad..huhu
cane nh sis??
@iqa
ReplyDeleteremove balik widget tu..buat semula tapi jangan click rich text dia xmau jadi nnt
dah boleh da!
ReplyDeletethanks sis =)
salam akak , ni cara nak buat floating button , kalau nak buang button floating home dengan on top tu cam ne ek ??
ReplyDelete@Farra Aniqah
ReplyDeletecari widget tu..remove jer
yeay..
ReplyDeletejdi..ske3..
thanks :)
ReplyDeletesangat mmbntu! berbulan2 saya cari. akhirnya jumpa jugak tutorial ni. BIG thanks
ReplyDeletealhamdulillah... dah jadi..trima kasih... ^_^
ReplyDeletewaaaa..pelik laa..nape twitter dy prgi kebawah pulok..adoi..kenape cik farah ? tak pahe neyh...huuu
ReplyDeletea little help please? kenapa saya punya memanjang ehh? tak menegak pon :'(
ReplyDeletethanks kak farah!hehe..:)
ReplyDeleteKak Farah , Yang Skype Tuhh Pulak Macam Mana Nak Cari Kodd Nya ? Buley Ajarkan Tak ?
ReplyDelete@jenab jenub
ReplyDeletethankss awk , great sye sukaaa !
Thanks atas tutorial..dh lamer cari..jupe gak akhirnya..:)
ReplyDeletethank :) lawalah
ReplyDeletekak farah , mcm mane nak wat URL facebook sendiri? tolong ajarkan
ReplyDeleteknpa nak wat tagged x jadi ye??
ReplyDelete=X
Assalamualaikum ! ^^ Terima kasih atas tutorial nie ^^ LIKE,LIKE,LIKE :D
ReplyDeleteterima kasih kak farah ! jadi jgk ! =D
ReplyDeletefarah, link utk ym & skype tu na amik kt mne???
ReplyDelete@CeRiTa GaDiS 92
ReplyDeleteym ambil id n skype pun id yg boleh org add kita :)
tQ sis farah..awesome! :)
ReplyDeletekak farah . me again . and untuk ke berapa puluh kali , thanks for ur tuto :)
ReplyDeletei loike <3 anyway thanks :)
ReplyDeleteterima kasih sgt2! mmg da lama cari tutorial ni. trimas kak farah
ReplyDeletethank you. ;)
ReplyDelete@jenab jenubtq farah..menjd!!
ReplyDeleteTHX KAK ! jd lah :)
ReplyDeletewaaaa!!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/
ReplyDeletethanks for sharing.. =))
ReplyDeletehi 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 :)
ReplyDeleteakak..thank you so much...akhirnya berjaya jugak saya buat..muah muah muah.. ;)
ReplyDeleteWow kak! jadi..thank you..sayang kak >.<
ReplyDeleteThank u so much kak farah
ReplyDeletethanks!!follow me! http://aunimadihah12.blogspot.com/
ReplyDeleteIcon Intagram tu nk dpt mana ye? terima kasih.. :)
ReplyDeleteicon instagram tu naa dapat di mana yaa?
ReplyDeleteicon instagram tu naa dapat di mana yaa?
ReplyDeleteThanks :)
ReplyDeletecik, floating bar awak tak bise di click, gimana ni? :(
ReplyDeletebestnyerrr dpt belajar cantikkan blog thanks kak farah nanti buat lah tutorial yg banyak lagi...bye
ReplyDeleteThankyouu very much ! Dah lame cari bende ni :D
ReplyDeleteAssalamualaikum pemilik Blog dan Pembaca. Jom Like Page Al Haura Craft.
ReplyDelete#FabricButtonBadge
https://www.facebook.com/pages/Al-Haura-Craft/306487389385871?fref=ts
akakkkkk. boleh bagi url untuk icon instagram tak ? :)
ReplyDeleteask.fm punyeh icon ade?
ReplyDeleteHi... Assalam...saya dah cuba tapi icon jadi bertimpa kenapa ye?? nanti tengok kat blog saya..xtau nak edit kat mana...
ReplyDeletehttp://mamaputerialeiya.blogspot.com/
Jadilah! Thank you ^^
ReplyDeletethannk you fr this tuto
ReplyDeleteassalamualaikum..kakak,best la tutorial kakak..huhu..kakak programmer ke?
ReplyDeletekenapa facebook punya tak appear ye?
ReplyDeleteicon instagram xde ke?
ReplyDeleteKakak,minta copy kat blog yer....Jgn risau nama url blog akak akan terpampang kat blog sayer tue..hehehehe
ReplyDeleteThnx . klu ade mase jom singgah http://budakblank98.blogspot.my/
ReplyDeletetq cik farah....done...cun:)
ReplyDeletethanks awak. :)
ReplyDeletesis cmner nk tukar link facebook kita, sbb bila klik keluar fb org lain
ReplyDeleteAmbil bahagian link gantikan dengan link fb sis :)
Deletesis, tlg buatkan link weebly plsssss
ReplyDeleteMaceeh.. 😄
ReplyDeletenice content admin. sangat bermanfaat. thank you admin
ReplyDeletebole buatkan icon untuk shopee...da puas cari tapi tak dapat
ReplyDelete