Tab View jQuery dengan Icon

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Tutorial kali ini saya akan membahas tentang Tab View jQuery dengan Icon. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP

Tab View jQuery dengan IconKlik disini untuk melihat demo Tab View jQuery dengan Icon

1. Masuk ke akun blogger anda
2. Klik rancangan, kemudian Edit HTML
3. Pada Edit HTML, centang Expand Template Widget
   Expand Template Widget
4. Copy kode CSS di bawah ini

/* Begin Tab View jQuery Icon */ 
#tabMenu{
margin:0;
padding:0 0 0 15px;
list-style:none;
}
#tabMenu li{
float:left;
height:32px;
width:39px;
cursor:pointer;
cursor:hand
}
li.comments{
background:url(http://i766.photobucket.com/albums/xx310/Ikhfar/th_tabComment.png) no-repeat 0 -32px;}
li.posts {background:url(http://i766.photobucket.com/albums/xx310/Ikhfar/th_tabStar.png) no-repeat 0 -32px;}
li.category {background:url(http://i766.photobucket.com/albums/xx310/Ikhfar/th_tabFolder.png) no-repeat 0 -32px;}
li.famous {background:url(http://i766.photobucket.com/albums/xx310/Ikhfar/th_tabHeart.png) no-repeat 0 -32px;}
li.random {background:url(http://i766.photobucket.com/albums/xx310/Ikhfar/th_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://i766.photobucket.com/albums/xx310/Ikhfar/th_boxTop.png)no-repeat;
height:11px;
clear:both
}
.boxBody{background-color:#282828;}
.boxBottom{
background:url(http://i766.photobucket.com/albums/xx310/Ikhfar/th_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://i766.photobucket.com/albums/xx310/Ikhfar/th_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;
}
/* End Tab View jQuery Icon */ 

5. Kemudian letakkan di atas kode

</b:skin>

6. Tambahkan framework jQuery.
   INGAT, jika pada template anda sudah terdapat framework jQuery, maka kode di bawah ini TIDAK PERLU di tambahkan.
   Jika belum terdapat framework jQuery, maka copy kode di bawah ini

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

kemudian letakkan di atas

</head>

7. Selanjutnya tambahkan script di bawah ini

<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');
    
    //After cleared all the LI, reassign the class to the selected tab
    $(this).addClass('selected');
    
    //Hide all the DIV in .boxBody
    $('.boxBody div').slideUp('1500');
    
    //Look for the right DIV index based on the Navigation UL index
    $('.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, 
    //if you have better ideas to toggle it, please comment    
    $(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').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).find("a").attr("href");
  }).mouseover(function() {
    $(this).css('backgroundColor','#888');
  }).mouseout(function() {
    $(this).css('backgroundColor','');
  });   
 
});
</script>

8. Kemudian letakkan di atas

</head>

9. Simpan template
10. Kemudian masuk Elemen Laman, dan pilih Tambah Gadget
11. Setelah itu pilih HTML/Javascript
12. Copy kode ini pada kotak kontent

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

13. Kemudian simpan

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait