Membuat Menu Horizontal Navigasi

Membuat Menu Horizontal Navigasi - Membuat Menu Horizontal Navigasi
Baik Sobat Kali Ini Saya Mau Posting Cara Membuat Menu Horizontal Navigasi, Baiklah, Membuat Menu Horizontal Navigasi Ini Sangat Penting Untuk Blog Kenapa ? Karena Dengan Adanya Menu Horizontal Navigasi Akan Memudahkan Pengunjung Blog Untuk Mencari Sesuatu Di Blog Kita Serta Blog Kita Akan Terasa Lebih Indah Dimata Pengunjung

Demo
Berikut Tutorialnya :

• Login Blogger
• Klik Template
• Edit HTML
• Centang Expand Template Widget
• Cari Kode ]]></b:skin>
• Copy Kode Dibawah, Lalu Paste Diatas Kode ]]></b:skin>

/* Menu Navigasi By Art Preview */menus {border-bottom:1px solid ddd;border-top:1px solid ddd;border-right:1px solid ddd;border-left:1px solid ddd;height:31px;}menus li {display:inline;list-style-image:none;list-style-position:outside;list-style-type:none;}menus li a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXAGSZLnVaWLVPGZHj2co4mosxt20pMWGbLHyuP0xHSSZ23o_UJbi9x6jaB4tKmmKYrL6NZNLAFMEUOpdIYrhvB39bs_03_0KD4Rzdp1DewYeMO2vFJzNp-R1HOZxIvFLG03bQyBGS3OYX/s1600/menu.gif) no-repeat scroll 0 0;color:382E1F;display:block;float:left;font-size:12px;font-weight:normal;font-family:comic sans ms;height:31px;line-height:31px;margin-left:-10px;padding:0 20px;text-decoration:none;z-index:1;}menus li a:hover, menus li a.current {background-position:0 -31px;color:cccccc;font-weight:normal;}menus li.current_page_item a, menus li.current-cat a {background-position:0 -62px;}menus li a.home {background-position:0 -93px;margin-left:0;padding:0;text-indent:-999em;width:45px;}menus li a.home:hover {background-position:0 -124px;}menus li.current_page_item a.home {background-position:0 -155px;margin-left:-40px;}menus li a.lastmenu:hover {background-position:0 0;cursor:default;}

• Lalu Cari Kode <div id=&39;header-inner&39;>
• Kalau Tidak Ketemu Cari Kode Yang Sejenis, Karena Setiap Template Berbeda-Beda
• Copy Kode Dibawah Lalu Paste Dibawah Kode <div id=&39;header-inner&39;>

<!-- Menu Navigasi Start --><ul id=&39;menus&39;><li class=&39;current_page_item&39;><a class=&39;home&39; target="_blank" rel="nofollow" href=&39;&39; title=&39;Home&39;></a></li><li><a target="_blank" rel="nofollow" href=&39;&39; title=&39;Menu 1&39;>Menu 1</a></li><li><a target="_blank" rel="nofollow" href=&39;&39; title=&39;Menu 2&39;>Menu 2</a></li><li><a target="_blank" rel="nofollow" href=&39;&39; title=&39;Menu 3&39;>Menu 3</a></li><li><a target="_blank" rel="nofollow" href=&39;&39; title=&39;Menu 4&39;>Menu 4</a></li><li><a target="_blank" rel="nofollow" href=&39;&39; title=&39;Menu 5&39;>Menu 5</a></li><li><a target="_blank" rel="nofollow" href=&39;&39; title=&39;Menu 6&39;>Menu 6</a></li></ul><!-- Menu Navigasi End -->

• Keterangan : Kode Diatas Juga Bisa Diletakkan Di HTML/JavaScript
• Klik Pratinjau, Jika Berhasil Maka Klik Simpan Template

Sobat Bisa Mengeditnya Sendiri
Semoga Bermanfaat, Jika Dirasa Tulisan Saya Menarik Silahkan Sobat Sebar Luaskan Artikel Ini , Dan Jangan Lupa Beri Link Ini Sebagai Sumbernya