Tab Menu Berbagai Background


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>
.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(http://1.bp.blogspot.com/-1c7w5a0macY/ToSxFtLwRAI/AAAAAAAAFLs/I4I4CMYKqKc/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(http://4.bp.blogspot.com/-2GYPQ19l_7w/ToSxFfUYtCI/AAAAAAAAFLk/sdV_PLmGGEA/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>
4. Save!

** 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 :
 <li><a href="#"><span style="color: #741b47;">Home</a></li>
~ Kod Warna korang boleh rujuk di bawah ini:

Beraneka Warna-Warna Terkini
-----------------------------------------
EDITOR KOD WARNA HTML 
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

2 ulasan:

  1. Ulasan ini telah dialihkan keluar oleh pengarang.

    BalasPadam
  2. salam, awak, cmne awk buat gambar kat post ni gerak2?,yg gambar tab menu tu, ajar la,heee

    BalasPadam

Komen Terbaru