Cara Membuat Menu Navigasi Horizontal di Blog

Jauh sebelum Tutorial ini dibuat dapur Tutorial Blogspot Juga sudah pernah Postinga Tutorial Tehnik Membuat Menu Dropdown Horizontal Plus Search Enggine Blog. Menu Navigasi Horizontal yang akan kita buat adalah Menu Navigasi Horizontal seperti berikut :

DEMO

Buat Pemula mungkin akan kebingungan bagaimana caranya untuk memasang ke halaman blog, namun Sekarang sobat tidak perlu bingung lagi karena Master chef akan berikan resepnya sebagai berikut :

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/AVvXsEh48e2kg3DReJV3NQxYA9yFxdc8grr8mxoJxZFEFTvpmZyoGVATk76K9mxQKbckNd42BOO4ylPWYL-KZjbpTs3Am_I8xSWIS9A_5l7WFghXWLtT22ggZOJAROqKNANF7WoY9dC2F9qUnpys/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)
9. 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='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
<li><a href='#'>Menu 6</a></li>
<li><a href='#'>Menu 7</a></li>
<li><a href='#'>Menu 8</a></li>
<li><a href='#'>Menu 9</a></li>
<li><a href='#'>Menu 10</a></li>
</ul>
</div>
</div>

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

Nah itu itu dia resep Cara Membuat Menu Navigasi Horizontal di Blog. mungkin sekian dulu tutorial kali ini semoga bisa bermanfaat. dan jangan lupa nantikan tutorial-tutorial lainnya di Dapur Tutorial Blogspot.

 

sumber:http://malikkomputer.blogspot.com/2013/01/cara-membuat-menu-navigasi-horizontal.html