shad0w-share

Menu Horizontal Blog di Blogspot merupakan daftar menu-menu halaman yang ada di blog yang biasanya terletak diatas atau dibawah atau sejajar dengan judul blog atau header dan kadang ada sebagian teman-teman blogger meletakkan menu-menu ini berada dibawah blog atau tepatnya diatas footer blog. Berbeda dengan menu vertikal, menu horizontal memiliki bentuk yang sejajar dengan lebar blog atau lebar header blog dari arah kanan ke kiri. Seperti yang ada di blog ini atau pada tampilan gambar berikut ini


Menu horizontal blog di Blogspot bisa dibuat sesuai dengan keinginan pemilik blog, seperti yang telah saya lakukan terhadap blog ini. Dan pada artikel ini saya membagi beberapa cara dalam membuat menu horizontal blog di Blogspot yang bisa anda pilih sesuai dengan keinginan anda

1. Menu Horizontal Blog Otomatis
2. Menu Horizontal Blog Sederhana
3. Menu Horizontal Blog Dengan Search Engine
4. Menu Horizontal Blog Drop Down
5. Menu Horizontal Blog Drop Down Dengan Search Engine (coming soon...)
   
6. Menu Horizontal Blog Warna Plus
7. Menu Horizontal Blog Dengan Tab Warna Warni Berbeda
8. Menu Horizontal Blog Dengan Iklan (coming soon...)
   

Itulah beberapa menu horizontal blog di Blogspot yang saya kira menjadi keinginan beberapa teman blogger dan juga sering dipergunakan. Jadi, silahkan anda pilih sesuai dengan tampilan blog anda. Jika ada pertanyaan, silahkan tinggalkan komentar untuk artikel ini, Menu Horizontal Blog di Blogspot

Cara Membuat Menu Horizontal Blog Otomatis adalah cara yang digunakan untuk menampilkan menu-menu halaman blog secara otomatis. Tidak hanya itu, dalam artikel cara membuat menu morizontal blog otomatis ini, anda tidak hanya membuat menu horizontal tapi anda bisa membuat menu dalam bentuk vertikal dan posisi letaknya pun bisa sesuai dengan keinginan anda. Serta dalam artikel cara membuat menu horizontal blog otomatis ini, anda tidak perlu menggunakan kode-kode html atas membuat kode-kode css seperti yang biasa dilakukan dalam membuat menu horizontal

Berikut Cara Membuat Menu Horizontal Blog Otomatis

1. Masuk ke akun blogger anda
2. Pilih menu Laman >> Jangan tampilkan ▼
   
   
   • Pilih Tab atas jika anda ingin menampilkan menu dengan tampilan horizontal dibawah judul blog atau header
   • Pilih Tautan samping jika anda ingin menampilkan menu dengan tampilan vertikal disamping blog atau sidebar
3. Selesai

Untuk menampilkan menu dalam menu horizontal atau vertikal, anda harus membuat halaman blog terlebih dahulu seperti yang telah saya bahas dalam artikel cara membuat halaman blog.

Jika ada pertanyaan, silahkan tinggalkan komentar anda untuk artikel ini, Cara Membuat Menu Horizontal Blog Otomatis

Cara Membuat Menu Horizontal Blog Sederhana - Saya yakin anda sudah tahu apa itu menu horizontal blog, jika belum silahkan di baca pada artikel sebelumnya, menu horizontal blog di Blogspot. Pada artikel ini, saya akan membahas bagaimana cara membuat menu horizontal blog sederhana dengan menggunakan kode-kode html atau css seperti contoh gambar berikut ini


Berikut Cara Membuat Menu Horizontal Blog Sederhana

1. Masuk ke akun blogger anda
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>
   .navhorizontalpic{background:#434343 url() repeat-x top left;width:100%;height:40px;border-top:1px solid #000000;margin:0 auto;padding:0 auto}
   .navhorizontal{width:960px;height:35px;margin:0 auto;padding:12px 0}
   .navhorizontal ul{padding-left:0;color:#fff;text-transform:none;list-style-type:none;font:normal 12px Arial,sans-serif;margin:0}
   .navhorizontal li{display:inline;margin:0}
   .navhorizontal li a{background:url() no-repeat center right;float:left;display:block;text-decoration:none;color:#eee;line-height:1.5em;padding:1px 12px}
   .navhorizontal li a:visited{color:#eee}
   .navhorizontal li a:hover{color:#8a8050;text-decoration:none;-moz-transition:color .25s linear;-webkit-transition:color .25s linear;transition:color .25s linear}
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 class='navhorizontalpic'>
   <div class='navhorizontal'>
   <ul>
   <li><a href='/'><img alt='Panduan Template Blog' border='0' src='link url gambar' title=''/></a></li>
   <li><a href='#'>Forum</a></li>
   <li><a href='#'>Color Code</a></li>
   <li><a href='#'>Archieves</a></li>
   <li><a href='#'>Contact us</a></li>
   </ul>
   </div>
   <div style='clear:both;'/>
   </div>
6. Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog sederhana seperti yang ada pada blog ini.
7. Simpan Template

Okey, semoga bermanfaat dan bisa diterapkan dalam blog anda setelah membaca artikel ini, Cara Membuat Menu Horizontal Blog Sederhana

Cara Membuat Menu Horizontal Blog Search Engine - Setelah mengetahui beberapa contoh menu horizontal dan cara membuat menu horizontal sederhana, kini kita akan melengkapi menu horizontal yang telah kita buat dengan adanya search engine pada menu horizontal tersebut. Untuk blog saya ini, memang tidak saya terapkan menu horizontal search engine karena search engine sendiri sudah ada di halam utama blog ini. Untuk contohnya seperti tampilan gambar berikut ini


Berikut Cara Membuat Menu Horizontal Blog Search Engine

1. Masuk ke akun blogger anda
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>
   navse-element{width:900px; margin-top:15px; padding:0; float:center;}
   #navse{ background:#FFFFFF url() no-repeat center top;height:32px; padding:10px 0 0; margin-bottom:0px; clear:both; margin:0 auto;}
   #navse-left{float:left; display:inline; width:680px; padding-left:10px; padding-top:1px}
   #navse-right{float:right; display:inline; width:170px; padding-top:3px; padding-right:23px}
   #navse ul{position:relative; overflow:hidden; padding:0; margin:0; font-weight:bold; font-size:12px}
   #navse li{cursor:pointer; float:left; margin:0 padding:0; height:30px; display:inline}
   #navse ul li{float:left; list-style:none}
   #navse ul li a, #navse ul li a:visited{background:#FFFFFF url() no-repeat right;border:0px solid #fff; margin:0 1px 0 0; float:left; padding:4px 12px; text-transform:normal; color:#000000; font-weight:bold; font-size:12px; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
   #navse ul li a:hover{color:#000000;border:0px solid #FFFFFF;background:none;}
   #navse ul li a.current, #navse ul li a.current:visited, #navse ul li a.current:hover{background:none; color:#000000; border:0px solid #FFFFFF }
   src-m{border:1px solid #999; height:18px; width:180px; padding-top:0px; background:#f6f4f4; }
   #src-m input{border:0; background:none; color:#777}
   #s-m{font-size:12px; width:180px; padding-left:4px; margin:0; background:none}
   #tsrc-m #src-m{margin-top:0px;background-color:#FFFFFF;border:1px solid #dedede; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px}
   #tsrc-m #s-m{width:155px}
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='navse-element'>
   <div class='widget-content'>
   <div id='navse'>
   <div id='navse-left'>
   <ul>
   <li><a class='current' href='/' title='home'>Home</a></li>
   <li><a href='link'>Menu 1</a></li>
   <li><a href='link'>Menu 2</a></li>
   <li><a href='link'>Menu 3</a></li>
   <li><a href='link'>Menu 4</a></li>
   <li><a href='link'>Menu 5</a></li>
   </ul>
   <script language='javascript'>setPage()</script>
   </div>
   <div id='navse-right'>
   <div id='tsrc-m'>
   <div id='src-m'>
   <form action='/search' id='searchform' method='get' name='searchform'>
   <input class='keyword' id='s-m' name='q' onblur='if (this.value == "") {this.value = "Cari artikel..";}' onfocus='if (this.value == "Cari artikel..") {this.value = ""}' type='text' value='Cari artikel..'/>
   <input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAs2y9FZsohfp4jYJFJVmnslAmPeYzvm2CaSjSwt3nsfR9Xd1Jy0hLhGoWHykL-U-XkF1KBCw7VG5Ohf8Mx0oHb4kV1Sj_4URfSp43im3D8LkYB7BLPTz3R-bhVzJGotbMyyyp3USHO7U/s200/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>
   </form>
   </div>
   </div>
   </div>
   </div>
   </div>
   </div>
6. Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog search engine.
7. Simpan Template

Semoga bermanfaat dan bisa diterapkan dalam blog anda setelah membaca artikel ini, Cara Membuat Menu Horizontal Blog Search Engine

Cara Membuat Menu Horizontal Blog Drop Down adalah cara berbeda dalam menampilkan menu-menu yang ada didalam blog yang akan menghemat ruang serta mengelompokkan setiap kategori dari sub menu halaman yang memiliki keterkaitan dengan menu utama dalam blog tersebut. Membuat menu horizontal drop down tidak sama dengan menu horizontal sebelumnya yang telah saya ulas sebelumnya. Pada menu horizontal ini akan memiliki sub menu yang komplek dan tidak autonom seperti menu horizontal sebelumnya karena ia memiliki sub menu yang berkaitan dengan menu utama seperti yang terlihat pada gambar berikut ini



Berikut Cara Membuat Menu Horizontal Blog Drop Down

1. Masuk ke akun blogger anda
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>
   #navdropdownsearchengine { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; }
   #navdropdownseleft { width: 400px; float: left; margin: 0; padding: 0; }
   #navdropdownse { margin: 0; padding: 0; }
   #navdropdownse ul { float: left; list-style: none; margin: 0; padding: 0; }
   #navdropdownse li { list-style: none; margin: 0; padding: 0; }
   #navdropdownse li a, #navdropdownse li a:link, #navdropdownse li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; }
   #navdropdownse li a:hover, #navdropdownse li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; }
   #navdropdownse li li a, #navdropdownse li li a:link, #navdropdownse li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; }
   #navdropdownse li li a:hover, #navdropdownse li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; }
   #navdropdownse li { float: left; padding: 0; }
   #navdropdownse li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
   #navdropdownse li ul a { width: 140px; }
   #navdropdownse li ul ul { margin: -32px 0 0 171px; }
   #navdropdownse li:hover ul ul, #navdropdownse li:hover ul ul ul, #navdropdownse li.sfhover ul ul, #navdropdownse li.sfhover ul ul ul { left: -999em; }
   #navdropdownse li:hover ul, #navdropdownse li li:hover ul, #navdropdownse li li li:hover ul, #navdropdownse li.sfhover ul, #navdropdownse li li.sfhover ul, #navdropdownse li li li.sfhover ul { left: auto; }
   #navdropdownse li:hover, #navdropdownse li.sfhover { position: static; }
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 class='menuhorisontal'>
   <ul id='navdropdownse'>
   <li><a href='#'>Menu DropDown</a></li>
   <li><a href='#'>Menu DropDown A</a>
   <ul>
   <li><a href='#'>Menu DropDown Sub A1</a></li>
   <li><a href='#'>Menu DropDown Sub A2</a></li>
   <li><a href='#'>Menu DropDown Sub A3</a></li></ul></li>
   
   <li><a href='#'>Menu DropDown B</a> </li>
   <li><a href='#'>Menu DropDown C</a> </li>
   
   <li><a href='#'>Menu DropDown D</a>
   <ul>
   <li><a href='#'>Menu DropDown Sub D1</a></li>
   <li><a href='#'>Menu DropDown Sub D2</a></li>
   <li><a href='#'>Menu DropDown Sub D3</a></li></ul></li>
   <li><a href='#'>Menu DropDown E</a> </li>
   </ul>
   </div>
6. Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog drop down
7. Simpan Template

Semoga bermanfaat dan bisa diterapkan dalam blog anda setelah membaca artikel ini, Cara Membuat Menu Horizontal Blog Drop Down

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



Berikut Cara Membuat Menu Horizontal Blog Tab Warna Plus

1. Masuk ke akun blogger anda
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>
   #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;}
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='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>
6. Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog tab warna plus
7. Simpan Template

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

Cara Membuat Menu Horizontal Blog Tab Warna Berbeda 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 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 anda karena tidak ada gambar yang terpasang dalam kode menu horizontal tab warna berbeda tersebut.



Apakah anda 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 anda
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 anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal tab warna berbeda
7. Simpan Template

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