Sekarang banyak sekali
informasi tentang cara
menambah / membuat
sub menu untuk menu utama di internet. Kita bisa dengan mudah mencari
informasi tersebut hanya dengan mengetikkan kata tertentu sesuai maksud yang
diinginkan pada salah satu mesin pencari (search engine) seperti google.com ,
maka akan tertera informasi yang kita inginkan.
Berdasarkan pengalaman saya,
dari beberapa informasi yang kita maksud, terkadang kurang jelas cara atau
langkah-langkah yang mesti dilakukan. Apalagi seperti saya yang masih awam
dengan pengetahuan tentang blogger ini.
Karena itu, saya akan membagi
pengalaman saya tentang suatu informasi yaitu cara
membuat sub menu pada menu utama di blogspot”.
Berikut ini langkah-langkah
yang harus dilakukan :
- Klik
Menu Desain
- Pilih
Menu Template lalu pilih menu Edit HTML
- Pilih/klik menu
Lanjutkan
- Pilih/klik menu Expand
Template Widget
-
<div class='main-outer'>
atau <div id='main-wrapper'> atau <div
id='main'>
|
|
Cari scrift berikut
:
Agar lebih mudah, klik saja
F3 pada keyboard lalu pilh salah
satu scrift diatas. Berdasarkan pengalaman saya setelah membolak balik informasi
di www.google.com maka yang cocok adalah :
div
class='main-outer'>.
Bisa
jadi beda dengan template yang lain…
Setelah dapat, copas scrift
berikut tepat
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 anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada
blog anda.
- Ganti
Tulisan warna biru dengan menu dan sub menu
yang anda inginkan.
- Contoh :
Kesehatan. Ini menjadi Judul
Submenu
- Setiap
sub menu bisa ditambah atau dikurangkan sesuai keinginan.
7. Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar .
Lalu simpanlah/save. Dan tutup edit HTML tersebut.Saran :
back up dulu template anda sebelum merubah/menambah scrift diatas, agar bisa
dimanfaatkan kembali jika ada masalah dengan penambahan srcritf diatas.
8. Untuk menghilangkan
tampilan tampilan dabel dengan Laman Utama, Maka ikutilah saran berikut
:
- Masuk ke Menu
Laman
- Lalu pilih tampilan
halaman dengan memilih "jangan tampilkan"
- Simpan setelan, maka
laman utama akan tampil sendiri sesuai dengan scrift yang kita ketikkan
tadi.
Blog sudah bisa
dipublikasikan...
Semoga sharing yang saya buat
ini bisa bermanfaat dan menambah khazanah pengetahuan kita semua.