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:

blog tutorial