Jumat, 25 Oktober 2013

Cara membuat menu dropdown pada blogspot


Pada postingan kali ini saya akan membahas tentang menu dropdown, menu dropdown adalah menu yang memiliki sub sub menu sehingga memudahkan pengunjung dalam mencari isi artikel anda,
cara membuatnya cukup mudah,ada dua cara dalam membuat menu dropdown yaitu memlalui template dan melalui widget/sidebar. namun kali ini saya akan membahas memnuat menu dropdown melalui widget









Berikut langkah"nya


1.Masuk ke nlogger anda

2.Pilih tataletak

3.Klik tambah gadget

4.Pilih hatml/ javascript

5. copy code dibawah ini

<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='url anda'>Home</a></li>
<li><a href='url anda'>Menu 1</a></li>
<li><a href='url anda'>Menu + Sub Menu</a>
<ul id='sub-custom-nav'>
<li><a href='url anda'>Sub Menu 1</a></li>
<li><a href='url anda'>Sub Menu 2</a></li>
<li><a href='url anda'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='url anda'>Menu</a></li>
<li><a href='url anda'>Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a href='url anda'>Sub 1</a></li>
<li><a href='url anda'>Sub 2</a></li>
<li><a href='url anda'>Sub 3</a></li>
<li><a href='url anda'>Sub 4</a></li>
<li><a href='url anda'>Sub 5</a></li>
<li><a href='url anda'>Sub 6</a></li>
</ul>
</li>
<li><a href='url anda'>Menu</a></li>


6.Ganti tulisan yang berwarna biru dengan url kategori/sub kategori anda,
7.Ganti tulisan yang berwarna hijau dengan judul kategori menu anda,
8.Ganti tulisan yang berwarna ungu dengan sub kategori anda.

klik simpan dan lihat apa yang terjadi,

sekian dulu postingan dari saya apabila ada kesalahan dalam penulisan mohon dimaklumi.
semoga bermanfaat untuk anda.

Author : oni septian // 09.07
Kategori:

1 komentar:



  1. Saya sangat berterimakasih banyak kepada
    AKI MANGKUBONO yg sudah membantu saya sekeluarga,karna sekaran ini saya sudah punya usaha dan bisa melunasi semua hutang2 saya bakhan saya juga sudah bisa membahagiakan kedua orang tua saya bersama istri saya. itu semua atas bantuan AKI yang memberikan angkanya yaitu 1909 , sudah banyak paranormal yg saya hubungi tapi tdk pernah membuahkan hasil sehingga saya mencoba mengikuti nomor ritual AKI MANGKUBONO dan alhamdulillah berhasil dan bagi anda yg ingin seperti saya silahkan HBG
    085203333887 AKI MANGKUBONO jangan percaya sama nomor ritual paranormal yg lain,nomor ritual AKI MANGKUBONO meman selalu tepat dan terbukti. atau SILAHKAN ANDA BUKTIKAN SENDIRI.




    BalasHapus

tinggalkan komentar anda demi kemajuan blog saya