Cara Membuat Widget Tab View jQuery

 

Hal pertama yang harus anda lakukan adalah:
»» Login Blogger
»» Pilih Design
»» Edit HTML
»» Cek list Expand Template Widget
»» Cari kode </head> jika anda kesulitan untuk mencari kode tersebut, silahkan gunakan jalan pintas dengan cara menekan tombol Crtl+F kemudian copy paste kode yang ingin anda cari pada kotak yang telah tersedia.
»» Jika sudah menemukan kode
»» Tambahkan Script JQuery sebelum kode </head>
»» Script JQuery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

»» Perhatian! Jika anda pernah menambahkan Script JQuery, maka abaikan saja cara pemasangan Script JQuery diatas, kemudian lanjutkan dengan langkah selanjutnya.
»» Tambahkan kode:

<script type='text/javascript'>

$(document).ready(function() {

//Get all the LI from the #tabMenu UL

$(&#39;#tabMenu &gt; li&#39;).click(function(){

//perform the actions when it&#39;s not selected

if (!$(this).hasClass(&#39;selected&#39;)) {

//remove the selected class from all LI

$(&#39;#tabMenu &gt; li&#39;).removeClass(&#39;selected&#39;);

//Reassign the LI

$(this).addClass(&#39;selected&#39;);

//Hide all the DIV in .boxBody

$(&#39;.boxBody div&#39;).slideUp(&#39;1500&#39;);

//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.

$(&#39;.boxBody div:eq(&#39; + $(&#39;#tabMenu &gt; li&#39;).index(this) + &#39;)&#39;).slideDown(&#39;1500&#39;);

}

}).mouseover(function() {

//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest

$(this).addClass(&#39;mouseover&#39;);

$(this).removeClass(&#39;mouseout&#39;);

}).mouseout(function() {

//Add and remove class

$(this).addClass(&#39;mouseout&#39;);

$(this).removeClass(&#39;mouseover&#39;);

});

//Mouseover with animate Effect for Category menu list

$(&#39;.boxBody #category li&#39;).click(function(){

//Get the Anchor tag href under the LI

window.location = $(this).children().attr(&#39;href&#39;);

}).mouseover(function() {

//Change background color and animate the padding

$(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);

$(this).children().animate({paddingLeft:&quot;20px&quot;}, {queue:false, duration:300});

}).mouseout(function() {

//Change background color and animate the padding

$(this).css(&#39;backgroundColor&#39;,&#39;&#39;);

$(this).children().animate({paddingLeft:&quot;0&quot;}, {queue:false, duration:300});

});

//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.

$(&#39;#.boxBody li&#39;).click(function(){

window.location = $(this).children().attr(&#39;href&#39;);

}).mouseover(function() {

$(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);

}).mouseout(function() {

$(this).css(&#39;backgroundColor&#39;,&#39;&#39;);

});

});

</script>

di bawah Script JQuery tadi.
»» Selanjutnya cari kode ]]></b:skin>
»» Jika sudah di temukan, tambahkan kode berikut:

#tabMenu {margin:0; padding:0 0 0 15px;list-style:none;}

#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}

/* this is the button images http://amatullah83.blogspot.com*/

li.comments {background:url(http://sites.google.com/site/amatullah83/bg/tabComment.png) no-repeat 0 -32px;}

li.posts {background:url(http://sites.google.com/site/amatullah83/bg/tabstar.png) no-repeat 0 -32px;}

li.category {background:url(http://sites.google.com/site/amatullah83/bg/tabFolder.png) no-repeat 0 -32px;}

li.famous {background:url(http://sites.google.com/site/amatullah83/bg/tabHeart.png) no-repeat 0 -32px;}

li.random {background:url(http://sites.google.com/site/amatullah83/bg/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://sites.google.com/site/amatullah83/bg/boxTop.png)no-repeat;height:11px;clear:both}

.boxBody {background-color:#282828;}

.boxBottom {background:url(http://sites.google.com/site/amatullah83/bg/boxBottom.png) no-repeat;

height:11px;}

.boxBody div {display:none;}

.boxBody div.show {display:block;}

.boxBody #category a {display:block}

/* styling for the content*/

.boxBody div ul { margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://sites.google.com/site/amatullah83/bg/arrow.gif)}

.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;font-size:10px; color:#DDDDDD;text-decoration: none;}

.boxBody div ul li.last {border-bottom:none}

.boxBody div li a{font-size:10px; color:#DDDDDD;text-decoration: none;}

.boxBody div li span { font-size:8px;color:#9F9F9F;}

/* IE Hacks */

*html .boxTop {margin-bottom:-2px;}

*html .boxBody div ul {margin-left:10px;padding-left:15px;}

diatas kode ]]></b:skin>
Kalo udah selesai jangan lupa di save ya ??
Eit, tunggu dulu.... Kita belum selesai nih...
Okeh, kita langsung loncat pada langkah selanjutnya ya?
Masih pada menu tata letak»» elemen laman»» tambah gadget»» Pilih HTML/JavaScript kemudian masukan kode berikut:

<div class="box">

<ul id="tabMenu">

<li class="posts selected"></li> <!-- default button-->

<li class="comments"></li>

<li class="category"></li>

<li class="famous"></li>

<li class="random"></li>

</ul>

<div class="boxTop"></div>

<div class="boxBody">

<!-- default page-->

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

<ul>

<li>Post 1</li>

<li>Post 2</li>

<li class="last">Post 3</li>

</ul>

</div>

<div id="comments">

<ul>

<li>Comment 1</li>

<li>Comment 2</li>

<li class="last">Comment 3</li>

</ul>

</div>

<div id="category">

<ul>

<li>Category 1</li>

<li>Category 2</li>

<li class="last">Category 3</li>

</ul>

</div>

<div id="famous">

<ul>

<li>Famous post 1</li>

<li>Famous post 2</li>

<li class="last">Famous post 3</li>

</ul>

</div>

<div id="random">

<ul>

<li>Random post 1</li>

<li>Random post 2</li>

<li class="last">Random post 3</li>

</ul>

</div>

</div>

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

</div>

Nah kalo udah, save dan lihat hasilnya :P