Bagaimana Cara Menambah Submenu di Blogspot?

Urusan mempercantik blog agar terlihat menarik memang merupakan salah satu kesibukan para blogger. Ada saja usaha-usaha yang dilakukan agar blog tidak terlihat terlalu sederhana atau miskin 'make up'.

Salah satu cara menambah daya tarik blog agar terlihat kaya adalah dengan menambahkan menu dan submenu. Di Blogger sendiri sebenarnya ada fasilitas Pages yang bisa anda tambahkan di Layout dengan cara klik Add a Gadget kemudian pilih Pages sehingga urusan menampilkan menu tak ada masalah. Hanya ketika hendak menambah sub menu timbul kesulitan karena memang tak ada fasilitas untuk itu.

Jika anda bermaksud menambahkan sub menu pada menu yang sudah ada, lakukan saja langkah berikut ini:

1. Copy seluruh kode berikut 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, &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://smppgrijatinangor.blogspot.com/'>Beranda</a></li>
<li><a href='#'>Profil</a>
<ul id='sub-custom-nav'>
<li><a href='http://smppgrijatinangor.blogspot.com/p/profil.html'>Profil Sekolah</a></li>
<li><a href='http://smppgrijatinangor.blogspot.com/p/pengurus.html'>Pengurus</a></li>
<li><a href='http://smppgrijatinangor.blogspot.com/p/guru.html'>Guru-guru</a></li>
</ul>
</li>
<li><a href='#'>Kurikulum</a>
<ul id='sub-custom-nav'>

<li><a href='http://smppgrijatinangor.blogspot.com/p/kalender-pendidikan.html'>Kalender Pendidikan</a></li>

<li><a href='http://smppgrijatinangor.blogspot.com/p/agenda-kegiatan.html'>Agenda Kegiatan</a></li>
</ul>
</li>
<li><a href='http://smppgrijatinangor.blogspot.com/p/ekskul.html'>Ekskul</a></li>
<li><a href='#'>Unduhan</a>
<ul id='sub-custom-nav'>
<li><a href='http://smppgrijatinangor.blogspot.com/p/rpp-silabus.html'>Rpp dan Silabus</a></li>
<li><a href='http://smppgrijatinangor.blogspot.com/p/software.html'>Software</a></li>
<li><a href='http://smppgrijatinangor.blogspot.com/p/ebook.html'>E-book</a></li>
</ul>
</li>
<li><a href='http://smppgrijatinangor.blogspot.com/p/admin.html'>Admin</a></li>
</ul>
</div>

Catatan: ubah semua tulisan yang berwarna biru dengan nama blog dan link untuk halaman (page) anda.

2. Login ke Blogger kemudian di Dashboard anda klik Template, klik Edit HTML, klik Proceed (Lanjutkan). 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 dan huruf F lalu tuliskan </header> pada kotak yang muncul.

3. Setelah anda paste kode tadi, klik Save template. Selesai! Lihat apakah menu dan submenu seperti yang anda inginkan muncul atau tidak. Pasti muncul dua menu, yaitu menu yang anda buat dengan Add a Gadget Pages dan menu yang anda buat dengan kode di atas. Untuk itu anda perlu kembali ke Dashboard, klik Layout (Tata Letak) kemudian klik edit pada gadget Pages kemudian  klik Remove (Hapus). Tapi ingat halaman-halaman yang anda buat yang terdapat di Laman jangan dihapus.

Sebagai perbandingan bagaimana hasil dari menu dan submenu dengan menggunakan kode di atas, silakan lihat blog ini: SMP PGRI 1 Jatinangor

Selamat mencoba!