Sebelum nya saya telah menulis tentang bagai mana cara membuat menu horisontal namun banyak pertanyaan "Bagai mana si cara membuat menu beserta sub menu nya??? begitu" ya saya coba kembali nulis" namun sekarang cara nya bukan seperti yang pertama" namun kita harus jeli dalam mengedit kode HTML
OK! deh tanpa basa bbasi ya kita mulai saja cara nya sebagai berikut: bagi para master dah biasa tapi klo buat aku yang masih newbie hehhe ... lumayan rumit dan hrs jeli"
sebagai berikut:
OK! deh tanpa basa bbasi ya kita mulai saja cara nya sebagai berikut: bagi para master dah biasa tapi klo buat aku yang masih newbie hehhe ... lumayan rumit dan hrs jeli"
sebagai berikut:
- pertama yang pasti kita harus login dulu ke akun blog kita sesujdah login cari rancangan (klik rancangan)
- lalu klik Klik menu / tulisan Template
- lanjutkan dengan Klik menu Edit HTML
- Klik tulisan / menu Lanjutkan
- Beri centang pada Expand Template Widget
- lalu cari kode sebagai berikut:
- Cari kode :
<div class='main-outer'> atau
Setelah kode tersebut sudah ditemukan silahkan pasang kode berikut di bawah ini tepat di atasnya *( kode dibawah ini sudah di edit oleh kamu)
<div id='main-wrapper'> atau
<div id='main'> Cara Mudah + Cepat Mencari Kode Html di Blogger tekan f3 di keybord anda
- <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='#'>Home</a></li>
<li><a href='#'>Menu + Sub Menu</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a></li>
</ul>
</li>
<li><a href='#'>Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub 7</a></li>
<li><a href='#'>Sub 8</a></li>
<li><a href='#'>Sub 9</a></li>
<li><a href='#'>Sub d</a></li>
<li><a href='#'>Sub e</a></li>
<li><a href='#'>Sub f</a></li>
</ul>
</li>
</ul>
</div> - Silakan ganti tanda PAGAR (#) dengan link/url yang kamu yang akan di pajang, boleh link posting atau link Label (Kategori)terserah kamu yang suka
Sub Menu dan Sub adalah sub menu dari menu (Menu + Sub Menu dan Menu + Sub), silakan ganti nama masing-masing menu sesuai judul link yang kamu pasang
- Cari kode :
Tidak ada komentar:
Posting Komentar
Terima kasih atas komentar anda salam sahabat!!! Rudi thea