Hasil seni dan reka bentuk adalah berbayar dan hakcipta Whitey Mommy.
Sila hubungi saya di whiteymommy@yahoo.com untuk sebarang pertanyaan dan tempahan.
Anda TIDAK DIBENARKAN SAMA SEKALI untuk mengambil/menyalin/menyimpan
mana-mana bahagian hasil seni dan reka bentuk yang telah saya hasilkan TANPA KEBENARAN!

Tutorial: Cara letak Social Networking Bookmark pada Blog

Untuk kengkawan yang bertanya macam mana nak letak icon Facebook, Twitter,Blogspot dan Chat kat tepi blog. Maaf ya lambat sediakan tutorial... almaklumla... saya ni busy dengan Khalis, busy juga dengan template order... bajet busy la konon.... hehehe.... ok... pada sesiapa yang berminat... follow langkah2 kat bawah ya...

1. Login ke Blogspot .

2. Klik Layout > Add a Gadget Javascript / HTML

3. Copy di bawah dan Pastekan ke dalamnya

<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='masukkan url facebook anda' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="masukkan url icon facebook anda" /></a><br />

<a class='linkopacity' href='masukkan url twitter anda' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="masukkan url icon twitter anda" /></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='Go to Dashboard'><img border="0" src="masukkan url icon blogspot anda" /></a><br />

</div>

*Bahagian yang saya boldkan dengan warna merah tu... anda haruslah tukar dengan url social network anda dan juga url icon yang anda suka...

**Bahagian yang saya boldkan dengan warna purple pula... anda boleh menukar kedudukan button anda sama ada di kedudukan kiri atau kanan blog dengan menukar kan, left ke right.
dan juga boleh menukar tahap ketinggian button tersebut terapung di sini top:140px.

Untuk YM sedikit perubahan pada code... Copy&paste code dibawah ya... pastikan anda paste kod dibawah sebelum kod </div> ini ya...

<a class='linkopacity' href="ymsgr:sendim?masukkan Id Yahoo Messenger anda" imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='chat with me'><img border="0" src="masukkan url icon YM anda" /></a><br />
*Bahagian yang berwarna merah anda perlu masukkan maklumat anda ya...

Jika 4 code diatas tidak mencukupi, anda boleh salin kod di bawah dan paste sebelum </div> , dan masukkan link serta gambar yang anda suka...
<a class='linkopacity' href='LINK ADDRESS' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="URL IMAGE" /></a><br />

4. Setelah semua dah selesai, anda boleh save dan tengok hasilnya... mudahkan?

Sebagai tambahan...saya sediakan icon2 yang agak cantik di mata saya... berserta dengan urlnya sekali... tapi jika anda tidak berminat... sila lah cari disini dan upload sendiri icon2 tersebut untuk mendapatkan urlnya...=)

http://3.bp.blogspot.com/_PK5f-bkuqSc/TQpE9T7OPyI/AAAAAAAABKA/Owt1uPloSf0/s1600/facebook.png

http://1.bp.blogspot.com/_PK5f-bkuqSc/TQpE-xelCAI/AAAAAAAABKI/mNh_hSt2Dhs/s1600/twitter.png

http://3.bp.blogspot.com/_PK5f-bkuqSc/TQpE8tZQqSI/AAAAAAAABJ8/A_MmJwleya0/s1600/blogger.png


http://4.bp.blogspot.com/_PK5f-bkuqSc/TQpE-AsHSyI/AAAAAAAABKE/DK4aUK74VaM/s1600/gtalk.png

Selamat Mencuba, Jika tidak paham... boleh bertanya...dan saya akan cuba untuk reply... terima kasih ya...=)

Tutorial kredit pada: Mommy Pinky

72 Comment (s):

  1. @suffer8zine
    Semua nice.. tak de yang tak nice... huhuhu

    ReplyDelete
  2. orait dah buat tp tk tau jd ker tak..huhu...TQ sha

    ReplyDelete
  3. I have be familiar with a scarcely any of the articles on your website now, and I definitely like your fashionableness of blogging. I added it to my favorites net age roster and last will and testament be checking promote soon. Please report register out of order my put as ok and fail me know what you think. Thanks.

    ReplyDelete
  4. klau gmail lak cmne ek? ;leh guna coding sama x ngan lain2?

    ReplyDelete
  5. @zaL_cdpx gmail? untuk Chat ke? akk tak tahu la coding untuk tu cemana dik... tapi kalo adik ada link nya... just replace aje... caranya tetap sama...:)

    ReplyDelete
  6. thankyouu momy :) dh jadi. sebelum nih kite ade gak buad kad org lain punye tutorial, tp tk jadi.

    ReplyDelete
  7. yeayyyy dah jadiii..ngeh² *dgn idong kembang kempis kemput* :-p

    ReplyDelete
  8. kalau tumblr punya icon nak cari kat mana ye ?

    ReplyDelete
  9. terima kasih..
    saya ambik ye..
    hehhe

    ReplyDelete
  10. klo wp nak tampal tang mane...*garuk2 kpala

    ReplyDelete
  11. kak , nak dapatkan ym id tu cm neh ?

    ReplyDelete
  12. @Dee Dee Kidrauhl
    Ym id?
    contoh
    whiteymommy@yahoo.com
    whiteymommy -yahoo id

    yahoo id based on your email... buang @yahoo.com je.

    ReplyDelete
  13. Menjadila !..thanks..lama dah saya carik icon nih !

    ReplyDelete
  14. akak, niesz amik tutorial ni yer, nnti niesz kredit kan ke akak.. :)

    ReplyDelete
  15. knp jd melintang =_____="
    nk menegak

    ReplyDelete
  16. Tinki-q 4 all.... ^_^, sat gi nak try...

    ReplyDelete
  17. nape tak boleh copy code.. D'ya dah tekan dah ctrl+f.. tapi taa boleh copy.. sedih laa.. =(

    http://miss-dya.blogspot.com

    ReplyDelete
  18. @Miss D'ya
    eh rasanya akk tulis CTRL + C dik bukan F

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. thank you sangat whitey mommy...da lama mencari tutorial nih... ^_^ whitey mommy punya tutorial senang paham...

    ReplyDelete
  21. yay!..jadi!...tapi bila cursor menyentuh baru terang kan?..kalau nak bagi dia terang terus tanpa cursor menyentuh boleh?

    ReplyDelete
  22. i ambik u nyer tutorial tau..ngeee..thanx=p

    ReplyDelete
  23. thanx a lot kak,

    sangat berguna tuto ni.

    hehe (:

    ReplyDelete
  24. mekacih kak..byk membantu saye..mekacih..

    ReplyDelete
  25. url facebook tu email kite ye?

    ReplyDelete
  26. akak ! tengs ya tuk tuto y superb neyh .. sy amek icon tuh .. =)

    ReplyDelete
  27. err , salam , saya nk cari url icon tumblr . saiz sederhana punya . akak boleh tlg saya ? saya takpandai nk upload gmba tuh , pening kepala ~_~
    boleh tlg tak ? akak hnta url icon tu dekat fb saya boleh ? saya nk icon yg sama macam kat atas tuh , warna pink , tumblr tau ! hnta dekat fb saya kayy ? www.facebook.com/maisarahsairin . kthanks <3

    ReplyDelete
  28. cun .. ;) cume..WM xbuat ke imej sedondon utk YM dan laen2 ? ;)

    ReplyDelete
  29. . mumy na tnye nie .. cmne na letak tuto pada blog kyte sendiry eak ?? n need follow my blog back ..!
    http://bebyketot.blogspot.com

    ReplyDelete
  30. tq akak..sya dh buat! jadi! tp nk tnya klu letak icon tu seblah2 cm ne ek??yg akak bg atas bwh kn??

    ReplyDelete
  31. slm. akak, thanks utk tutorial yg cool ni. alhamdulillah sy bt & jadi (:..n sy guna icon cntik akak tu (:

    ReplyDelete
  32. This comment has been removed by the author.

    ReplyDelete
  33. alam ,, kak.. akak bule tlg crikkn url icon tagged n formspring y sme mcm kt ats tu ?? pastu nk center kn url tu semua cmner er? xnk left or right... akak tlg kak ... nt inbox sye er kt fb http://www.facebook.com/hanimochagurl
    thanks .. syg kaka

    ReplyDelete
  34. thanks 4 the tuto.. mohon share ya.. nanti mira credits to

    ReplyDelete
  35. Assalammualaikum.. hehe.. terima kasih untuk tutorial ni.. mula2 buat benda memang susah (pening kepala!).. tapi bila saya rujuk balik tutorail nie, BENDA SEBENARNYA SENANG JE.... >__<

    TERIMA KASIH SEKALI LAGI...

    ReplyDelete
  36. Whiteymommy,sy ambik semua icon ni ye.Thanks :)

    ReplyDelete
  37. kak, nak guna tutor akak bole?

    ReplyDelete
  38. This comment has been removed by the author.

    ReplyDelete
  39. xde icon lain ke?? ayu plak blog saya nti pakai icon tu. huhu

    ReplyDelete
  40. Thankz for the info. Done following. Jom follow blog saya http://popcorneater1.blogspot.com/

    ReplyDelete
  41. yeah dah jadi..tq utk ilmu yang disahre..mintak halal...

    ReplyDelete
  42. Memang terbaik, jom visit blog saya http://kamarularnizam.blogspot.com/

    ReplyDelete
  43. terima kasih saya copy imej facebook awak..

    ReplyDelete

Thank You For Leaving a Comment to Me...

 
Copyright © Whitey Mommy™