Tab Menu Horizontal

Caranya adalah sebagai berikut :

1. Login ke akun Blog anda.
2. Pilih Rancangan, Add Gadget kemudian klik HTML/Java Script.
3. Copy Paste script di bawah ini ke dalam gadget HTML/Java Script anda.

<style type="text/css">
#navcontainer {
background: #369;
border-top: 1px solid #9CC;
font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#navlist {
list-style: none outside none;
margin: 0;
padding: 0;
}

@media all {
#navlist {
text-align: center
}
}

#navlist li {
bottom: 11px;
display: inline;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;
}

html>body
#navlist li {
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;
}

#navlist a, #navlist a:link, #navlist a:visited {
background: #900;
border: 1px solid #FFF;
bottom: 2px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}

#navlist a:hover {
background: #C00;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}

#navlist a:active {
background: #999;
bottom: 0px;
color: #FFF;
position: relative;
right: 0px;
}

#navlist li#active {
background: #369;
bottom: 13px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}

html>body
#navlist li#active {
background: #000;
margin: 0 4px 0 4px;
}

#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover {
background: #369;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 0;
color: #FFF;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}

</style>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a id="current" href="URL/alamat menu 1">Menu 1</a></li>
<li><a href="URL/alamat menu 2">Menu 2</a></li>
<li><a href="URL/alamat menu 3">Menu 3</a></li>
<li><a href="URL/alamat menu 4">Menu 4</a></li>
<li><a href="URL/alamat menu 5">Menu 5</a></li>
<li><a href="URL/alamat menu 6">Menu 6</a></li>
<li><a href="URL/alamat menu 7">Menu 7</a></li></ul>
</div>

NB: Tukar teks bewarna merah sesuai keinginan anda .

4. Save

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's

Related Post