Cara Membuat Menu Horizontal Blog Tab Warna Plus ~ New Trick

Cara Membuat Menu Horizontal Blog Tab Warna Plus

Cara Membuat Menu Horizontal Blog Tab Warna Plus - Setelah mengetahui macam menu horizontal yang telah saya bahas sebelumnya dengan tampilan yang sederhana ataupun lengkap dengan search engine maka pada artikel menu horizontal tab warna plus ini, saya kembali membahas tentang menu horizontal tapi pada kali dengan tampilan menu yang memiliki warna seperti contoh gambar dari menu horizontal tab warna plus berikut ini

Demo

Berikut Cara Membuat Menu Horizontal Blog Tab Warna Plus

Masuk ke akun blogger sobat
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>
#tabwarnaplus {background: #fff;margin: 0 auto;padding: 0;width:920px;}
#navtabwarnaplus {background: #fff;height: 32px;margin: 0;padding:2px 0 1px 0;border-top: 1px solid #f0f0f0;border-bottom: 1px solid #f0f0f0;font-size: 11px;}
#navtabwarnaplus .current_page_item {background: #AB2D2D;}
#navtabwarnaplus .current_page_item a {color: #fff !important;}
#navtabwarnaplus ul {float: left;list-style: none;margin: 0 0 0 1px;padding: 0;}
#navtabwarnaplus li {float: left;list-style: none;margin: 0 5px 0 0;padding: 0;font-weight: bold;text-transform: uppercase;}
#navtabwarnaplus ul li {list-style: none;margin: 0 0 0 5px;padding: 0;}
#navtabwarnaplus li a, #navtabwarnaplus li a:link, #navtabwarnaplus li a:visited {font-weight: bold;color: #242423;display: block;margin: 0;padding: 8px 12px 7px 12px;}
#navtabwarnaplus li a:hover, #navtabwarnaplus li a:active {background: #AB2D2D;color: #fff;display: block;text-decoration: none;margin: 0;padding: 8px 12px 7px 12px;border-bottom: none;}
#navtabwarnaplus li li a, #navtabwarnaplus li li a:link, #navtabwarnaplus li li a:visited {background: #fff;width: 130px;color: #111;float: none;margin: 0;padding: 8px 12px 7px 12px;border-bottom: 1px solid #ddd;border-left: 1px solid #ddd;border-right: 1px solid #ddd;}
#navtabwarnaplus li li a:hover, #navtabwarnaplus li li a:active {background: #AB2D2D;color: #fff;padding: 8px 12px 7px 12px;}
#navtabwarnaplus li ul {z-index: 9999;width: 155px;margin: 0;padding: 0;position: absolute;left: -999em;height: auto;}
#navtabwarnaplus li li {border:none;}
#navtabwarnaplus li ul a {width: 120px;}
#navtabwarnaplus li ul a:hover, #navtabwarnaplus li ul a:active {}
#navtabwarnaplus li ul ul {margin: -29px 0 0 156px;border: none;}
#navtabwarnaplus li:hover ul ul, #navtabwarnaplus li:hover ul ul ul, #tnavtabwarnaplus li.sfhover ul ul, #tnavtabwarnaplus li.sfhover ul ul ul {left: -999em;}
#navtabwarnaplus li:hover ul, #navtabwarnaplus li li:hover ul, #navtabwarnaplus li li li:hover ul, #navtabwarnaplus li.sfhover ul, #navtabwarnaplus li li.sfhover ul, #navtabwarnaplus li li li.sfhover ul {
left: auto;}#navtabwarnaplus li:hover, #navtabwarnaplus li.sfhover {position: static;}
#navtabwarnaplus .left a {margin: 0;padding: 0 5px 0 5px;}
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='tabwarnaplus'>
<div id='navtabwarnaplus'>
<div class='left'>
<ul>
<li class='page_item current_page_item'><a href='#'>Beranda</a></li>
<li class='page_item'><a href='#'>Daftar Isi</a></li>
<li class='page_item'><a href='#'>Kontak Admin</a></li>
<li class='page_item'><a href='#'>Privasi</a></li>
<li class='page_item'><a href='#'>Blog</a></li>
</ul>
</div>
</div>
</div>
Selesai. Silahkan pratinjau perubahan blog sobat, jika tidak ada error maka pada tampilan Preview, sobat akan melihat tampilan menu horizontal blog tab warna plus
Simpan Template