Menu Horizontal dan Vertikal ~ maksudnya adalah bisa dipasang secara Horizontal, tapi bisa juga dipasang secara Vertikal tanpa merubah kode, Tutorial ini sebetulnya sejak sore sudah mau di publikasikan, tapi gitu baca di Sakahayang[dot]com ada gonjang ganjing A Chicken A Coward jadi rada ngarempod oge' (grogi juga) apakah saya yang dimaksud, soalnya semua tutorial yang ada disini hasil ngope, walaupun gitu ngga pernah lupa selalu menyertakan sumbernya, tapi namanya manusia gudangnya khilap, jadi muter-muter dulu ke kang ogle..eh rupanya bukan euy...dalam hati bicara, "saya emang tukang ngope, tapi pe-ngope yang tetap jadi pejantan tangguh" rupanya cilembu juga..ng'ga mau kalah dengan Kidaus yang menaklukan Dewi (kidaus memang betul-betul pejantan tangguh...shwalut untuk aki) miliknya Cinta Deras. Saking senengnya karena bukan cilembu yang dimaksud oleh kang asep, diatas kepala keluar kerlap-kerlip seperti ada Efek Neon Light nya Kampungku.
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style>
<div id="tabs10"> <ul> <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>
4. Ganti yang berwarna merah dengan # = URL sohib dan Link1 s/d 7 ganti lah sesukanya
5. Simpan dan lihat hasilnya !!
Semoga Menu Horizontal dan Vertikal ada yang mau
Cilembu sebetulnya mau bilang bahwa Menu Horizontal dan Vertikal ini sumbernya dari "Senantiasa belajar" adminnya kebetulan tetangga belakang rumah, dan pernah dipasang cukup lama diblog ini, tapi karena bosen jadi disimpen sajah...Sayang kan kalau di dem terus digudang nanti malah buluk, jadi mendingan di bagiin sajah-lah....sugan aya nu butuh?!
Caranya :
1. Login ke blognya.
2. ke Rancangan ~ Tambah Gadget ~ klik HTML/JavaScript
3. Paste Kode dibawah ieu :
<style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_knlQKBI/AAAAAAAACu0/8LiiBZnKfsw/s1600/tableft10.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_k-9mnTI/AAAAAAAACu4/zgN8RBPo47g/s1600/tabright10.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; }Caranya :
1. Login ke blognya.
2. ke Rancangan ~ Tambah Gadget ~ klik HTML/JavaScript
3. Paste Kode dibawah ieu :
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style>
<div id="tabs10"> <ul> <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>
4. Ganti yang berwarna merah dengan # = URL sohib dan Link1 s/d 7 ganti lah sesukanya
5. Simpan dan lihat hasilnya !!
 |
| Contohnya |
Semoga Menu Horizontal dan Vertikal ada yang mau
