Home » » Membuat Tab Menu Horizontal

Membuat 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">

body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

img {
border: none;
}

#tabs {
float:left;
width:100%;
background:#FCF1F6;
font-size:93%;
line-height:normal;
border-bottom:1px solid #E276A7;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("https://lh3.googleusercontent.com/_1j80TgNqd_8/TbJJ-3clg8I/AAAAAAAACrM/sOEs2yCR3ME/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("https://lh5.googleusercontent.com/_1j80TgNqd_8/TbJJ-tZEcLI/AAAAAAAACrI/HPnGvysoE3E/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#333;
}
#tabs a span {float:none;}

#tabs a:hover span {
color:#591333;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}

#tabs #current a {
background-position:0% -42px;
}
#tabs #current a span {
background-position:100% -42px;
}

</style>
<div id="tabs">
<ul>

<li><a href="URL/link target menu 1"><span>Menu 1</span></a></li>
<li><a href="URL/link target menu 2"><span>Menu 2</span></a></li>
<li><a href="URL/link target menu 3"><span>Menu 3</span></a></li>
<li><a href="URL/link target menu 4"><span>Menu 4</span></a></li>
<li><a href="URL/link target menu 5"><span>Menu 5</span></a></li>
<li><a href="URL/link target menu 6"><span>Menu 6</span></a></li>
<li><a href="URL/link target menu 7"><span>Menu 7</span></a></li></ul>
</div>

NB: anda bisa mengganti teks yang bewarna merah dengan selera dan kebutuhan anda masing masing

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
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .