Cara Membuat Menu Header Keren dan Responsive

Sesuai dengan gambar diatas. Kali ini saya akan mempostingkan, bagaimana cara membuat Menu Header. Menu ini sangat penting, agar pengunjung bisa melihat kategori apa saja yang ada didalem blog anda. Menu diatas adalah menu yang saya pakai, jika anda ingin memakainya tidak masalah. Langsung saja kita praktekan..

Baca Juga : Cara Membuat Menu Header Seperti EvoMagz

Cara Pertama :

1. Buka Blogger - Login.
2. Dashboard - Template.
3. Edit HTML.
4. Temukan kode ]]></b:skin>
5. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> 
 

#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menu li:hover > a,#menu li a:hover{background:#111}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.home {background: #c00;}
#menu a.prett{padding:0 27px 0 14px}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#333;}

6. Cari ( CTRL + F ) Kode </header>
7. Copy & Paste kode berikut ini, dan letakkan diatas kode </header> 

<style type='text/css'> /*CSS MENU*/ #menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menu li:hover &gt; a,#menu li a:hover{background:#111}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center} #menu label span{font-size:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.home {background: #c00;}
#menu a.sub{padding:0 27px 0 14px}
#menu a.sub::after{content:&quot;&quot;;width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#333;}
</style>

<!-- Mulai Area Menu -->
<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;Navigation</label>
<ul>
<li><a class='home' href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Daftar Isi</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Login Admin</a></li>
<!-- Mulai Area Menu Dropdown -->
<li><a class='sub' href='#'>More</a> <ul class='menus'>
<li><a href='#' title='Kode Warna HTML'>Menus 1</a></li>
<li><a href='#'>Page Protected</a></li>
<li><a href='#'>Menus2</a></li>
<li><a href='#'>Menus 3</a></li>
<li><a href='#' target='_blank'>Menus 4</a></li>
<li><a href='#'>Menus 5</a></li>
</ul>
</li>
<!-- Area Dropdown Selesai--> </ul>
</nav>
<!-- Area Menu Selesai-->

8. Simpan Template!

Bagaimana mudah bukan? Silakan ganti tulisan yang berwarna merah dengan menu yang ada di blog anda.
Sekian dari saya, Semoga Bermanfaat!

Share this post

Related Post