Rabu, 19 Januari 2011

Membuat Menu Horizontal

Sebenernya tutorial ini dah banyak di internet, seperti di Tips Trik Blogging. ya. . .  gx papa buat nambah postingan. ok karena ini "K-sEm" langsung saja kita mulai.

1. Log In Blogger kemudian ke rancangan=>edit HTML, kemudian klik kotak Expand Widget Template. dan paling penting jangan lupa back up dulu templatenya.
2. cari scrip ini ]]></b:skin>klo susah ppake ctrl+f truz copas sode tadi,. setelah itu taruh scrip berikut di atasnya

/*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;
}


tulisan yang bercetak tebal bisa di ganti dengan tulisan berikut ini



blackleft.gifblackright.gif


greenleft.gifgreenright.gif


redleft.gifredright.gif


unguleft.gifunguright.gif


yellowleft.gifyellowright.gif


blueleft.gifblueright.gif


whiteleft.gifwhiteright.gif


kalo sudah, kita lanjutkan
3. copy scrip berikut
<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com/">Trik-Tips</a></li>
<li>a href="http://trik-tips.blogspot.com/">Free Template </a></li>
<li><a href="http://trik-tips.blogspot.com/">Kamus</a></li>
<li><a href="http://trik-tips.blogspot.com/">Profile</a></li>
</ul>
</div>


ganti yang berwarna merah, dengan link yang anda inginkan dan bercetak tebal dengan nama yang anda inginkan.
4. cara pemasangan tergantung template yang digunakan.salah satunya cari kode berikut ini.

<div id="content-wrapper">

copy tepat di atas kode tadi.

6. kemudian simpan
7.Lihat hasilnya
8. kalo acak-acakan scrip tadi coba pindah di atas 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:widget></b:section>



ganti yang berwarna merah dengan


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



trakhir SAVE,. semoga berhasil.

Artikel Terkait



1 komentar:

makasih gan dah mau bikinin tutornya,mantaf dah gan . . .
THX bgt gan . . .
:D

Posting Komentar

 

Selamat Datang Di "K-sEm"

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...

Sekilas tentang "K-sEm"

Berawal dari iseng. Hingga menjadi hobi. (TRESNO JALARAN SAKA GAK NO SING LIYA).

Contact

"K-sEm"