Cara Memasang Menu Navigasi Horisontal

Pada tutorial yang lalu, saya pernah berbagi cara membuat menu dari label disini. Sebenarnya fungsinya sama, yaitu untuk mengelompokkan postingan berdasarkan label yang Anda buat. Nah, hari ini saya akan berbagi cara memasang menu navigasi horizontal di blog seperti ini:

 tapi tanpa perlu mengedit template Anda karena kode ini dapat dipasang melalui gadget blog Anda. Berikut ini caranya:

1. Log in ke www.blogger.com

2. Klik Tata Letak

3. Klik Tambah Gadget

4. Klik HTML/ Java Script

5. Copy dan Paste (Ctrl+C→Ctrl+V)kode dibawah ini ke dalam kotak HTML

<style> #tabs11 img { border: none; } #tabs11 { float:left; width:965px;margin-left:-30px; background:#7C3200; font: bold 8.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE;margin-top:-29px;margin-bottom:6px } #tabs11 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs11 li { display:inline; margin:0; padding:10; } #tabs11 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRF_8vC91MgxFyjdQivD6XaICJYT6ZNWEU_giFJmd35-MzLDXWC8xDegVsdZ4_P2yv0bP05dX6cBZ2dTckNUfiFG7Bc6aRiPzRG6ry663GSzecqImRBljxgFnThx6B0b7nftMnwrsoQ-0/s1600/tableft11.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs11 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwLZcd9SjRAITaPwdgIaoOFlXBTXBNipOnOTsVqprC0mqYUTGlpr3r_zofrpW7IAYQJLq5bGwqgD7esPGnd5NEJwQs9LwlOqcPZR9H8kM73GGhObowgxkf6I7MHQhUeBZz0sXHOJTInvk/s1600/tabright11.png) no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs11 a span {float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; } #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span { background-position:100% -42px; } #tabs11 #current a { background-position:0% -42px; } #tabs11 #current a span { background-position:100% -42px; } </style> <div id="tabs11"> <ul> <li><a href=" URL BLOG ANDA/"><span>HOME</span></a></li> <li><a href=" # "><span>LINK1</span></a></li> <li><a href=" # "><span>LINK2</span></a></li> <li><a href=" # "><span>LINK3</span></a></li> <li><a href=" # "><span> LINK4</span></a></li> <li><a href=" # "><span>LINK5</span></a></li> <li><a href=" # " ><span> LINK6</span></a></li><li><a href=" # "><span> LINK7</span></a></li></ul> </div>

6. Perhatikan kode berikut ini :

<li><a href="#" ><span>LINK n</span></a></li>

Keterangan : 

- Ganti tulisan warna merah dengan alamat URL Blog Anda.

- Ganti kode (#) dengan link halaman blog Anda, misalnya   http://moocensusan.blogspot.com/2013/07/daftar-isi.html

- Ganti tulisan Link n dengan judul menu link Anda, misalnya Daftar Isi, Artikel, Tutorial, Cerpen, dll.

- Anda juga dapat mengubah warna background sesuai selera Anda disini.

7. Seret Gadget tadi hingga letaknya berada tepat dibawah header blog Anda → Simpan → Lihat Blog Anda