Tuesday, February 15, 2011

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

105 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. jd la. http://viewingmyblog.blogspot.com/. do follow thnx :D

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

    light|shadow

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

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

    ReplyDelete
  19. @syud

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

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

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

    ReplyDelete
  22. @nurul izzati

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

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

    ReplyDelete
  24. @FANA

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

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

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

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

    ReplyDelete
  28. @iqa

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  44. 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
  45. 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
  46. akak..thank you so much...akhirnya berjaya jugak saya buat..muah muah muah.. ;)

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  57. 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
  58. assalamualaikum..kakak,best la tutorial kakak..huhu..kakak programmer ke?

    ReplyDelete
  59. kenapa facebook punya tak appear ye?

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

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

    ReplyDelete

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

Terima kasih lepak sini, nanti datang lagi yer..
Sayang Korang...





Related Posts Plugin for WordPress, Blogger...
 
Copyright © 2016 Blog Cik Nurfarah. All Rights Reserved. Designed by Blog Cik Nurfarah.