Membuat Tab Slick di Blogger menggunakan Java Script jQuery

Banyak Teori yang digunakan untuk Membuat Tab Slick di Blogger menggunakan Java Script jQuery namun saya akan berikan cara yang termudah dengan cara tinggal kopy paste aja.

Demo Tab Slick menggunakan Java Script jQuery

Berikut Cara Membuat Tab Slick di Blogger menggunakan Java Script jQuery :

• Silahkan Login dan masuk pada Edit.
• Tambahkan kode dibawah ini diatas kode </head> :
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#tab2, #tab3').hide();   
    $("ul.slick li").click(function () {
        $(".active").removeClass("active");
        $(this).addClass("active");
        $(".content-slick").slideUp();
        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();
    });
 });
</script>
  
  
  
• Salin (copy) CSS dibawah ini kemudian letakkan (paste) pada bagaian CSS Blogger ( letekkan diatas kode ]]></b:skin> ) atau buat CSS Eksternal Blogger :
  
  #slick_area {
  border:1px solid #585858;
  background-color:#141414;
  padding:8px;
  margin:10px 0;
  line-height:18px;
  width:310px;
}
#slick_area a{
  color:#FFF;
  text-decoration:none;
}
.slick_area a:hover{
  color:#FF0000;
}
ul.slick {
  margin:2px 5px 8px 0;
  padding:0px;
}
ul.slick li {
  list-style:none;
  display:inline;
  background-color:#000;
  padding:5px 14px;
  text-decoration:none;
  font-size:10px;
  font-weight:bold;
  text-transform:uppercase;
  cursor:pointer;
  border:1px solid #585858;
}
ul.slick li:hover {
  color:#FFFF00;
}
ul.slick li.active {
  background-color:#2F2F2F;
  border:1px solid #585858;

}
.content-slick {
  background-color:#2F2F2F;
  border:1px solid #585858;
  color:#dedede;
  min-height:40px;
  padding:7px 13px 5px;
  text-align:justify;
}
.content-slick ul {
  margin:2px;
  padding:0;
}
.content-slick ul li {
  list-style:none;
  border-bottom:1px solid #585858;
  padding:4px;
}
.content-slick ul li:last-child {
  border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
  display:block;
  background-color:#141414;
}
.content-slick ul li a {
  text-decoration:none;
  color:#FFF;
  display:block;
}

#komentar, #terkait { display:none; }


• Selanjutnya silahkan tambahkan kode dibawah ini pada bagian body :
  
  <div id="slick_area">

    <ul class="slick">
        <li title="tab1" class="slick active">Terbaru</li>
        <li title="tab2" class="slick">Komentar</li>
        <li title="tab3" class="slick">Terkait</li>
    </ul>

    <div id="tab1" class="content-slick">

    <ul>
      <li><a href="#">Link 1.1</a></li>
      <li><a href="#">Link 1.2</a></li>
      <li><a href="#">Link 1.3</a></li>
      <li><a href="#">Link 1.4</a></li>
    </ul>
  </div>

    <div id="tab2" class="content-slick">
    <ul>
      <li><a href="#">Link 2.1</a></li>
      <li><a href="#">Link 2.2</a></li>
      <li><a href="#">Link 2.3</a></li>
      <li><a href="#">Link 2.4</a></li>
    </ul>
  </div>

    <div id="tab3" class="content-slick">
    <ul>
      <li><a href="#">Link 3.1</a></li>
      <li><a href="#">Link 3.2</a></li>
      <li><a href="#">Link 3.3</a></li>
      <li><a href="#">Link 3.4</a></li>
    </ul>
  </div>

</div>

Referensi Artikel :

• http://modification-blog.blogspot.com/2010/06/memahami-dan-membuat-jquery-slick-tab.html
• http://www.stylebloggertemplate.blogspot.com.