menu

clock

Sabtu, 17 Maret 2012

Pasang Navigator Menu Horizontal Pada Blog

  Pasang Navigator Menu Horizontal

Navigator Menu Horizontal adalah sebuah sarana berupa menu yang berbentuk horizontal. Dan Menu Horizontal ini sangat berguna untuk sebuah blog/website anda.
Perhatikan gambar dibawah ini:



Apakah anda tertarik Pasang Navigator Menu Horizontal pada blog anda ?
Jika "YA", silahkan ikuti langkah-langkah Pasang Navigator Menu Horizontal sebagai berikut:

Langkah I

1. Login ke Blogger
2. Klik Tata Letak/Lay Out
3. Klik edit HTML
4. Copy Paste Kode dibawah ini tepat diatas kode ]]></b:skin>
.menuhorisontal{
width: 100%;
overflow: hidden;
border-bottom: 1px solid #000000;
}

.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 10px;
font: bold 12px Verdana;
list-style-type: none;
}

.menuhorisontal li{
display: inline;
margin: 0;
}

.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white;
color: white;
background: #414141; /*background dari Tabel*/
}

.menuhorisontal li a:visited{
color: white;
}

.menuhorisontal li a:hover, .menuhorisontal li.selected a{
background:#002EB8; /*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}


5. Temukan kode :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='OrLaNd (Header)' type='Header'/>
</b:section>
</div> pada blog anda.
6. Jika sudah ketemu, Copy Paste kode dibawah ini, tepat dibawah kode <div id='header-wrapper'>
<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

7. Klik Simpan/Save.

Langkah II

1. Klik Elemen Halaman/Add a Gadget
2. Pilih HTML/Javascript
3. Copy Paste Kode dibawah ini pada HTML/Javascript.
<div class="menuhorisontal">
<ul>

<li><a href="http://OrLaNd.web.id">HOME</a></li>

<li><a href="http://www.orland.web.id/2009/02/my-galery.html">GALERY</a></li>

<li><a href="http://www.orland.web.id/2009/01/aku-untuk-negeriku.html">Perjalanan Indonesia</a></li>

</ul>
</div>
4. Silahkan Anda Ganti link beserta Nama diatas
5. Klik simpan/save
6. Selesai

1 komentar: