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





Share this PostPin ThisEmail ThisShare on Google PlusShare on Tumblr
21 Comments for "Tutorial 133 : Membuat Tab Menu Mudah ( No edit html )"

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

berjaya! alhamdulillah.. TQ sgt2 :)

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

@umiee

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

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

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

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

@niniewawa.com

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

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

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

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

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

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

http://surveyonlineberbayar.blogspot.com/

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

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)
Pesanan:
Anda tidak dibenarkan sama sekali mengambil/menyalin/menyimpan/print screen mana-mana kandungan blog ini kecuali atas keizinan tuan punya blog. Tuan punya blog tidak teragak-agak untuk mengambil tindakan undang-undang jika hak persendirian ini dilanggar.

Pendapat penulis tidak semestinya kekal.
Cik Nurfarah

Related Posts Plugin for WordPress, Blogger...
Back To Top