Cara bikin menu di blog

Pasti lu mau bikin menu di blog lu kan, biar blog lu gak keliatan biasa aja.
Nah nanti pas lu bikin bentuk nya bakal jadi kayak gini:


Keren kan nah gini langkah-langkah nya
1. Pastikan lu udah login di blogger
2. Buka 'Rancangan'/'Design'
3. Tambah Gadget --> HTML/JAVASCRIPT
4. Taruh Widgetnya di bawah Header
5. Lalu masukan kode di bawah
<br /><blockquote><div id='boserbadnavbar'><ul id='boserbadnav'><li><a href='#'>Menu1</a></li><li><a href='#'>Menu2</a></li><li><a href='#'>Menu3</a><ul><li><a href='#'>Menu3.1</a></li><li><a href='#'>Menu3.2</a></li></ul></li></ul></div></blockquote>
"Ganti # dengan url yang dituju saat di klik,dan ganti nama menu sesuka lu"
6. Lalu buka Edit Template HTML
7. Lalu klik 'Expand Template Widget'
8. Sekarang cari kode dibawah ,Lu bisa cari kodenya dengan mudah dengan klik Ctrl+F
]]></b:skin>
9. Lalu Copy kode di bawah diatas kode tadi
/*----- BOSERBAD Drop Down Menu ----*/ #boserbadnavbar { background: #060505; width: 840px; color: #FFF; margin: 0px; padding: 0; position: relative; border-top:0px solid #960100; height:35px; } #boserbadnav { margin: 0; padding: 0; } #boserbadnav ul { float: left; list-style: none; margin: 0; padding: 0; } #boserbadnav li { list-style: none; margin: 0; padding: 0; border-left:1px solid #333; border-right:1px solid #333; height:35px; } #boserbadnav li a, #boserbadnav li a:link, #boserbadnav li a:visited { color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #boserbadnav li a:hover, #boserbadnav li a:active { background: #fff; color: #000; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; <br /> } #boserbadnav li { float: left; padding: 0; } #boserbadnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #boserbadnav li ul a { width: 140px; } #boserbadnav li ul ul { margin: -25px 0 0 161px; } #boserbadnav li:hover ul ul, #boserbadnav li:hover ul ul ul, #boserbadnav li.sfhover ul ul, #boserbadnav li.sfhover ul ul ul { left: -999em; } #boserbadnav li:hover ul, #boserbadnav li li:hover ul, #boserbadnav li li li:hover ul, #boserbadnav li.sfhover ul, #boserbadnav li li.sfhover ul, #boserbadnav li li li.sfhover ul { left: auto; } #boserbadnav li:hover, #boserbadnav li.sfhover { position: static; } #boserbadnav li li a, #boserbadnav li li a:link, #boserbadnav li li a:visited { background: #fff; width: 120px; color: #000; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #333; <br /> } #boserbadnav li li a:hover, #boserbadnavli li a:active { background: #060505; color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; }<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div><br />
10. Lu bisa atur sesuka lu
11. Atau kode diatas bisa langsung lu masukin di kode CSS hasilnya tetep sama
Keren kan .

Post-post yang mungkin lu cari juga :