Cara Membuat menu horizontal dropdown keren diblog

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, nah bagi sobat yang belum punya widget dibawah header terpaksa harus membuat widget tersebut caranya baca artikel cara menambahkan widget dibawah header di blogspot sekarang juga, setelah itu lakukan cara berikut untuk menciptakan menu horizontal.

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

<!-- navigation start -->
<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

Oke sampai tahap ini, proses pembuatan menu horizontal berhasil dan selesai, dan sekarang tinggal dicek saja halaman website atau blog yang sobat kolola....

Penting : Terima kasih teman telah bersedia membaca postingan disini, dan saya sangat berharap dukungan kontes seo yg saya jalani seperti 828BET.COM AGEN BOLA TERPERCAYA PIALA DUNIA 2014 dan MutiaraBijak.com Kata Kata Mutiara dan Kata Kata Bijak Cinta caranya cukup klik link diatas, thanks.

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.