Cara Mudah Membuat Menu Horizontal Blog

by in , 6

Cara Mudah Membuat Menu Horizontal Blog | ALva’z Blog

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...



Cara Mudah Membuat Menu Horizontal Blog

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 :

/* ^^^^^^^^ 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 ^^^^^^^^^^ */
4.Nah sekarang kita tinggal pasang saja kode diatas.Caranya:

- 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’>

bla..bla..bla...(taruh disini)

</div>
- Letakkan kode CSS diatas kode :

]]></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




6 Responses to “Cara Mudah Membuat Menu Horizontal Blog”

  1. Bos, div id upper wrapper ga ada di html ku, trus ku coba di bawah header wrapper jadi vertikal tu, gmn ?? tahu g?? tengkyu

    ReplyDelete
  2. biasanya letaknya di bwh judul blog bro,, coba cari kode yg hampir mirip sprti di ataz dan taruh di bawah kode HTML untuk judul,,
    nanti menu horizontalnya akan muncul disitu/di bwh judul tadi,, ^^ trus jangan lupa kode CSSnya di pasang juga,, mungkin kalo tdk, akan berubah menjadi menu vertikal,,

    silakan di coba dlu br0,, ;-)

    ReplyDelete
  3. bro kalo punyaq yang ada kode ini = id='outer-wrapper'id='wrap2

    apa sama bro...makasih.....

    ReplyDelete
  4. kykna gk sama sob,, coba cari yg hampir mirip di atas atau biasanya letaknya di bwh judul blog/header.. .

    di coba dlu sob,,
    ^^

    ReplyDelete
  5. weehhhh keren nehh..ni dia yang kemaren gwa cari2 baru ktemu skg....mantabz langsung praktek gan :D

    ReplyDelete

Beri komentar, saran, pertanyaan ke blog ini disini tempatnya...!!
Jangan spam.
Terimakasih.

Facebook Fanspage