Cara Membuat SubMenu di Blogger

Cara Membuat SubMenu di Blogger

---

Silahkan lihat dulu hasilnya di sini.

Untuk membuat submenu semacam itu, silahkan ikuti langkah-langkah berikut ini:

1. Masuk ke Blogger

2. Klik Tata Letak

3. Klik Edit HTML

4. Cari kode: ]]></b:skin>

5. Tambahkan kode berikut ini di atas kode yang tadi (no. 4)

/* ----- NAVBAR MENU ----- */ #NavbarMenu { width: 875px; height: 35px; background:#FF6600 url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top; color: #ffffff margin: 0 auto 0; padding: 0; font: bold 11px Arial, Tahoma, Verdana; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; } #NavbarMenuleft { width: 680px; 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 { color: #ffffff; display: block; text-transform: capitalize; margin: 0; padding: 9px 15px 8px; font: normal 15px Georgia, Times New Roman; } #nav li a:hover, #nav li a:active { background:#FF6600; color: #ffffff; margin: 0; padding: 9px 15px 8px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top; width: 150px; color: #ffffff; text-transform: lowercase; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; font: normal 14px Georgia, Times New Roman; } #nav li li a:hover, #nav li li a:active { background: #FF6600; color: #ffffff; 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; }

6. Kemudian, cari kode ini:

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/> </b:section> </div>

7. Tambahkan kode berikut ini di bawah kode no. 6

<div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a expr:href='data:blog.homepageUrl'>Beranda</a></li> <li><a href='#'>Menu-1</a> <ul> <li><a href='#'>SubMenu-1-1</a></li> <li><a href='# '> SubMenu-1-2</a></li> </ul> </li> <li><a href='#'>Menu-2</a> <ul> <li><a href='#'>SubMenu-2-1</a></li> <li><a href='#'> SubMenu-2-2</a></li> </ul> </li> <li><a href='#'>Menu-3</a> <ul> <li><a href='#'>SubMenu-3-1</a></li> <li><a href='# '> SubMenu-3-2</a></li> <li><a href='#'> SubMenu-3-3</a></li> </ul> </li> <li><a href='#'>Menu-4 </a></li> </ul> </div> </div> <!-- end navbar -->

8. Simpan

Selamat mencoba

By : Bang Udin

----------------------------------------------------------------------------------

Gunakan ----{ CTRL + F }---- Untuk Mencari Artikel

----------------------------------------------------------------------------------

Postingan Baru :

• Cara membuat link berkedip ketika cursor melintas
• Cara Membuat Effect Snow Atau Tabur Salju Di Blog
• Cara Intalasi Windows Seven ( 7 ) Lengkap
• Code Rahasia Semua Type Handphone Lengkap
• Kode BenQ Siemens
• Kode Akses Nokia dengan berbagai tipe
• Kode Akses Sony Ericsson
• Kode Akses Nokia
• Kode Rahasia LG
• Kode Rahasia Samsung
• Kode Rahasia Umum Phonsel Java Dan Symbian
• Cara Daftar Dan Merubah Domain Blogspot Ke .CO.TV
• Cara Membuat Cursor Bertabur Bintang
• Cara Daftar Blog Ke Google
• Cara Pasang Meta Tag Di Blogger SEO Friendly
• Cara Memasang Share Pack (Share Post To Social Boo...
• Cara memasang sharing is sexy di blogspot
• Cara Membuat Taskbar Ato Toolbar Melayang Di Blog
• Cara Membuat Shoutmix Tersembunyi
• Cara Membuat Link Warna - Warni Pelangi Di Blog
• cara memasang meta tag
• Cara pasang video di blog
• Cara Membuat Link Berkedip Warna Warni
• Tempat Ganti Code Warna
• Cara Menu Tab View di Samping
• Cara Membuat Tulisan / text Berkedip
• Cara Membuat Menu Melayang
• Efek Marquee untuk Banner Berjalan
• Salam Pembuka Sesuai Dengan Settingan Waktu
• Mengganti Icon Blogger
• Cara membuat addres bar berjalan

TERIMAKASIH SUDAH BERKOMENTAR