Oke gimana kbr teman2, sekarang kita akan membahas cara membuat navigasi Horisontal tab 10,yang saya pelajari dari blog kang Rohman, mungkin sebagian teman2 udah tau..., yang belum tau sekali lagi kita bahas di sini gimana cara membuat nya, atau mungkin ada yang belum tau ini saya kasih screen shot nya
yang ada garis merah nya.. oke kelihatan nggak?. pastih liat.hahahaaa
Step 1
1. cari kode ini ]]></b:skin> kalo sudah ketemu, taruh kode dibawah ini persis di atas nya
/*- Menu Tabs 10--------------------------- */
/*credits : http://www.exploding-boy.com */
#tabs10 {
float:left;
width:95%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabs10 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs10 li {
display:inline;
margin:0;
padding:0;
}
#tabs10 a {
float:left;
background:url("http://i677.photobucket.com/albums/vv135/mambu/tab2.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs10 a span {
float:left;
display:block;
background:url("http://i677.photobucket.com/albums/vv135/mambu/tab1.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabs10 a span {float:none;}
/* End IE5-Mac hack */
#tabs9 a:hover span {
color:#FFF;
}
#tabs10 a:hover {
background-position:0% -42px;
}
#tabs10 a:hover span {
background-position:100% -42px;
}
#tabs10 #current a {
background-position:0% -42px;
}
#tabs10 #current a span {
background-position:100% -42px;
}
kemudian Simpan....
2. lalu cari code 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>
3. di ubah menjadi
<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>
kemudian Save Template.
Step 2
1. sekarang masuk ke elemen halaman.
2. Klik tambah elemen yang ada di header
3. terus klik to HTML/JavaScript.
4. terus masukin code di bawah ini.
<div id="tabs10"> <!-- tabs10 begin -->
<ul>
<!-- Change the links with your own links -->
<li id="current"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="Support.html"><span>Support</span></a></li>
<li><a href="#"><span>Order</span></a></li>
</ul>
</div ><!-- tabs10 end -->
5. terus simpan dah..
selamat mencoba, artikel ini aku pelajari dari Blog kang Rohman
READ MORE - Menu Horisontal Tab 10
yang ada garis merah nya.. oke kelihatan nggak?. pastih liat.hahahaaa
Step 1
1. cari kode ini ]]></b:skin> kalo sudah ketemu, taruh kode dibawah ini persis di atas nya
/*- Menu Tabs 10--------------------------- */
/*credits : http://www.exploding-boy.com */
#tabs10 {
float:left;
width:95%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabs10 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs10 li {
display:inline;
margin:0;
padding:0;
}
#tabs10 a {
float:left;
background:url("http://i677.photobucket.com/albums/vv135/mambu/tab2.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs10 a span {
float:left;
display:block;
background:url("http://i677.photobucket.com/albums/vv135/mambu/tab1.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabs10 a span {float:none;}
/* End IE5-Mac hack */
#tabs9 a:hover span {
color:#FFF;
}
#tabs10 a:hover {
background-position:0% -42px;
}
#tabs10 a:hover span {
background-position:100% -42px;
}
#tabs10 #current a {
background-position:0% -42px;
}
#tabs10 #current a span {
background-position:100% -42px;
}
kemudian Simpan....
2. lalu cari code 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>
3. di ubah menjadi
<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>
kemudian Save Template.
Step 2
1. sekarang masuk ke elemen halaman.
2. Klik tambah elemen yang ada di header
3. terus klik to HTML/JavaScript.
4. terus masukin code di bawah ini.
<div id="tabs10"> <!-- tabs10 begin -->
<ul>
<!-- Change the links with your own links -->
<li id="current"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="Support.html"><span>Support</span></a></li>
<li><a href="#"><span>Order</span></a></li>
</ul>
</div ><!-- tabs10 end -->
5. terus simpan dah..
selamat mencoba, artikel ini aku pelajari dari Blog kang Rohman
