Pada artikel ini merupakan edisi khusus yang saya buat untuk anda karena menu horizontal tab warna berbeda yang dibuat akan menampilkan tab dengan warna berbeda ketika disorot oleh pointer-mouse. Menu ini 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 anda karena tidak ada gambar yang terpasang dalam kode menu horizontal tab warna berbeda tersebut.
Apakah anda tertarik untuk menggunakan menu horizontal tab warna-warni seperti gambar diatas?
Berikut cara membuat Menu horizontal blog tab warna berbeda :
Berikut cara membuat Menu horizontal blog tab warna berbeda :
- Masuk ke akun blogger anda.
- Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard.
- Cari kode ]]></b:skin>.
- 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;} - 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> - Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilannya.
- Simpan Template.
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Membuat Menu Horizontal Blog Tab Warna-Warni. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
