bikin menu horisonal yang khusus digunakan untuk blogspot

Posted on January 17, 2010

0


Biasanya saat mendapatkan  templates dari blogger atau lebih dikenal dengan blogspot juga, kita templatesnya tidak ada menu horisontal yang biasa diisi page (halaman). anda telah temukan di sini.

Cara membuat menu horizontal pada 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 misalnya 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

PHP Code:
<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 element pada header klik add page element html teruspaste kode itu terus save.

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

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

PHP Code:
]]></b:skin>

lalu save template.

cukup jelas kan penjelasan di atas. pelajari sebisa mungkin dengan mencobanya di blog blogspot atau blogger anda, jika skrip ini tidak bisa dijalankan, coba teliti lebih cermat lagi, siapa tahu ada yang masih tercecer.