Korang nak ubah atau nak menambah Tab menu menjadi seperti image di atas tak? Kelebihan Tab Menu ini boleh menukar apa sahaja warna background termasuklah dalam bentuk gif atau animated. Ok ikut step di bawah:
1. Sign in akaun blogger
2. Dashboard > Design > Add A Gadget > Html / Javascript
3. Copy dan paste kod di bawah ini di Html / Javascript
<style>4. Save!
.mbt-red-grey-menu{
border:5px solid #cd0000;
padding:0;
clear:both;
}
.mbt-red-grey-menu{
margin:0px;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu8tw5yTmZjEvzxPLweP4it_pq9WQczKAbyHJjSX1urT7hTsYvIEWM5roiyfpLC5G47WxTgewd_wEq_DyzFZ8LRtZq6FeSudz_qE5W0GK3qR45HoaQeTNLGGzDylAq5FNrCh33jPl97qI/s400/blockdefault.gif) center center repeat-x;
}
.mbt-red-grey-menu li{
display: inline;
}
.mbt-red-grey-menu li a{
float: left;
color: #fff;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid ;
}
.mbt-red-grey-menu li a:visited{
color: #fff;
}
.mbt-red-grey-menu li a:hover, .mbt-red-grey-menu li a.selected{
color: #fff;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBHW0zCJRIByYshTbO0RRFkB3mHsyrf1_fGlEZAwUQNRQIlYhyO3ZMkX3XzTcB1A1UpbPdqGFaDrmQdOqRUbw4KdtJU4n9PAbv_aBQ_pXX93EHaPD5OJgFYpPS58Du3KufUoIjwj1PD5s/s400/blockactive.gif) center center repeat-x;
}
</style>
<ul class="mbt-red-grey-menu">
<li><a href="#">Home</a></li>
<li><a href="#" >Tajuk 1 </a></li>
<li><a href="#">Tajuk 2</a></li>
<li><a href="#">Tajuk 3</a></li>
</ul>
** Jika korang mahu menambah Tajuk Baru korang hanya perlu menambah kod <li><a href="#">Tajuk 3</a></li> berulang kali berapa banyaklah korang nak, tapi pastikan berakhir dengan kod </ul>
** Masukkan Pautan URL di kod berwarna Biru
** Masukkan Tajuk apa-apa sahaja di kod berwarna Pink.
** Jika mahu menukar warna Tab Menu gantikan kod URL background di kod berwarna Merah dengan URL background korang. Background boleh search di Google.
** Jika mahu menukar warna text di Tab Menu hanya tambah kod <span style="color: #741b47;"> masukkan kod ini di antara Pautan dengan Tajuk contoh cara letak seperti di bawah :
~ Kod Warna korang boleh rujuk di bawah ini:<li><a href="#"><span style="color: #741b47;">Home</a></li>
Beraneka Warna-Warna Terkini
-----------------------------------------
EDITOR KOD WARNA HTML
Tutorial Blog Cantik
Tutorial Blog Cantik
| #FFFFFF | #FFFFCC | #FFFF99 | #FFFF66 | #FFFF33 | #FFFF00 |
| #FFCCFF | #FFCCCC | #FFCC99 | #FFCC66 | #FFCC33 | #FFCC00 |
| #FF99FF | #FF99CC | #FF9999 | #FF9966 | #FF9933 | #FF9900 |
| #FF66FF | #FF66CC | #FF6699 | #FF6666 | #FF6633 | #FF6600 |
| #FF33FF | #FF33CC | #FF3399 | #FF3366 | #FF3333 | #FF3300 |
| #FF00FF | #FF00CC | #FF0099 | #FF0066 | #FF0033 | #FF0000 |
| #CCFFFF | #CCFFCC | #CCFF99 | #CCFF66 | #CCFF33 | #CCFF00 |
| #CCCCFF | #CCCCCC | #CCCC99 | #CCCC66 | #CCCC33 | #CCCC00 |
| #CC99FF | #CC99CC | #CC9999 | #CC9966 | #CC9933 | #CC9900 |
| #CC66FF | #CC66CC | #CC6699 | #CC6666 | #CC6633 | #CC6600 |
| #CC33FF | #CC33CC | #CC3399 | #CC3366 | #CC3333 | #CC3300 |
| #CC00FF | #CC00CC | #CC0099 | #CC0066 | #CC0033 | #CC0000 |
| #99FFFF | #99FFCC | #99FF99 | #99FF66 | #99FF33 | #99FF00 |
| #99CCFF | #99CCCC | #99CC99 | #99CC66 | #99CC33 | #99CC00 |
| #9999FF | #9999CC | #999999 | #999966 | #999933 | #999900 |
| #9966FF | #9966CC | #996699 | #996666 | #996633 | #996600 |
| #9933FF | #9933CC | #993399 | #993366 | #993333 | #993300 |
| #9900FF | #9900CC | #990099 | #990066 | #990033 | #990000 |
| #66FFFF | #66FFCC | #66FF99 | #66FF66 | #66FF33 | #66FF00 |
| #66CCFF | #66CCCC | #66CC99 | #66CC66 | #66CC33 | #66CC00 |
| #6699FF | #6699CC | #669999 | #669966 | #669933 | #669900 |
| #6666FF | #6666CC | #666699 | #666666 | #666633 | #666600 |
| #6633FF | #6633CC | #663399 | #663366 | #663333 | #663300 |
| #6600FF | #6600CC | #660099 | #660066 | #660033 | #660000 |
| #33FFFF | #33FFCC | #33FF99 | #33FF66 | #33FF33 | #33FF00 |
| #33CCFF | #33CCCC | #33CC99 | #33CC66 | #33CC33 | #33CC00 |
| #3399FF | #3399CC | #339999 | #339966 | #339933 | #339900 |
| #3366FF | #3366CC | #336699 | #336666 | #336633 | #336600 |
| #3333FF | #3333CC | #333399 | #333366 | #333333 | #333300 |
| #3300FF | #3300CC | #330099 | #330066 | #330033 | #330000 |
| #00FFFF | #00FFCC | #00FF99 | #00FF66 | #00FF33 | #00FF00 |
| #00CCFF | #00CCCC | #00CC99 | #00CC66 | #00CC33 | #00CC00 |
| #0099FF | #0099CC | #009999 | #009966 | #009933 | #009900 |
| #0066FF | #0066CC | #006699 | #006666 | #006633 | #006600 |
| #0033FF | #0033CC | #003399 | #003366 | #003333 | #003300 |
| #0000FF | #0000CC | #000099 | #000066 | #000033 | #000000 |
Ulasan ini telah dialihkan keluar oleh pengarang.
BalasPadamsalam, awak, cmne awk buat gambar kat post ni gerak2?,yg gambar tab menu tu, ajar la,heee
BalasPadam