Membuat Menu Horizontal Navigasi Responsive Keren

Membuat Menu Horizontal Navigasi Responsive Keren - Membuat Menu Horizontal Navigasi Setelah Posting Sbelumnya Membuat Gambar Header Blog Berputar . 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.

Demonya

 Langkahnya Ikuti Seperti Dibawah Ini...

•         Login Blogger
•         Klik Template
•         Edit HTML
•         Tekan CTRL+F
•         Cari Kode   ]]></b:skin>
•         Jika Sudah Ketemu Pastekan  CSS Dibawah Ini Tepat Diatasnya.

/* Membuat Menu Horizontal Navigasi Responsive Keren Ridwan-hex.blogspot.com */

#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/AVvXsEi7GKLyA3gfERzrgDmgT9ER2r5MWZDLfquXNdUOHpsXkoR9ExgRkhOL7N-hxXgBz-9VpszYvnxjoZmL2kxOiSE532Y-yAVN7EFPoe7fsuzP51C0xQ4dfoxtaqCvbxHZevWn_nloo2wbkNsC/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='header-inner'>
•     Kalau Tidak Ketemu Cari Kode Yang Sejenis, Karena Setiap Template Berbeda-Beda
•     Copy Kode Dibawah Lalu Paste Dibawah Kode <div id='header-inner'>

<!-- Menu Navigasi Ridwan-hex.blogspot Start -->
<ul id='menus'>
<li class='current_page_item'><a class='home' href='#' title='Home'></a></li>
<li><a href='#' title='Menu 1'>Menu 1</a></li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
<li><a href='#' title='Menu 3'>Menu 3</a></li>
<li><a href='#' title='Menu 4'>Menu 4</a></li>
<li><a href='#' title='Menu 5'>Menu 5</a></li>
<li><a href='#' title='Menu 6'>Menu 6</a></li>
</ul>
<!-- Menu Navigasi Ridwan-hex.blogspot End -->

     Keterangan :

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

Bila Perlu edit Lagi aja Oleh Sobat Semua Script Diatas Sesuaikan Dengan Blog Sobat.

Sekian Artikel tentang  Membuat Menu Horizontal Navigasi Responsive Keren  Smoga Bermanfaat