Full Akses: Cara Membuat Menu Horizontal Drop Down Super Keren

Cara Membuat menu horizontal dropdown keren diblog - Tentunya suatu kebutuhan buat kita selaku pemilik website atau blog dalam memperindah tampilan blog, termasuk memperindah tampilan menu yang biasa dipakai yaitu menu horizontal, dan seperti biasa dalam sebuah blog berplatform blogger kita harus membuat satu widget html/javascript untuk menaruh kode menu horizontal nantinya biasanya widget disekitar header baik atas maupun bawah

Artikel Terkait :

1. Login akun blogger
2. Klik tab Template
3. Cari kode ]]></b:skin> untuk memudahkan tekan tombol F3
4. Setelah ketemu letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

/* MENU NAVIGASI */
#menunav{ 
height:38px;
width:904px;
position:relative;
background-color:#393939;
box-shadow:0 2px 6px 0 #ccc;-moz-box-shadow:0 2px 6px 0 #ccc;margin:0 auto 0;padding:0 18px 0 18px;
border-bottom:3px solid #77BE32;}

#menunav li{
position:relative;
line-height:38px;
float:left;list-style:none;display:inline-block;
padding:0 0 0 0;margin:0 0 0 0;}

#menunav li a{
padding:0 18px;color:#eee;display:block;font-family:'Oswald',Arial,Helvetica,sans-serif;
font-size:14px;
font-weight:500;
text-align:left;
text-shadow:1px 1px 0 #222;}

#menunav li a.home{
background-position:16px -54px;width:46px;padding:0 0;background-color:#77BE32;
text-indent:-9999px;overflow:hidden;}

#menunav li a{
border-left:1px solid #222;
border-right:1px solid #444;}

#menunav li:hover a{
background-color:#77BE32;color:#fff;}

#menunav li .sub-nav-wrapper{
display:block;position:absolute;
z-index:30;margin-left:0px;}

#menunav li .sub-nav-wrapper .sub-nav{width:150px;
margin:4px 0 0 0;
padding:0 0 0 0;background:#fff;
border-top:1px solid #fff;
box-shadow:0 1px 2px rgba(0,0,0,0.35);}

#menunav li:hover .sub-nav-wrapper{
display:block;}

#menunav li .sub-nav-wrapper .sub-nav li{list-style:none;
float:none !important;line-height:26px;
display:block;
margin:0 0 0 0;
padding:0;
text-align:left;
border-bottom:1px solid #d7d7d7;}

#menunav li .sub-nav-wrapper .sub-nav li:first-child{}
#menunav li .sub-nav-wrapper .sub-nav li:last-child{border:none;}
#menunav li .sub-nav-wrapper .sub-nav li a{
border:none !important;
background:transparent !important;display:block;padding:0 20px;
font-size:12px;
font-weight:small;
color:#4b4b4b !important;
text-shadow:none;
box-shadow:inset 0 0 2px rgba(255,255,255,1.0);
-moz-box-shadow:inset 0 0 2px rgba(255,255,255,1.0);
-webkit-box-shadow:inset 0 0 2px rgba(255,255,255,1.0);}

#menunav li .sub-nav-wrapper .sub-nav li:hover{
background:#eaeaea;
border-bottom:1px solid #ccc;}

#menunav li .sub-nav-wrapper{
pointer-events:none;
opacity:0;filter:alpha(opacity=0);
top:0;transition:all 0.35s ease-in-out;
-moz-transition:all 0.35s ease-in-out;
-webkit-transition:all 0.35s ease-in-out;}

#menunav li:hover .sub-nav-wrapper{
pointer-events:auto;opacity:1;
filter:alpha(opacity=100);top:30px;}

5. Simpan Template

6. Kembali ke dashboard blogger sobat lalu klik tab Tata Letak
7. Nah, setelah sobat membuat 1 widget dibawah atau atas header seperti saran saya, ciptakan 1 gadget HTML/Javascript
8. Setelah itu masukkan kode dibawah ini tepat di kolom html/javascript

<nav>
<ul id='menunav'>
<li class='current'>
<a class='home' href='/'>Home</a>
</li>
<li>
<a href='link / label'>Teknologi</a>
<div class='sub-nav-wrapper'><ul class='sub-nav'>
<li><a href='link / label'>Gadget</a></li>
<li><a href='link / label'>Intarnet</a></li>
<li><a href='link / label'>Internet</a></li>
</ul></div>
</li>
<li>
<a href='link / label'>Olahraga</a>
<div class='sub-nav-wrapper'><ul class='sub-nav'>
<li><a href='link / label'>Sepakbola</a></li>
</ul></div>
</li>
<li>
<a href='link / label'>Entertainment</a>
<div class='sub-nav-wrapper'><ul class='sub-nav'>
<li><a href='link / label'>Kata Bijak</a></li>
<li><a href='link / label'>Sosial Media</a></li>
<li><a href='link / label'>Travel</a></li>
</ul></div>
</li>
<li>
<a href='link / label'>Umum</a>
<div class='sub-nav-wrapper'><ul class='sub-nav'>
<li><a href='link / label'>Edukasi</a></li>
<li><a href='link / label'>Sejarah</a></li>
<li><a href='link / label'>Sains</a></li>
<li><a href='link / label'>Properti</a></li>
</ul></div>
</li>
<li>
<a href='link / label'>Unik Aneh</a>
</li>
</ul>
</nav>

Perhatian :
Teks berwarna merah ganti dengan link artikel atau link label
Teks berwarna biru ganti dengan judul link yang dituju

9. Klik Simpan

Full Akses

Translate

Rabu, 25 Desember 2013

Cara Membuat Menu Horizontal Drop Down Super Keren

Artikel Terkait :

Artikel Terkait :

Artikel Terkait