CARA MENAMBAH SUB MENU

Tentunya bagi para blogger baru, selalu ingin mempercantik tampilan bloggernya khususnya untuk mempercantik tampilan dan meminimalisasi menu dengan membuat sub menu.

Jika blogger ingin membuat sub menu pada blog standart sangatlah mudah, ikuti saja langkah-langkah berikut ini:

Cara yang penulis tunjukkan disini menggunakan blog tampilan baru :

1. login ke blogger.com,
2. pilih template, Edit HTML,
3. cari kode: ]]></b:skin> , untuk mempermudah pencarian gunakan Ctrl + F, letakkan kode navigasi dibawah ini diatas kode ]]></b:skin> tersebut                                                        

/* Sub Menu ----------------------------------------------- */ #NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 20px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #222222; width: 150px; color: #ffffff; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #00ffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }

      4.  simpan : disarankan sebelum disimpan cek terlebih dahulu 
           dengan pratinjau,

      5.  pilih tab Rancangan / Tata Letak pada Dashboard blog anda, 

      6.  tentukan letak sub menu ini dengan meng-klik tulisan 'Add New 
           Widget / Tambah Gadget'  di tempat   yang blogger inginkan,
           pilihlah widget Html / Javascript, letakkan kode dibawah ini 
           didalamnya     
                                    
<div class='menuhorisontal'>
<ul id='nav'>
<li><a href="#">Menu 1</a> </li>
<li><a class='trigger'>Menu 2</a>
<ul>
<li><a href='#'>Tulis Nama Sub menu</a></li>
<li><a href='#'>Tulis Nama Sub menu</a></li>
<li><a href='#'>Tulis Nama Sub menu</a></li>
</ul> </li>
</ul></div>

Catatan :

• Ganti tanda # dan tulisan warna merah sesuai url kesukaan bloggers
• bloggers bisa mengganti warna background, maupun teks, mengganti besar kecilnya teks pada kode ( pont. 3 ) diatas