Cara Membuat Submenu Pada Blogspot

By : Arif Subroto Amd.

Sebagai seorang blogger yang masih kacangan, saya melihat para blogger yang lebih dulu memiliki sub menu di dalam bloggernya. Nah setelah googling berjam - jam akhirnya saya bisa membuat sub menu tersebuat lagi. langsung aja gak basa - basi lagi ini langkahnya :

1. Login ke Blogger 
2. Kemudian di Dashboard anda klik Template 
3. Klik Edit HTML
4. Muncul jendela koding html template
5. Copy kan listing di bawah ini di bawah </header>

Copykan listing dibawah

<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, &quot;Times New Roman&quot;, 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: -960em; 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:-960em; }

#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:80%;margin:0 auto;}

</style>

<div id='cat-nav'>

<ul class='fl' id='secnav'>

<li><a href='http://arifdavidavicena.blogspot.com/'>Semua</a></li>

<li><a href='#'>Detektor Uang</a>

<ul id='sub-custom-nav'>

<li><a href='http://www.arifdavidavicena.blogspot.com/2012_10_01_archive.html'>Detektor Uang Portable</a></li>

<li><a href='http://www.arifdavidavicena.blogspot.com/2013/03/cara-mendeteksi-uang-palsu-dengan-lampu.html'>Cara Deteksi Uang</a></li>

</ul>

</li>

<li><a href='#'>Visual Basic</a>

<ul id='sub-custom-nav'>

<li><a href='http://www.arifdavidavicena.blogspot.com/2013/03/normal-0-false-false-false-en-us-x-none_9.html'>Aplikasi Mengenal Komputer</a></li>

<li><a href='http://www.arifdavidavicena.blogspot.com/2013/01/membuat-aplikasi-database-paling.html'>Database Sederhana</a></li>

</ul>

</li>

<li><a href='#'>Komputer</a>

<ul id='sub-custom-nav'>

<li><a href='http://www.arifdavidavicena.blogspot.com/2013/03/cara-merakit-komputer-dengan-komponen.html'>Rakit Komputer</a></li>

<li><a href='http://www.arifdavidavicena.blogspot.com/2013/02/simulatorrangkaian-digital-yang-ringan.html'>Rangkaian Digital</a></li>

</ul>

</li>

<li><a href='#'>Jasa</a>

<ul id='sub-custom-nav'>

<li><a href='http://www.arifdavidavicena.blogspot.com/2013/03/persyaratan-perpanjangan-stnk.html'>Stnk</a></li>

<li><a href='#'>Listrik</a></li>

</ul>

</li>

<li><a href='http://www.arifdavidavicena.blogspot.com/2013/03/normal-0-false-false-false-en-us-x-none_6.html'>Wisuda</a></li>

</ul>

</div>

Perhatikan pada listing di atas yang berwarna hijau, nah itu lah yang harus anda rubah dan ganti dengan nama dan alamat url yang anda miliki.Jika anda ingin menu dan sub menu ini berada di bawah header, maka cari </header> dan paste semua kode di atas tepat di bawahnya. Jika anda kesulitan menemukan </header>, klik mouse anda di html blog anda kemudian tekan tombol Ctrl + F lalu tuliskan </header> pada kotak yang muncul.Setelah anda paste kode tadi, klik Save templat. finish. 

Selamat mencoba, dan semoga terhibur. salam menghayal manfaat.....................................