Cara Membuat Menu Horizontal Blog Tab Warna Berbeda

Cara Membuat Menu Horizontal Blog Tab Warna Berbeda pada artikel ini merupakan edisi khusus yang saya buat untuk sobat karena menu horizontal tab warna berbeda yang dibuat akan menampilkan tab dengan warna berbeda ketika disorot oleh pointer-mouse. Menu horizontal tab warna berbeda sangat bagus dan cocok digunakan untuk blog yang memiliki kategori teknologi dan tentunya kode-kode yang digunakan dalam menu horizontal tab warna berbeda tidak memberatkan loading blog sobat karena tidak ada gambar yang terpasang dalam kode menu horizontal tab warna berbeda tersebut.

Demo

Apakah sobat tertarik untuk menggunakan menu horizontal tab warna berbeda seperti gambar diatas?
Berikut Cara Membuat Menu Horizontal Blog Tab Warna Berbeda

1. Masuk ke akun blogger sobat
2. Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
3. Cari kode ]]></b:skin>
4. Masukkan kode CSS berikut tepat diatas ]]></b:skin>
   .menuwarnawarni{background:#E6E6FA;width:100%;margin:0 auto;}
   #menuwarnawarni{background:#E6E6FA url() repeat-x; height:32px }
   #menuwarnawarni1 {background:#483D8B url() repeat-x;border-top: 4px solid #8A2BE2;height:32px }
   #menuwarnawarni2 {background: url() repeat-x;border-top: 4px solid #0000FF;height:32px }
   #menuwarnawarni3 {background: url() repeat-x;border-top: 4px solid #DC143C;height:32px }
   #menuwarnawarni4 {background: url() repeat-x;border-top: 4px solid #8B008B;height:32px }
   #menuwarnawarni5 {background: url() repeat-x;border-top: 4px solid #FF8C00;height:32px }
   #menuwarnawarniwrapper {width:100%; height:30px; margin:0 auto }
   .clearit {clear:both; height:0; line-height:0.0; font-size:4px }
   #menuwarnawarniline {color:#fff; height:32px; overflow:hidden; -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px; margin:0 auto }
   #menuwarnawarniline li a {border-right:1px float:left; display:block; font-weight:970; text-decoration:none; color:#000;background:#E6E6FA;margin:0; padding:8px 7px}
   #menuwarnawarniline ul {padding-left:0px; font:bold 15px Arial; color:#F7F7F7; text-shadow:#999 2px 0px 1px ; text-transform:none; list-style-type:none; letter-spacing:.01em; margin:0 }
   #menuwarnawarninav {width:100% }
   #menuwarnawarninav,#menuwarnawarninav ul {list-style:none; font-size:bold 12px; margin:0; padding:0 }
   #menuwarnawarninav a {border-right:0 solid #fff; border-left:0px solid #fff; float:left; display:block; font-weight:700; text-decoration:none; color:#fff; margin:0; padding:8px 7px }
   #menuwarnawarninav li {float:left; position:static; width:auto }
   #menuwarnawarninav li.blueviolet a:hover {background:#8A2BE2; color:#FFF; text-decoration:none }
   #menuwarnawarninav li.blue a:hover {background:#0000FF; color:#FFF; text-decoration:none }
   #menuwarnawarninav li.crimson a:hover {background:#DC143C; color:#FFF; text-decoration:none }
   #menuwarnawarninav li.darkmagenta a:hover {background:#8B008B; color:#FFF; text-decoration:none }
   #menuwarnawarninav li.darkorange a:hover {background:#FF8C00;color:#FFF;text-decoration:none;}
5. Cari kode dengan struktur seperti berikut ini
   <div id='header-outer'>
   <div id='header-inter'>
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title=' (Header)' type='Header'>
   <b:includable id='title'>
   ----------------------
   ----------------------
   ----------------------
   </b:includable>
   </b:widget>
   </b:section>
   </div>
   </div>
   </div>
   
   Letakkan kode berikut tepat dibawah kode </b:section> diatas
   
   <div id='menuwarnawarniline'>
   <div id='menuwarnawarniwrapper'>
   <ul id='menuwarnawarninav'>
   <li class='blueviolet'><div id='menuwarnawarni1'><a class='tooltip' href='#' title='Panduan'>Panduan</a></div></li>
   <li class='blue'><div id='menuwarnawarni2'><a class='tooltip' href='#' title='Blog Pelanggan'>Blog Pelanggan</a></div></li>
   <li class='crimson'><div id='menuwarnawarni3'><a class='tooltip' href='#' title='Desain'>Desain</a></div></li>
   <li class='darkmagenta'><div id='menuwarnawarni4'><a class='tooltip' href='#' title='Template'>Template</a></div></li>
   <li class='darkorange'><div id='menuwarnawarni5'><a class='tooltip' href='#' title='Testimoni'>Testimoni</a></div></li>
   </ul>
   <br class='clearit'/>
   </div>
   <div style='clear:both;'/>
   </div></div>
6. Selesai. Silahkan pratinjau perubahan blog sobat, jika tidak ada error maka pada tampilan Preview, sobat akan melihat tampilan menu horizontal tab warna berbeda
7. Simpan Template

Semoga bermanfaat dan bisa diterapkan dalam blog sobat setelah membaca artikel ini, Cara Membuat Menu Horizontal Blog Tab Warna Berbeda