Membuat MENU pada BLOGSPOT

Artikel MEMBUAT MENU BLOG ini telah banyak di posting oleh para BLOGGER yg lain.Disini saya hanya ingin

menyajikannya kembali ,dan juga sebagai catatan agar saya lebih mudah menggunakannya

andaikata pada suatu hari nanti saya ingin membuat MENU pada blog baru saya.

Baiklah kita mulai saja:
1. Login ke blogger terus pilih Layout --> Edit HTML, jangan lupa template di backup dulu.
2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya

/*credits : http://sulthanyusuf.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("") 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 {color:#fff; background-color:grey; margin:0 7px; padding:5px 4px}{
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}


3. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://sulthanyusuf.blogspot.com"><span>Home</span></a></li>
<li><a href="http://sulthanyusuf.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://sulthanyusuf.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://sulthanyusuf.blogspot.com"><span>News</span></a></li>
<li><a href="http://sulthanyusuf.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

4. Ganti http://sulthanyusuf.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa

alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan

pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut

adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu

contoh memasangnya yaitu begini
cari kode berikut ini :

<div id="content-wrapper">

caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha

langsung ketemu kan. Kalo sudah ketemu copy script yang tadi diatasnya
6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. 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.

9. Kalo masih belum berhasil juga coba cara ini:

- 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>


terus ganti script-nya 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>

terus di Save

Klik 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, coba drag kebawah

dikit, terus simpan dan lihat hasilnya.
hasilnya pasti akan berbeda-beda di setiap template.
kalo gagal berarti coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, Good luck.....

Semoga Bermanfaat....

RELATED POST :

Widget by BLOG SulthanYusuf ™