Trik Cara Membuat Sub Menu Pada Menu Utama Blog Kita

Assalamu'alaikum sahabat logger, apa kabar hari ini..?? Pastinya sehat dong.. kalau sakit minum obat yaa..
Kali ini Admin akan memposting sebuah tutorial bagaimana sih cara kita membuat sub menu agar blog kita tertata rapi dan kelihatan cantik. Baiklah tanpa berlama-lama, berikut caranya.



Berikut ini langkah-langkah yang wajib diperbuat :

    Klik Menu Tampilan

    Pilih Menu Template kemudian pilih menu Edit HTML

    Pilih/klik menu Lanjutkan

    Pilih/klik menu Expand Template Widget

    <div class='main-outer'> atau
    <div id='main-wrapper'> alias <div id='main'>
    
    Cari scrift berikut :

Supaya lebih mudah, klik saja F3 pada keyboard kemudian pilh keliru satu scrift diatas. Berdasarkan pengalaman aku seusai membolak pulang info di www.google.com maka yang akurat merupakan :
div class='main-outer'>.
Bisa sehingga beda dengan template yang lain…
Setelah itu, copas scrift berikut akurat diatas scrift yang dicari tadi :


<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='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu2 a</a></li>
<li><a href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu3a</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='#'>Menu5</a></li>
</ul>
</div>


PENJELASAN :

•         Ganti tanda # (warna biru) dengan link/url yang kamu inginkan. Bisa sehingga link posting alias label (katagori) yang ada pada blog anda.
•             Contoh : http://pandawalimamedan.blogspot.com/search/label/Kesehatan. Maka ini menjadi link Submenu mutlak serta juga sebagai label.
•             Contoh : http://pandawalimamedan.blogspot.com/2012/08/cara-membikin-sub-menu-pada-menu-utama.html. Maka ini menjadi link isi submenu.
•         Ganti Tulisan warna biru dengan menu serta sub menu yang kamu inginkan.
•             Contoh : Kesehatan. Ini menjadi Judul Submenu
•         Setiap sub menu bisa ditambah alias ditidak lebihkan sesuai keinginan.  Seusai itu klik Pratinjau dulu untuk memastikan scrift telah betul . Kemudian simpanlah/save. Serta tutup edit HTML tersebut.

contoh videonya

 

Saran : back up dulu template kamu sebelum mengubah/meningkatkan scrift diatas, supaya bisa dikegunaaankan kembali apabila ada persoalan dengan penambahan srcritf diatas.
 
Untuk menghapus tampilan tampilan dabel dengan LamanPrimer ,
Maka ikutilah saran berikut :

•     Masuk ke Menu Laman
•     Kemudian pilih tampilan halaman dengan memilih "jangan tampilkan"
•     Simpan setelan, maka laman mutlak bakal tampil sendiri sesuai dengan scrift yang kami ketikkan tadi.
• Blog telah bisa dipublikasikan...

Nah Bagaimana, temen-temen sudah fahamkan..!! Semoga bermanfaat ya,, Salam logger