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


https://4.bp.blogspot.com/-Vom-1YROPpA/Wl8Dct0HBYI/AAAAAAAALpM/027pzelbpIs8eo5JfwC6Lk5FdPe0ttTygCLcBGAs/s1600/Instagram.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..

108 comments

  1. beb, formspring punya icon tiada? hehe

    ReplyDelete
  2. beb, untuk formspring mmg takde icon ye?

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

    ReplyDelete
  4. 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~~

    ReplyDelete
  5. @Haura Malina

    ada cik Haura..sila tengok tutorial 14..

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

    ReplyDelete
  6. @Puteri Balqis

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

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

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

    ReplyDelete
  9. kalau mcm akak punya floating button tu cmna nk buat?

    ReplyDelete
  10. @cik mieza

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

    ReplyDelete
  11. @izyan

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

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

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

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

    ReplyDelete
  15. thanks you Miss Farah! bjaya! hehe.;)

    ReplyDelete
  16. oke . tenkiu tenkiu ! :D

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

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

    light|shadow

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

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

    ReplyDelete
  21. @syud

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

    ReplyDelete
  22. sudah jadi !! thanks kak farah :)

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

    ReplyDelete
  24. @nurul izzati

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

    ReplyDelete
  25. ada tak url pic untuk formspring ada ada kesan koyak2 kt tepi?

    ReplyDelete
  26. @FANA

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

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

    ReplyDelete
  28. thanz akak fara . da lame cari bnde nnihh <3

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

    ReplyDelete
  30. @iqa

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

    ReplyDelete
  31. dah boleh da!
    thanks sis =)

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

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

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

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

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

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

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

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

    ReplyDelete
  40. knpa nak wat tagged x jadi ye??
    =X

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

    ReplyDelete
  42. terima kasih kak farah ! jadi jgk ! =D

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

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

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

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

    ReplyDelete
  47. THX KAK ! jd lah :)

    ReplyDelete
  48. 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/

    ReplyDelete
  49. 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 :)

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

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

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

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

    ReplyDelete
  54. icon instagram tu naa dapat di mana yaa?

    ReplyDelete
  55. icon instagram tu naa dapat di mana yaa?

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

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

    ReplyDelete
  58. Thankyouu very much ! Dah lame cari bende ni :D

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

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

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

    ReplyDelete
  61. 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/

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

    ReplyDelete
  63. kenapa facebook punya tak appear ye?

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

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

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

    ReplyDelete
    Replies
    1. Ambil bahagian link gantikan dengan link fb sis :)

      Delete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Blogger Copyright © 2018. All Rights Reserved by BLOG CIK NURFARAH