Cara Mudah Membuat Menu Horizontal Blog
by alva in Blog Tutorial, Tips n Triks 6
Cara Mudah Membuat Menu Horizontal Blog. Kali ini AB akan memposting tutorial cara baru membuat menu navigasi horizontal pada blog sobat bagi yang ingin memberi menu ini, jika blog sobat tidak terdapat horizontal menunya dan ingin memasangnya. Melanjutkan tulisan AB yang kemarin yaitu Membuat content agar selalu ada di pojok blog. Mungkin sobat sudah sering melihat tutorial-tutorial bagaimana cara membuat menu horizontal di sumber/blog lain, sebenarnya tidak jauh berbeda, mungkin akan jauh lebih sederhana dan mudah, dan menurut AB menu ini lebih terlihat simple dan elegan. Sobat bisa lihat contoh menunya di blog saya ini yang berada dibawah header diatas. Bagaimana? kerenkan...
Ok..langsung saja kita mulai cara pasang menu navigasi horizontalnya:
1.Sobat masuk dulu ke situs CSSPORTAL.COM lalu pilih CSS menu generator.
2.Lalu sobat pilih menu yang sesuai selera sobat, AB ambil contoh pilih menu yang pertama, lalu sobat klik previewnya.
3.Lalu sobat akan mendapatkan kode CSS nya seperti dibawah:
HTML CODE :
<div id="tabs31">
<ul>
<li><a href="#" title=""><span>Home</span></a></li>
<li><a href="#" title=""><span>About Us</span></a></li>
<li><a href="#" title="" class="current"><span>Services</span></a></li>
<li><a href="#" title=""><span>Our Work</span></a></li>
<li><a href="#" title=""><span>Contact Us</span></a></li>
</ul>
</div>
dan
CSS Code :4.Nah sekarang kita tinggal pasang saja kode diatas.Caranya:
/* ^^^^^^^^ BELOW IS THE CODE FOR THE MENU ^^^^^^^^^^ */
#tabs31{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(images/bgOFF1.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;}
#tabs31 ul{margin:0;padding:0;list-style-type:none;width:auto;}
#tabs31 ul li{display:block;float:left;margin:0;}
#tabs31 ul li a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(images/bgDIVIDER1.gif) no-repeat top right;}
#tabs31 ul li a:hover,#tabs31 ul li a.current{color:#B30000;background:#fff url(images/bgON1.gif) no-repeat top right;}
/* ^^^^^^^^ ABOVE IS THE CODE FOR THE MENU ^^^^^^^^^^ */
- Masuk ke TATA LETAK --> EDIT HTML (beri tanda centang pada kotak expand text widget)
- Letakkan seluruh kode pada HTML KODE di bawah kode :
<div id=’upper-wrapper’>- Letakkan kode CSS diatas kode :
bla..bla..bla...(taruh disini)
</div>
]]></b:skin>
4.Selesai...
Sobat juga harus mendownload sourcenya pada situsnya agar tampilan sesuai dengan yang ada pada gambar.Sesudah sobat download, ekstrak dulu, lalu upload semua gambar yang ada di folder images. Saya sarankan di hosting gratis wen.ru. Atau terserah sobat mau naruhnya dimana, di google pages juga bisa.
Ganti kode warna merah diatas dengan alamat link dengan selera sobat, ganti tulisan warna hijau dengan nama link yang muncul. Tittle bisa dikosongkan.
Jika sobat tidak ingin salah satu menunya timbul, hilangkan kode class="current" pada HTML kodenya.
Selamat mencoba...
Kalau sobat masih ada yang bingung dengan pemasangan menu ini, silakan tanya saja melalui kotak komentar.
Terimakasih
