jQuery ZenTabs

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

Tutorial kali ini saya akan membahas tentang jQuery ZenTabs. 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

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 jQuery ZenTabs */
.zentabs {}
.onetab {width:300px;}
.tabtitle {}
.tabcontent {}
.zentabs_live {width:300px;}
.zentabs_ul {
margin:0px;
padding:0px;
padding:10px;
padding-left:5px;
padding-bottom:5px;
border-bottom:1px solid #e1e1e1;
margin-bottom:0px;
}
.zentabs_ul li {
margin:0px;
padding:0px;
display:inline;
margin-right:2px;
}
.zentabs_ul li a,.zentabs_ul li a:link,.zentabs_ul li a:visited {
padding:7px;
padding-left:9px;
padding-right:9px;
background:#1D8BAF;
border:1px solid #22819E;
border-bottom:0px;
font-family:tahoma;
font-size:11px;
font-weight:bold;
color:#fff
}
.zentabs_ul li a.current,.zentabs_ul li a.current:link,.zentabs_ul li a.current:visited {
background:#fff;
color:#222222;
border:1px solid #e1e1e1;
border-bottom:0px;
}
.tabcontent_wrapper {
width:300px;
border:1px solid #e1e1e1;
border-top:0px solid #e1e1e1;
}
.zentabs_live .tabcontent {
line-height:17px;
padding:5px;
background:#fff;
}
/* End jQuery ZenTabs */

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">
//animation style for zentabs (fade, slide or none)
var zentabs_animation_style = 'fade';

//animation speed for zentabs (fast, normal, slow or time in milliseconds) - only for fade and slide
//if you are using time milliseconds, don't include the single quote
var zentabs_animation_speed = 'slow';

var $zentabs = jQuery.noConflict();
$zentabs(document).ready(function() {
var nth_zentabs = 0;
var zentabs_firsttab = [];

if (!zentabs_animation_speed) {
zentabs_animation_speed = 'slow';
}
 
$zentabs('.zentabs').each( function() {
var gettabtitle = [],gettabcontent = [];
zentabs_firsttab[nth_zentabs] = 0;
var loop = 0;
  
  $zentabs(this).find('.onetab').each( function () {
    if ($zentabs(this).hasClass('firsttab')) {
      zentabs_firsttab[nth_zentabs] = loop;
    }
    loop++;
  });
  
  $zentabs(this).find('.onetab').find('.tabtitle').each( function () {
    gettabtitle.push($zentabs(this).html());
  });
    
  $zentabs(this).find('.onetab').find('.tabcontent').each( function () {
    gettabcontent.push($zentabs(this).html());
  });
    
  if (gettabtitle.length > 0) {
    var htmlcodes = '<ul class="zentabs_ul">';
  
    for (var i=0;i<gettabtitle.length;i++) {
      htmlcodes += '<li><a href="javascript:void(null)" class="t'+i+'">'+gettabtitle[i]+'</a></li>';
    }
  
    htmlcodes += '</ul><div class="tabcontent_wrapper">';
  
    for (var i2=0;i2<gettabcontent.length;i2++) {
      htmlcodes += '<div class="tabcontent">'+gettabcontent[i2]+'</div>';
    }
  
    htmlcodes += '</div>';
  
    $zentabs(this).removeClass('zentabs').addClass('zentabs_live').attr('id','zentabs_id_'+nth_zentabs).html(htmlcodes);

    $zentabs(this).find('.tabcontent').not(':eq('+zentabs_firsttab[nth_zentabs]+')').hide();
    $zentabs(this).find('.zentabs_ul li  a').eq(zentabs_firsttab[nth_zentabs]).addClass('current');
   
  }

nth_zentabs++;  
});

  $zentabs('.zentabs_live').find('.zentabs_ul > li > a').click( function(event) {
    var currzentab = $zentabs(this).parent('li').parent('ul').parent('.zentabs_live');
    var currid = currzentab.attr('id').replace('zentabs_id_','');
    
    var currnth = $zentabs(this).attr('class').replace('t','');
    var childnum = parseInt(currnth);
    if (zentabs_firsttab[currid] == childnum) { event.preventDefault(); return false; }
    
    currzentab.find('.zentabs_ul li  a').removeClass('current');
    
    if (currzentab.find('.tabcontent').is(':animated')) { 
      //something is animating
      currzentab.find('.tabcontent').is(':animated').stop(true,true);
    }
    
    //zentabs_animation_speed = 'slow';
    switch (zentabs_animation_style) {
      case 'fade':
      currzentab.find('.tabcontent:eq('+zentabs_firsttab[currid]+')').fadeOut(zentabs_animation_speed, function() {
        currzentab.find('.tabcontent:eq('+childnum+')').fadeIn(zentabs_animation_speed);
        currzentab.find('.zentabs_ul li').eq(childnum).children('a').addClass('current');
      }); 
      break;
      case 'none':
      currzentab.find('.tabcontent:eq('+zentabs_firsttab[currid]+')').hide(10, function() {
        currzentab.find('.tabcontent:eq('+childnum+')').show();
        currzentab.find('.zentabs_ul li').eq(childnum).children('a').addClass('current');
      }); 
      break;
      default:
      currzentab.find('.tabcontent:eq('+zentabs_firsttab[currid]+')').slideUp(zentabs_animation_speed, function() {
        currzentab.find('.tabcontent:eq('+childnum+')').slideDown(zentabs_animation_speed);
        currzentab.find('.zentabs_ul li').eq(childnum).children('a').addClass('current');
      }); 
      break;
    }   
    
    zentabs_firsttab[currid] = childnum;
    event.preventDefault(); //return false;
  });
  

    
});</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="zentabs">
<div class="onetab firsttab">
<h2 class="tabtitle">Tab 1</h2>
<div class="tabcontent">ISI CONTENT TAB1</div>
</div>

<div class="onetab">
<h2 class="tabtitle">Tab 2</h2>
<div class="tabcontent">ISI CONTENT TAB2</div>
</div>

<div class="onetab">
<h2 class="tabtitle">Tab 3</h2>
<div class="tabcontent">ISI CONTENT TAB3</div>
</div>

<div class="onetab">
<h2 class="tabtitle">Tab 4</h2>
<div class="tabcontent">ISI CONTENT TAB4</div>
</div>

</div>

13. Kemudian simpan

Cara mengganti efek dan kecepatan pada jQuery ZenTab

• Pada nomor 7 baris 003, 080

var zentabs_animation_style = 'fade';

case 'fade':

pilihannya bisa diganti dengan slide atau fade
• Masih pada nomor 7, baris 007, 015, 078

var zentabs_animation_speed = 'slow';

zentabs_animation_speed = 'slow';

//zentabs_animation_speed = 'slow';

pilihannya bisa diganti dengan slow, normal, fast

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

Artikel Terkait