Sebelum ini pernah saya bahas tentang tutorial horizontal menu dropdown, kurang lebih sama dengan menu navigasi horizontal. Hanya saja dalam menu navigasi ini, sobat tidak perlu lagi masuk ke kode HTML template jika ingin menambahkan link baru. Namun kekurangan menu navigasi horizontal ini adalah tidak bisanya menambah link baru kebawah (vertikal) atau sub menu seperti pada horizontal menu dropdown.
langsung saja pada pembuatannya ya. Sip, sekarang silahkan sobat Login ke blogger dulu, kemudian tuju Elemen Halaman, lalu klik button Edit HTML, klik Expand Template Widgets.
Letakkan kode css berikut ini diatas kode ]]></b:skin>
Kamudian letakkan kode berikut ini tepat dibawah kode <div id='outer-wrapper'><div id='wrap2'> kode ini biasanya letaknya dibawah <body>
Keterangan :
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
Maka hasilnya akan seperti yang ada di blog ini, cuih om dody pamer nih..
Selamat mencoba ya..have a nice day !
langsung saja pada pembuatannya ya. Sip, sekarang silahkan sobat Login ke blogger dulu, kemudian tuju Elemen Halaman, lalu klik button Edit HTML, klik Expand Template Widgets.
Letakkan kode css berikut ini diatas kode ]]></b:skin>
/*-- (Menu/Nav) --*/
#nav{background:#000; height:30px; padding:5px 0 0; margin-bottom:0px; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px}
#nav-left{float:left; display:inline; width:700px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:13pt comic sans ms,arial,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}
Kamudian letakkan kode berikut ini tepat dibawah kode <div id='outer-wrapper'><div id='wrap2'> kode ini biasanya letaknya dibawah <body>
<div id='nav'>Jangan lupa Simpan Template. Coba lihat hasilnya !
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Keterangan :
- -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px
adalah garis melengkung pada ujung kotak navigasi, semakin besar angkanya maka akan semakin besar garis lengkungnya. Jika ingin membuat kotak lancip, silahkan hapus saja semua kode tersebut.
- height:30px adalah tinggi kotak navigasi.
- Background:#000 adalah warna kotak navigasi, warna bisa anda rubah sendiri. Dan jika ingin mengganti warna dengan gambar yang sobat punya, ubah kodenya sehingga menjadi seperti berikut :
#nav{background:#000 url('http://lh6.ggpht.com/_7Y9pl24WpQY/StGMv1nlCvI/AAAAAAAAB4U/RmIZGEvqvHA/gradient.php_thumb%5B2%5D.jpg?imgmax=800') repeat-x; height:30px; padding:5px 0 0; margin-bottom:0px; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px}……………………………………………………….…………………………………………………………………………………………………………………………………………………………………………………………………………………….. dst..alamat gambar diatas hanya contoh yang saya punya, jika ingin melihat gambarnya silahkan sobat block url gambar diatas kemudian masukkan ke address pada browser sobat dan enter, jreeng keliatan kan gambarnya. Silahkan jika ingin menggunakan gambar diatas atau jika punya gambar sendiri, silahkan !
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
Maka hasilnya akan seperti yang ada di blog ini, cuih om dody pamer nih..
Selamat mencoba ya..have a nice day !
Tidak ada komentar:
Write komentar