Tutorial Keren Cara Membuat Widget Tab View menu jQuery 3

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>

<script src='http://tab-menu.googlecode.com/files/jquery-1.3.1.min.js' type='text/javascript'/>
<script type="text/javascript">

$(document).ready(function() {


//Get all the LI from the #tabMenu UL
$('#tabMenu > li').click(function(){

//perform the actions when it's not selected
if (!$(this).hasClass('selected')) {

//remove the selected class from all LI
$('#tabMenu > li').removeClass('selected');

//Reassign the LI
$(this).addClass('selected');

//Hide all the DIV in .boxBody
$('.boxBody div').slideUp('1500');

//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

}

}).mouseover(function() {

//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
$(this).addClass('mouseover');
$(this).removeClass('mouseout');

}).mouseout(function() {

//Add and remove class
$(this).addClass('mouseout');
$(this).removeClass('mouseover');

});

//Mouseover with animate Effect for Category menu list
$('.boxBody #category li').click(function(){

//Get the Anchor tag href under the LI
window.location = $(this).children().attr('href');
}).mouseover(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','#888');
$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
}).mouseout(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','');
$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
});

//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
$('#.boxBody li').click(function(){
window.location = $(this).children().attr('href');
}).mouseover(function() {
$(this).css('backgroundColor','#888');
}).mouseout(function() {
$(this).css('backgroundColor','');
});

});

</script>

seperti gambar dibawah ini:

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

body{font-family:arial;font-size:10px;color:#ccc;background-color:#555}
a {color:#ccc;text-decoration:none;}
a:hover {color:#ccc;text-decoration:none}
#tabMenu {margin:0;padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:30px;cursor:pointer;cursor:hand}

li.comments {background:url(http://tab-menu.googlecode.com/files/tabComment.gif) no-repeat 0 -32px;}
li.posts {background:url(http://tab-menu.googlecode.com/files/tabStar.gif) no-repeat 0 -32px;}
li.category {background:url(http://tab-menu.googlecode.com/files/tabFolder.png) no-repeat 0 -32px;}
li.famous {background:url(http://tab-menu.googlecode.com/files/tabHeart.png) no-repeat 0 -32px;}
li.random {background:url(http://tab-menu.googlecode.com/files/tabRandom.png) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

.box {width:227px}
.boxTop {background:url(http://tab-menu.googlecode.com/files/boxTop.png) no-repeat;height:11px;clear:both}
.boxBody {background-color:#282828;}
.boxBottom {background:url(http://tab-menu.googlecode.com/files/boxBottom.png) no-repeat;height:11px;}

.boxBody div {display:none;}
.boxBody div.show {display:block;}

.boxBody div ul {margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://tab-menu.googlecode.com/files/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li span {font-size:8px;font-style:italic; color:#888;}

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 class="box">
<ul id="tabMenu">
<li class="posts selected"></li>
<li class="comments"></li>
<li class="category"></li>
<li class="famous"></li>
<li class="random"></li>
</ul>
<div class="boxTop"></div>

<div class="boxBody">

<div id="posts" class="show">

<ul>
<li><a href="http://bambangpage.blogspot.com/2009/12/cara-membuat-jquery-slideshow-dengan.html">Cara Membuat Jquery Slideshow Dengan Cycle Plug In</a></li>
<li>Cara Membuat Simple JQuery Image Slide Show dengan Semi Transparent Caption</li>
<li>Cara Menghindari Spasi Di atas Table Di Postingan Blogger</li>
<li>Cara Membuat Menu Multi Kolom dengan Tab Slide mode</li>
<li>Cara Membuat News Update dengan gAjax RSS Ticker Pada Blog Atau Website anda</li>
<li>Cara Menambahkan Icon Atau image Disamping Title Sidebar</li>
<li>Cara Membuat Facebox Image Viewer</li>
<li>Cara Membuat Tulisan Berjalan Pada Address Bar</li>
<li class="last">Mengganti Kotak Komentar Haloscan menjadi Comment box Blogspot</li>
</ul>
</div>

<div id="comments">
<ul>
<li>Mengganti Kotak Komentar Haloscan menjadi Comment box Blogspot</li>
<li>Cara Membuat Kotak Komentar Blogger Dibawah Postingan</li>
<li>10 jQuery and non-jQuery javascript Rich Text Editors</li>
<li class="last">Mengganti Tulisan "Older Post / Newer Post" atau "Posting Lama / Posting Baru"</li>
</ul>
</div>

<div id="category">
<ul>
<li>Cara Mengganti Tanggal Postingan dg Icon Calendar</li>
<li class="last">Cara Menampilkan Postingan Terbaru Pada blogspot</li>
</ul>
</div>

<div id="famous">
<ul>
<li>Simple JQuery Modal Window Tutorial.</li>
<li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
<li>Navigation List menu + Jquery Animate Effect Tutorial.</li>

<li class="last">Exclusive RSS Icons from Queness.</li>
</ul>
</div>

<div id="random">
<ul>
<li>50 Monochromatic Website Designs.</li>
<li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
<li>Simple JQuery Modal Window Tutorial.</li>

<li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
<li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
<li>Exclusive RSS Icons from Queness.</li>
<li>New Smashing Freebies For Designers and Bloggers.</li>
<li class="last">Food Plates and Creative Dishware Designs.</li>
</ul>
</div>


</div>

<div class="boxBottom"></div>

</div>

<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....