Home | Facebook | Twitter | Sign In | Log Out

Advertising

Cara Membuat Menu Horizontal Navigasi

Sekarang giliran bagaimana cara membuat menu Horizontal atau tampilan menu yang berderet ke samping, maksudnya gimana..bingung ya...emang gue juga bingung nih...tapi kita coba dulu yuk...kita liat dulu contohnya gambar dibawah ini...

Caranya:
1. Login ke blogger terus pilih Tata letak --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". 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://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;
}


3. Kalau sudah selesai maka ke tahap berikutnya kopi kode berikut:
<div id="tabshori">
<ul>
<li><a href="http://blogmu.blogspot.com"><span>Home</span></a></li>
<li><a href="http://blogmu.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://blogmu.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://blogmu.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://blogmu.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

4. Ganti yang berwarna biru dengan alamat blog yang kita tuju, selanjutnya kita simpan scrift diatas sesuai dengan keinginan kita mau nyimpannya dimana. Nah kalo mau disempen seperti contoh diatas maka kita cari kode seperti ini  ]]>/b:skin> lalu simpan dibawahnya. selesai deh...jangan lupa simpan template...!!









Yang laennya...



0 komentar:

Posting Komentar

home

Pengikut

 
Home | Gallery | Tutorials | Freebies | About Us | Contact Us

Copyright © 2009 Sharing Yuuk..!!! |Designed by Templatemo |Converted to blogger by BloggerThemes.Net

Usage Rights

DesignBlog BloggerTheme comes under a Creative Commons License.This template is free of charge to create a personal blog.You can make changes to the templates to suit your needs.But You must keep the footer links Intact.