6 Des 2009

Membuat Horisontal Menu




Caranya simpel aja kok..
cuman cukup menambahkan code ini pada template blogger anda.
#navigation{font-size:110%; height:2.2em; line-height:2.2em; margin:0 1px; color:#999; } #navigation li{ float:left; list-style-type:none; border-right:1px solid #ffffff; white-space:nowrap; } #navigation li a{ display:block; padding:0 10px; font-size:0.8em; font-weight:normal; text-transform:uppercase; text-decoration:none; background-color:inherit; color: #999; } * html #navigation a {width:1%;} #navigation a:hover{ background:#ccc; color:#fff; text-decoration:none; }
Ikuti caranya bro...

Step 1.- Klik Dashboard > Layout > Edit HTML. lalu cari kode ini. ]]>
Step 2.- Lalu taruh (paste) kode tersebut diatas. sebelum/diatas kode ini. ]]>

Anda bisa berkreasi dengan kode tersebut, sesuai kebutuhan.

Step 3.- Cari kode ini - b:section class='header' id='header' maxwidgets='1' showaddelement='no'
Step 4.- Lalu ganti bagian ini:

1. showaddelement='no' menjadi showaddelement='yes'
2. maxwidgets='1' menjadi maxwidgets='4'

Lalu klik Save template dan klik Page elements.

Step 5.- pada Header , klik Add a Gadget > lalu klik HTML/JavaScript .

Step 6.- masukkan kode ini:
<div id='navigation'> <ul> <li><a href="Your URL">Home</a></li> <li><a href="Your URL">Advertise</a></li> <li><a href="Your URL">About Me</a></li> </ul> </div>

* Ganti sesuai kebutuhan anda :)

Step 6.- Terakhir, klik Save! selesai sudah..
Contoh Dapat Dilihat Disini


0 Comment:

Posting Komentar