Jumat, 09 Juli 2010

Tips Membuat Menu Horizontal Pada Blogger

Inilah adalah Request dari Forum Trikdasar, dimana meminta untuk Memberikan tips cara membuat Menu Horizontal di blogger.

Untuk Caranya, 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 misalny 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="#">Homea>li>
<
li><a href="#">Abouta>li>
<
li><a href="#">Contacta>li>
<
li><a href="#">FAQa>li>
<
li><a href="#">Producta>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 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


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

Lihat hasilnya.... 

14 komentar:

_A_I_M_ mengatakan...

Waduh... kgk ngerti w....wew

Juragan Blogger mengatakan...

jangan lupa juga donk buka blog saya....

http://1tz-my-bl0gg3r.blogspot.com/

tq

Juragan Blogger mengatakan...

oh iya sekalian forumnya www.disscussindonesia.yforum.biz tq. No PENIPUAN!!!

Terrychen mengatakan...

@AIM

Mn yg ga gerti Om.. tlg nny in, ane akan mencari solusi mslhny om.

_A_I_M_ mengatakan...

bingung nyari kode2 nya yg mna nih....

Terrychen mengatakan...

Om tggal cari Kode yg Warna biru.

Untuk kode Warna merah hs diganti sesuai ptunjuk diatas.

_A_I_M_ mengatakan...

saya sekarang taruh label diatas juga bisa om ...
tpi sedikit aneh hehe....

Terrychen mengatakan...

oow.. emg bs bro. tp aneh ga prnh liat blog kyk gt.. ckck..

_A_I_M_ mengatakan...

yang enting bisa untuk pemula dan lebih gampang ,,, hehe....

Terrychen mengatakan...

@AIM
y, bs membuat ssuatu brbeda dr orgln. uda Mantap bro.

download komik manga terbaru mengatakan...

ane bingung ni gannn...

aan.vebrianto mengatakan...

wah amat bermanfaat , , ,
triMz ya gaN , ,

Obat mengatakan...

sukses gan...makasih banyak triksnya..hee

Muhammad Nur Huda mengatakan...

thanx gan

Posting Komentar

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Macys Printable Coupons