Setelah sempat saya publikasikan sebuah artikel tentang Membuat Menu di Blog Tanpa Edit HTML beberapa waktu lalu, artikel kali ini juga akan membahas tentang pembuatan menu dan submenu menarik yang melengkapi tampilan blogspot milik Anda. Mengapa tidak kita coba jika bisa menambah daya tarik pengunjung blog.
Telah kita ketahui, fungsi dari menu maupun submenu dalam blog sendiri adalah sebagai langkah mudah yang diberikan kepada pengunjung dan pemirsa blog untuk dapat menjelajah informasi yang ada di blog tersebut. Semua artikel dan laman milik Anda akan terorganisir baik dengan adanya deretan menu dan submenu yang tersusun jelas di bagian utama blog. Untuk mempersingkat waktu, langsung saja kita mulai eksperimen kali ini.
Langkah-langkah pembuatan menu dan submenu di blog
- Masuk ke akun blogger milik Anda,
- Pilih pengaturan template, lalu klik Edit HTML
- Backup semua script untuk menghindari hal yang tak diinginkan
- Jika sudah, masukkan script HTML berikut tepat di atas <div class='main-outer'> (untuk lebih mudah bisa cari dengan klik F3 dan masukkan script tersebut)
<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='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 3a</a></li>
<li><a href='#'>Sub Menu 3b</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 4a</a></li>
<li><a href='#'>Sub Menu 4b</a></li>
</ul>
</li>
<li><a href='#'>Menu 5</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 5a</a></li>
<li><a href='#'>Sub Menu 5b</a></li>
</ul>
</li>
<li><a href='#'>Menu 6</a></li>
</ul>
</div>
Penjelasan:
- Untuk memasukkan URL, ubah # dengan URL milik Anda (dapat berupa link artikel ataupun label blog)
- Untuk nama Menu dan Submenu, ganti tulisan berwarna merah dengan nama Menu yang diinginkan
- Untuk menambahkan dan megurangi menu, silahkan copas atau hapus script dengan warna hijau (1 paket menu+submenu).
- Setelah selesai, klik simpan template dan lihat hasil penambahan menu di blog Anda.
Kini pengunjung blog Anda dapat menulusuri semua artikel blog dengan mudah setelah pemasangan Menu dan Submenu dalam blog. Lebih mudah penelusuran akan lebih mudah pula pembaca artikel menemukan informasi yang dicari. Tetap semangat berkreasi dengan blog Anda, berbagi pengetahuan dan informasi ,salam blogger!!!
No comments:
Post a Comment