Tutorial Keren Cara Membuat Widget Tab View menu jQuery

Sekedar sharing aja yang masih bingung dalam membuat seperti ini:

DEMO

DOWNLOAD <<<<< silahkan download javascriptnya disini

Saya akan berbagi tentang cara membuat tab menu diatas.

Adapun langkah-langkahnya sebagai berikut :

1.Seperti biasa anda harus log in dulu ke blogger

2.Pilih layout

3.Kemudian pilih edit HTML

4.centang Expand Widget Templates dan backup dulu templete anda (untuk menghindari apabila terjadi kesalahan)

5.Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>

<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>  

<title>jQuery UI Tabs Demo</title>  

<link href='style.css' rel='stylesheet' type='text/css'/>  

<script src='http://h1.ripway.com/faencool/tab%20wedget%20blog/1/jquery-1.2.6.min.js' type='text/javascript'/>  

<script src='http://h1.ripway.com/faencool/tab wedget blog/1/jquery-ui-personalized-1.5.2.packed.js  ' type='text/javascript'/>  

<script src=' http://h1.ripway.com/faencool/tab wedget blog/1/sprinkle.js' type='text/javascript'/>  

seperti gambar dibawah ini:

6.Untuk css code anda bisa menggunakan code css di bawah ini copy dan pastekan diatas ]]></b:skin>

* {  
margin: 0;  
padding: 0;  
}  
  
body {  
font-size: 75%;  
color: #222;  
background: #ffffff;  
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
line-height: 1.6em;  
}  
  
.widget {  
width: 310px;  
margin: 20px;  
padding: 10px;  
background: #f3f1eb;  
border: 1px solid #dedbd1;  
margin-bottom: 15px;  
}  
  
.widget a {  
color: #222;  
text-decoration: none;  
}  
  
.widget a:hover {  
color: #009;  
text-decoration: underline;  
}  
  
.tabnav li {  
display: inline;  
list-style: none;  
padding-right: 5px;  
}  
  
.tabnav li a {  
text-decoration: none;  
text-transform: uppercase;  
color: #222;  
font-weight: bold;  
padding: 4px 6px;  
outline: none;  
}  
  
.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {  
background: #dedbd1;  
color: #222;  
text-decoration: none;  
}  
  
.tabdiv {  
margin-top: 2px;  
background: #fff;  
border: 1px solid #dedbd1;  
padding: 5px;  
}  
  
.tabdiv li {  
list-style-image: url("star.png");  
margin-left: 20px;  
}  
  
.ui-tabs-hide {  
display: none;  
}  

seperti gambar dibawah ini:

7. Dan untuk kode html,letakan kode html dibawah ini dimana anda ingin menampilkan Tab Stuktur Menu tersebut:

lalu masukkan kode dibawah ini:

<div id="tabvanilla" class="widget">


<ul class="tabnav">
<li><a href="#popular">Popular</a></li>
<li><a href="#recent">Recent</a></li>
<li><a href="#featured">Featured</a></li>
</ul>


<div id="popular" class="tabdiv">
<ul>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
</ul>
</div><!--/popular-->


<div id="recent" class="tabdiv">
<p>Lorem ipsum dolor sit amet.</p>
</div><!--/recent-->


<div id="featured" class="tabdiv">
<ul>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
</ul>
</div><!--featured-->


</div><!--/widget-->

<div style="font-size:15px;color:#888">Terimakasih Atas Kunjungannya</div>

<a href="collection-tipsfaen.blogspot.com/">collection-tipsfaen.blogspot.com/</a> | <a href="">Kembali Ke TUtorial</a>

silahkan mencoba.....
apabila ada pertanyaan silahkan posting aja dibawah....

>>Selesai baca jangan lupa jempol dan komentarnya y....