Cara Membuat Menu Horizontal Untuk Blogger Atau Blogspot

Written By Unknown on Selasa, 08 November 2011 | 18.35

Ada beberapa Cara Membuat Menu Horizontal Blogger atau blogspot, Menu horizontal bisa dibuat dengan menggunakan widget khusus blogger yaitu dengan menggunakan html widget seperti menambah link scroll atau bisa juga menambahkan lewat templatenya menggunakan kode html dan css.

Untuk cara membuat menu horizontal pada blogger atau blogspot dengan menggunakan widget yaitu dengan menambahkan widget setelah header. Kode ini yang akan menjadi menu horizontal dan menu ini dapat diubah2 sesuai keinginan tanpa harus mengganti kode html pada template. Namun hal ini memiliki kekurangan yaitu jika kita menggunakan widget maka akan membuat loading time menjadi lebih lama karena seperti yang telah saya utarakan sebelumnya mengenai cara terbaik untuk mempercepat loading time blogger yaitu dengan mengurangi jumlah widget blogger.

Untuk membuat menu horizontal pada blogger menggunakan widget:

pertama2 sign in seperti biasa
klik tata letak untuk bahasa indonesia atau layout untuk bahasa inggris
klik edit html
trus klik expand widget template

Sebelum membuat menu horizontal jangan lupa download template agar misal ada kesalahan bisa menggunakan template sebelumnya

kalau sudah cari kode berikut :

b:section class='header' id='header' maxwidgets='1' showaddelement='no'

kemudian ganti angka 1 dengan 2 dan no dengan yes
terus dibawahnya ada kode

b:widget id='Header1' locked='true'

Ganti true dengan false Terus save template

Setelah itu untuk menambah menu horizontal tinggal kopi kode berikut

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Product</a></li>
</ul>
</div>

Jangan lupa mengganti kode # dan nama yang berwarna merah.
Terus buka elemen halaman atau page elemen pada header klik add page elemen html terus paste kode itu terus save.

Untuk menu horizontal dalam template atau menggunakan html dan css
langsung saja kopi kode diatas kemudian paste di bawah <body>

Kemudian kopi kode dibawah ini:

#nav ul{
display:block;
margin: 0px;
padding: 0px;
}
#nav li{
float:left;
list-style-type:none;
padding:3px 5px 3px 5px;
margin:1px;
border:#CCCCCC 1px solid;
}
#nav li a{
text-decoration:none;
}
#nav li:hover{
background:#00FFFF;
}

Untuk warna menu horizontal ini bisa diganti sendiri jika ingin menggunakan warna yang lain.

Setelah itu paste diatas

]]></b:skin>

lalu save template.

Lihat hasilnya.

Share this article :