Membuat Menu Horizontal Dropdown

Nuatlah header Blogmu menjadi lebih attraktif dan SEO, caranya dengan memasang Menu Horizontal . Bisa Horizontal saja, bisa juga horizontal disertai dengan dropdown.  Kamu udah tau apa itu Menu Horizontal pada header ? nih, gambarannya . . . 


1. Masuk ke blogger, lalu buka  Layout => Edit HTML, centang pada "Expand Widget Templates". 
2. Cari kode  ]]></b:skin> (pakai Ctrl+ F),  kalo udah ketemu copy kode di bawah ini dan letakkan diatasnya

/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Note : Teks warna merah adalah gambar untuk menunya, untuk menggantinya, Kamu tinggal pilih kodenya, antara lain yang seperti berikut

blackleft.gif	blackright.gif
greenleft.gif	greenright.gif
redleft.gif	redright.gif
unguleft.gif	unguright.gif
yellowleft.gif	yellowright.gif
blueleft.gif	blueright.gif
whiteleft.gif	whiteright.gif

3. Copy kode berikut ini

<div id="tabshori">
<ul>
<li><a href="Url"><span>Judul 1</span></a></li>
<li><a href="Url"><span>Judul 2</span></a></li>
<li><a href="Url"><span>Judul 3 </span></a></li>
<li><a href="Url"><span>Judul 4</span></a></li>
<li><a href="Url"><span>Judul 5</span></a></li>
</ul>
</div >

4. Ganti Url dengan url link yang akan dituju pada masing-masing judul Menu Horizontal-nya. Kemudian text yang dicetak tebal diganti dengan judul masing-masing.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini (Pakai Ctrl + F)lalu letakkan kode-kode di atas tadi ,di atas kode berikut ini

<div id="content-wrapper">

6. Simpan
7. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
 
Atau dengan cara lain
- Cari kode berikut ini :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

Ganti text yang berwarna merah  sehingga menjadi seperti ini:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

lalu di Save

Cara pasang : Buka tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan.

Selamat Mencoba.....