MEMBUAT MENU DAN SUB MENU DI BLOGSPOT

Alternatif kedua…MEMBUAT MENU BLOG dan SUB MENU

Langkah Pertama…..

Siapkan secangkir kopi…ditambah goreng2an…..hehehhe

Karna anda kami ajak melihat baris kode kode yang njliiimettt….

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)

Untuk mempermudah pencarian tekan CTRL + F…masukkan kata Kunci…]]></b:skin>

/* ----- 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 mengerjakan…hehehhe…. Kok kayak anak sekolahan aja….

****BRAVO BLOGGER ****

Bagikan

Artikel Terkait: