Senin, Maret 16, 2009

Membuat Menu Horizontal

bagi anda yang punya blog tapi templatenya tidak menyediakan menu horizontal nih gua kasih cara2x.tapi apasih menu horizontal itu nih contohnya:


persiapan sebelumnya yaitu:
-komputer terhubung dengan internet
-login ke Blogger
-siapkan juga kopi dan snacknya biar g bosan

dah deh basa-basinya nih gua kasih langkah2 yang harus loe ikutin:
1.Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2.Cari script seperti ini ]]>, kalo udah ketemu copy script dibawah ini dan taruh 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;
}


uuh... capek +()+ ahhh nikmat....
yuk lanjut sampe nomer berapa tadi????;;)
oh ya nomer 3 yah
3.Copy script berikut ini



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


4.Ganti http://robbysekawan.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 udah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.

7. Lihat hasilnya.



Photobucket

1 komentar:

  1. Coba cari aja tuh dhtml menu, atau shothink editor tinggal klik2 n jadi, atau pingin cari coba cari di blog saya http://mbahsomo.co.cc.
    Jangan lupa gabung di http://fkapal.co.cc

    BalasHapus