Pages

Minggu, 17 Juli 2011

Cara Membuat Menu Navbar Blog

Blog tanpa Navbar Menu, sama aja seperti sayur tanpa garam, kurang asin, bukan kurang asin lagi, malah ga ada asin-asin nya, buat yang belum tau apa itu navbar, Navbar Menu itu menu yang ada di atas, Sebenernya pihak blogger sendiri udah nyediain, cuma, kurang bagus, karna bukan editan sendiri, terus juga ga ada SubMenu (anak menu) nya, alias jadul, sekarang hampir semua blog pakai navbar buatan sendiri, dengan expresi mereka masing-masing, nah buat kita-kita yang masih pemula, walaupun pemula tapi kita udah bisa buat sendiri, walaupun ga sebagus mereka yang senior (biar simple yang penting punya sendiri), nah buat siapa aja yang mau punya menu navbar plus submenu nya, bisa nyoba-nyoba tutorial singkat ini.



Siap?! sebelum kita mulai, untuk memperkuat keyakinan, kita liat dulu hasil nya, KLIK DISINI...



=====================================================

kalo udah yakin, baru kita mulai.... jangan lupa baca bismillah... =====================================================



1. Login ke BLOG, klik rancangan, klik menu "edit html", kemudian Cari kode berikut ini :




]]></b:skin>


2.Copy kode dibawah ini tepat diatas kode diatas :






/* ----- NAVBAR MENU ----- */



#NavbarMenu {

width: 1000;

height: 35px;

background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMqXClhWBCS2cw0_HPjyQjpqZ17Q2HQkwvh8FC9ifxgyloFMmSsm-BPRnDwLcVEc4rSeT93gDNMS6y68onhSr8ptFWaXMXVrtnah3IdZYF_iiKvnYeiy7VSnGJxecB38_JVBroPWtS7ym2/s800/navbar.gif) repeat-x top;


color: #3D81EE

margin: 0 auto 0;

padding: 0;

font: bold 11px Verdana, Verdana, Verdana;

border-top: 1px solid #AFAFAF;

border-bottom: 1px solid #FFFFFF;


}

#NavbarMenuleft {

width: 1000;

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: #3D81EE;


display: block;

text-transform: capitalize;

margin: 0;

padding: 9px 15px 8px;

font: normal 12px Verdana, Verdana, Verdana;

}


#nav li a:hover, #nav li a:active {

background:#99C9FF;

color: #3D81EE;

margin: 0;

padding: 9px 15px 8px;

text-decoration: none;


}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMqXClhWBCS2cw0_HPjyQjpqZ17Q2HQkwvh8FC9ifxgyloFMmSsm-BPRnDwLcVEc4rSeT93gDNMS6y68onhSr8ptFWaXMXVrtnah3IdZYF_iiKvnYeiy7VSnGJxecB38_JVBroPWtS7ym2/s800/navbar.gif) repeat-x top;

width: 150px;

color: #000;

text-transform: normal;


float: none;

margin: 0;

padding: 7px 10px;

border-bottom: 1px solid #99C9FF;

border-left: 1px solid #99C9FF;

border-right: 1px solid #99C9FF;


font: normal 11px Verdana, Verdana, Verdana;

}

#nav li li a:hover, #nav li li a:active {

background: #99C9FF;

color: #3D81EE;

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;

}




3. Belum selesai... sekarang coba cari kode berikut :





</header>





4. Copy kode dibawah ini tepat diatas kode di atas :




<div id='NavbarMenu'>



<div id='NavbarMenuleft'>



<ul id='nav'>




<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>



<li><a href='GANTI DENGAN URL KAMU'>Menu 1</a> </li>


<li><a>Menu 2</a>



<ul>



<li><a href='GANTI DENGAN URL KAMU'>Sub Menu 1</a></li>




<li><a href='GANTI DENGAN URL KAMU'>Sub Menu 2</a></li>



</ul>




</li>



<li><a>Menu 3</a>



<ul>




<li><a href='GANTI DENGAN URL KAMU'>Sub Menu 1</a></li>



<li><a href='GANTI DENGAN URL KAMU'>Sub Menu 2</a></li>




</ul>



</li>



</ul>




</div>



</div> <!-- end navbar -->



Alhamdulillah selesai...



nb: buat yang masih belum ngerti bisa tanya jawab di kotak komentar

0 komentar: