Membuat Menu Horizontal di Blog

Membuat Menu Horizontal di Blog

Sengeti, 28 Maret 2011 By Tri Arga Computer Muaro Jambi

Membuat Blog kita tampil beda dari yang lain memang membuat kita tertantang, salah satunya dengan menambahkan Menu Horizontal pada bagian atas. Untuk mempermudah pengunjung memilih kategori halaman yang akan di lihat nya. Artikel ini juga sudah banyak yang menulis, namun tidak ada salahnya saya menuliskan kembali ke blog saya, bila sewaktu-waktu nanti saya membutuhkannya. Dan sebagai catatan saya dan bagi anda yang ingin belajar. Baik kita mulai saja, pertama yang harus anda lakukan adalah anda sudah masuk atau login ke blog anda.

1. Pilih Rancangan atau Layout, kemudian pilih Edit HTML kemudian cari "]]>", untuk mempercepat silahkan gunakan ctrl + f untuk mencari syntax tersebut.

2. Copykan code CSS dibawah ini diatas syntax "]]>.

view plainprint?

1. /*CSS untuk menu horizontal*/  
2.   
3. .menuhorizontal ul{  
4. font: bold 13px arial;  
5. padding-left: 0;  
6. margin-left: 0;  
7. height: 30px;  
8. }  
9.   
10. .menuhorizontal ul li{  
11. list-style: none;  
12. display: inline;  
13. }  
14.   
15. .menuhorizontal ul li a{  
16. padding: 2px 0.5em;  
17. text-decoration: none;  
18. float: left;  
19. color: black;  
20. background-color: #999999; /*warna disesuaikan dengan layout anda*/  
21. border: 2px solid #999999; /*warna disesuaikan dengan layout anda*/  
22. }  
23.   
24. .menuhorizontal ul li a:hover{  
25. background-color: #333333; /*warna disesuaikan dengan layout anda*/  
26. border-style: outset;  
27. }  

/*CSS untuk menu horizontal*/

.menuhorizontal ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 30px;
}

.menuhorizontal ul li{
list-style: none;
display: inline;
}

.menuhorizontal ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #999999; /*warna disesuaikan dengan layout anda*/
border: 2px solid #999999; /*warna disesuaikan dengan layout anda*/
}

.menuhorizontal ul li a:hover{
background-color: #333333; /*warna disesuaikan dengan layout anda*/
border-style: outset;
}

Kemudian simpan template.

3. Kemudian kembali ke Elemen laman, silahkan tambahkan Gadget HTML/JavaScript. Kemudian copykan syntax dibawah ini.

view plainprint?

1. <div class="menuhorizontal"><ul>  
2. <li><a href="#">Home</a></li><!-- Tanda # diganti dengan URL -->  
3. <li><a href="#">Tutorial Website</a></li>  
4. <li><a href="#">About Me</a></li>  
5. </ul>  
6. </div>  

<ul>
<li><a href="#">Home</a></li><!-- Tanda # diganti dengan URL -->
<li><a href="#">Tutorial Website</a></li>
<li><a href="#">About Me</a></li>
</ul>

Silahkan simpan dan refresh / lihat layout anda, silahkan edit sesuai keinginan anda apabila ada yang tidak pas dengan tampilan /warna.

NB : Silahkan backup template anda sebelum anda mengedit, jika terjadi error dapat segera memperbaiki.