Singkat kata, berikut langkah membuat menu horizontal dalam blog kamu :
- Login ke account blogger kamu.
- Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
- Cari Kode ]]></b:skin> dan Copy kode berwarna hijau di bawah lalu paste di atas kode ]]></b:skin>. (gunakan Ctrl+f untuk mempercepat pencarian kode diatas)
/* navbar ================== */ #bg_nav { background: #ffffff; width: 850px; height: 29px; font-size: 11px; font-family: Arial, Tahoma, Verdana; color: #000000; font-weight: bold; margin: 0px auto 0px; padding: 0px; border-top: 1px solid #000000; border-bottom: 1px solid #ffffff; overflow: hidden; } #bg_nav a, #bg_nav a:visited { color: #000000; font-size: 11px; text-decoration: none; text-transform: uppercase; padding: 0px 0px 0px 3px; } #bg_nav a:hover { color: #000000; text-decoration: underline; padding: 0px 0px 0px 3px; } #navleft { width: 500px; float: left; margin: 0px; padding: 0px; } #navright { width: 220px; font-size: 11px; float: right; margin: 0px; padding: 3px 5px 0px 0px; } #navright a img { border: none; margin: 0px; padding: 3px 5px 0px 0px; } #nav { margin: 0px; padding: 0px; list-style: none; } #nav ul { margin: 0px; padding: 0px; list-style: none; } #nav a, #nav a:visited { background: #ffffff; color: #000000; display: block; font-weight: bold; margin: 0px; padding: 8px 15px 8px 15px; border-left: 1px solid #ffffff; } #nav a:hover { background: #c06000; color: #000000; margin: 0px; padding: 8px 15px 8px 15px; text-decoration: none; } #nav li { float: left; margin: 0px; padding: 0px; } #nav li li { float: left; margin: 0px; padding: 0px; width: 150px; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 160px; float: none; margin: 0px; padding: 7px 30px 7px 10px; border-bottom: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; } #nav li li a:hover, #nav li li a:active { background: #c06000; padding: 7px 30px 7px 10px; } #nav li ul { position: absolute; width: 10em; left: -999em; } #nav li:hover ul { left: auto; display: block; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } |
- Kemudian cari kembali kode seperti di bawah ini.
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/> ... dan seterusnya ... </b:section> </div> |
- Copas kode berikut tepat di bawah kode yang berwarna kuning
<div id='bg_nav'> <div id='navleft'> <div id='nav'> <ul> <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>Home</a></li> <li><a href='http://Link_yang_dituju'>About</a></li> <li><a href='http://Link_yang_dituju'>Contact</a></li> <li><a href='http://Link_yang_dituju'>Kata</a></li> <li><a href='http://Link_yang_dituju'>Contoh</a></li> </ul> </div> </div> <div id='navright'> <form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/> </form> </div> </div><!-- akhir bg_nav –> |
- Lalu pilih Simpan Template…
..Terima Kasih semoga berguna buat para sobat blogger semua..
Sumber:// Forantum dengan sedikit perubahan.
0 comments:
Post a Comment
Blog ini Do Follow Silahkan berkomentar untuk mendapatkan Backlink