Seperti judulnya disini saya akan memberikan cara membuat navigasi di atas header yang responsive. Menu navigasi yang mudah dan sederhana. Memang mungkin beberapa orang tidak menyukainya, tapi saya pribadi menyukai tampilan ini.
Untuk langkah-langkah pembuatan menu navigasi ini silahkan ikuti tutorial berikut:
Langkah pertama, login ke Blogger sobat.
Langkah kedua, masuk ke menu Tema dan Edit HTML.
Langkah ketiga, salin kode dibawah dan simpan css tersebut tepat diatas kode ]]></b:skin> atau </style>.
/* Navigation Menu */
.central{max-width:950px;margin:0 auto}
#menu{background: #fff;overflow: hidden; border-bottom: 3px solid #3498DB}
#menu .menu{float: left;margin: 0;padding: 0;}
#menu .menu .current-menu-item a{color:#000}
#menu .menu li{list-style: none;margin: 0;float: left;}
#menu .menu li a{float:left;position:relative;color:#000;padding:0 15px;font-size:14px;line-height:45px;font-family:'Open Sans',sans-serif;}
#menu .menu li a:hover{text-decoration:none;color:#fff;background:#3498DB}
.menubawah{height:40px;line-height:40px;background:#444;color:#eee;padding:0 15px;font-family:'Open Sans',sans-serif;font-size:12px}
.search{float:right;}
#search {padding: 6px;}
input.search_input{border: 1px solid #eeeeee;width: 200px;color: #383838;border-radius: 4px;padding: 9px 10px;background: #eeeeee;}
/* Responsive */
@media screen and (max-width:640px) {
#outer-wrapper{width:98%;margin:0 auto;padding:10px;}
#main-wrapper{float:none;width:100%;margin:0 auto;padding:0;}
#sidebar-wrapper{width: auto;float:none;display:block;margin:0 auto;padding:0;}
#content-wrapper{margin: 0 auto;}
#header-inner{text-align:center}
#header1{float:none;text-align:center;max-width:100%}
.sidebar-kiri,#header2,#rdp-wrap{display:none}
#menu,.post-inner .main.section{float:none;width:100%;}
#menu .menu{float:none;border-left:0;border-right:0}
#menu .menu li{float:left;width:50%;border-right:0;border-left:0}
#menu .menu li a{display:block;float: none;color:#000;text-align:center;padding:0}
.search{float:none;width:auto;margin:0 auto;}
.search #form #s{border-left:0;border-right:0}
input.search_input{border:1px solid #eeeeee;width:99%;color:#383838;border-radius:0;padding:5px 10px}Langkah terakhir, salin kode html dibawah ini dan simpan tepat di bawah kode <body>
<div id='menu'>
<div class='central'>
<ul class='menu' id='menu-menu'>
<li class='current-menu-item' id='menu-item-0' itemprop='url'><a href='/' itemprop='name' title='Home'>Home</a></li>
<li class='menu1' id='menu-item-1' itemprop='url'><a href='LINK SOBAT' itemprop='name' title='About'>JUDUL</a></li>
<li class='menu1' id='menu-item-1' itemprop='url'><a href='LINK SOBAT' itemprop='name' title='JUDUL'>JUDUL</a></li>
<li class='menu2' id='menu-item-2' itemprop='url'><a href='LINK SOBAT' itemprop='name' title='JUDUL'>JUDUL</a></li>
<li class='menu3' id='menu-item-3' itemprop='url'><a href='LINK SOBAT' itemprop='name' title='JUDUL'>JUDUL</a></li>
<li class='menu5' id='menu-item-5' itemprop='url'><a href='LINK SOBAT' itemprop='name' title='JUDUL'>JUDUL</a></li>
</ul>
</div>
</div>Simpan dan lihat hasilnya.
Untuk demo kamu bisa lihat di navigasi yang saya gunakan di atas header, saya juga menggunakan kode diatas, saya lebih suka seperti itu karena lebih mudah di cari dari pada menyimpan link-link penting di bawah.
Oh iya mungkin ada beberapa template yang membuat menu ini berantakan, tapi saya menggunakan template SeoFastBlogger ini pas sekali dan terlihat lebih baik.
Sekian tutorial Membuat Menu Navigasi Sederhana Responsive di Blog, jika kamu kesulitan atau ada yang ingin ditanyakan silahkan berkomentar disini.
Comments
Post a Comment