Friday, February 10, 2012

Tutorial 133 : Membuat Tab Menu Mudah ( No edit html )

Assalamualikum semua,
Selamat hari jumaat yang berbahagia.
Kali ni nak tunaikan permintaan reader yang inginkan tab menu mudah yang tak perlu edit html. Ok, kepada sesiapa yang ketinggalan tutorial tab menu boleh tengok link di bawah :


Tab Menu 1
Tab Menu 2
Tab Menu 3
Tab Menu 4
Tab Menu 5


Kepada sesiapa yang belum mahir linkkan Tab Menu boleh click sini


Tutorial kali ni simple tab menu yang tak perlu edit html bagai, senang dan mudah je. Contohnya macam ni :





1. Sign in blogger > Design > Add Gadget > Html/JavaScript

2. Copy code di bawah dan paste ke dalam Html/Java Script



<div style="text-align: center;"><span style="padding: 10px 30px; -moz-border-radius: 5px 5px 5px 5px; background-color: #F989AE;">

<a href="http://www.blogger.com/home">Home</a></span> <span style="padding: 10px 30px; -moz-border-radius: 5px 5px 5px 5px; background-color: #F989AE;">

<a href="http://bicarafarah.blogspot.com/p/blog-tutorial_1005.html">TUTORIAL</a></span> <span style="padding: 10px 30px; -moz-border-radius: 5px 5px 5px 5px; background-color: #F989AE;">

<a href="http://bicarafarah.blogspot.com/p/info-dan-tips.html">INFO</a></span>
<span style="padding: 10px 30px; -moz-border-radius: 5px 5px 5px 5px; background-color: #F989AE;">

<a href="http://ciknurfarah.blogspot.com/">CONTEST</a></span> <span style="padding: 10px 30px; -moz-border-radius: 5px 5px 5px 5px; background-color: #F989AE;">

<a href="http://fara-hamster.blogspot.com/">HAMSTER</a></span>
<span style="padding: 10px 30px; -moz-border-radius: 5px 5px 5px 5px; background-color: #F989AE;">

<a href="http://ciknurfarah.tumblr.com/">TUMBLR</a></span></div>

3. Apa yang perlu di edit?

#F989AE adalah warna tab menu. HERE for more colour.
BIRU untuk link url tab menu.
PURPLE nama tab menu




Kalau nak tambah tab menu cuma copy code ini :

<a href="http://fara-hamster.blogspot.com/">HAMSTER</a></span>
<span style="padding: 10px 30px; -moz-border-radius: 5px 5px 5px 5px; background-color: #F989AE;">

sebelum code di bawah :

<a href="http://ciknurfarah.tumblr.com/">TUMBLR</a></span></div>


4. Kalau dah puas hati, SAVE dan lihat hasilnya, pastikan anda letakkan atau drag widget/gadget tersebut di bawah header seperti gambar di bawah.






Senangkan? Try la buat! baiiii





21 comments:

  1. suke sgt ada tutorial ni.. lama dha cr tp bila buat asyik x jd je.. nanti nak try mlm ni. TQ

    ReplyDelete
  2. berjaya! alhamdulillah.. TQ sgt2 :)

    ReplyDelete
  3. salam sis farah,sy tak fahampe maksud
    "sebelum kod dibawah"kat ats tuuu.

    ReplyDelete
  4. @umiee

    kalau nak tambah tab menu, letakkan code y disuruh sebelum code y diberi itu

    ReplyDelete
  5. BERJAYA!!!TQ SO MUCH!

    p/s: terjumpa blog awak masa blogwalking, keep up the good work k!
    :)) so helping others!

    http://bajufiqah.blogspot.com/
    http://fiqahidris.blogspot.com

    ReplyDelete
  6. salam..yang home x menjadi la..nk wat cmne?cer jelaskan:))

    ReplyDelete
  7. @♥Cik Nurfarah♥
    kak , masalahhnye sye guna bl0gskin , maneade bende tuh !

    ReplyDelete
  8. @niniewawa.com

    it not tutorial for blogskin. it suitable for template designer or layout template.

    ReplyDelete
  9. Terima Kasih!!!! amat menolong..dan senang nak ikut....

    ReplyDelete
  10. Kak farah, izikan sye copy paste code tu ek :) sye dh credit skali . Selamat berbuka puasa ;)

    ReplyDelete
  11. wow .. blog akak banyak membantu .. sangat sangat .. tq kak .. nak follow akak :D

    ReplyDelete
  12. @♥Cik Nurfarah♥ macam mna nk masukkan segala info kat dalam tu..? (^^)

    ReplyDelete
  13. Kak,knpe backgound dia hitam tp gat gadged lain xhitam pn.cume yg bwah header je hitam

    ReplyDelete
  14. http://surveyonlineberbayar.blogspot.com/

    singgah blog saya dan follow kalau nak tao macam mana dapat duit

    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.