Membuat Menu Horizontal di Blog

Menuat  Menu Navigasi Horizontal seperti berikut :

Untku membuatnya, begini caranya :

1. Silahkan login kehalaman blogger masing-masik
2. Pada bagaian Dashboard Pilih Template
3. Kemudian Klik Tombol Edit HTML
4. Klik lagi pada Tombol Proses atau Lanjutkan
5. Sekarang Anda sudah berada di area Edit HTML
6. Supaya tidak berakibat fatal saat Edit HTML Sebaiknya anda Mengamankan template anda terlebih dahulu. Lebih Lanjut Baca Tutorial Cara Upload dan Back-Up Template pada Tampilan Baru Blogspot
7. Apabila Template sudah aman Cari kode ]]></b:skin> (Gunakan Tombol CTRL + F dan F3 untuk mempermudah pencarian kode
8. Copy kode berikut dan letakan diatas kode ]]></b:skin> 

.menupic2{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnN-yps2Dz0e0vll5DjOB7wQxjtw19zgjxHNt21ThbXN_X6wTvMc8dhtznaWrG1FLG1fz6oYFcOW6u23Mf9N-3pPTz7qMgKltl1spuye_3ue9lu8azrq71ly0_LuG1oLhytNr6fgokh35L/s1600/menu-orange.jpg) repeat-x bottom left;width:980px;margin:0 auto;padding:0 auto;border-left:1px solid $bordercolor;border-right:1px solid $bordercolor;}
.menuhorisontal2 {width:980px;height:24px;margin:0 auto; padding:5px 0px;border-bottom:solid 1px #fff;}
.menuhorisontal2 ul{margin: 0; padding-left:7px;color:#666;text-transform: capitalize;list-style-type: none;font:normal 12px Arial, Helvetica,Verdana,sans-serif;}
.menuhorisontal2 li{display: inline; margin: 0;}
.menuhorisontal2 li a{float: left;display: block;text-decoration:none;
padding: 5px 6px 4px 6px;border-right:0px solid #415770;font-weight:bold;color: #fff}
.menuhorisontal2 li a:visited{color: #fff;}
.menuhorisontal2 li a:hover {background:#979797;border-radius:10px;-webkit-border-radius:10px;-opera-border-radius:10px;-moz-border-radius:10px;color:#222;text-decoration:none;-moz-box-shadow: inset 2px 2px 2px #404040;-webkit-box-shadow: inset 2px 2px 2px #404040;box-shadow: inset 2px 2px 2px #404040;}

Keterangan :

• Kode Warna Hijau adalah panjang Menu Horizontal (silahkan sesuaikan)
• Kode Warna Pink adalah Tinggi Menu Horizontal (silahkan sesuaikan)
8. Jika sudah sekarang cari kode berikut :

<div id='header-wrapper'>  
.............
</b:section>
    </div>

Jika tidak ketemu kode diatas Cari kode seperti ini :

<div class='header-outer'>
    ...............................
</b:section>
    </div>

10. Apabila sudah ketemu salah satu kode diatas Copy kode berikut dan letakan diatas salah satu kode pada point 9

<div class='menupic2'>
<div class='menuhorisontal2'>
<ul>
<li class='current_page_item'><a href='http://mister-complete.blogspot.com/' title='Home'>Home</a></li>
<li><a href=wardhaniresi.blogsopt.com>Naruto</a></li>
<li><a href=wardhaniresi.blogsopt.com>Korean</a></li>
<li><a href=wardhaniresi.blogsopt.com>Pendidikan</a></li>
<li><a href=wardhaniresi.blogsopt.com>Pengetahuan</a></li>
<li><a href=wardhaniresi.blogsopt.com>Tokoh</a></li>
</ul>
</div>
</div>

Keterangan :

• Kode Warna Biru Silahkan Ganti Dengan URL (sesuai keinginan)
• Kode Warna Merah Silahakah ganti sesuai yang diinginkan
10. Terakhir Klik Simpan dan lihat hasilnya