Membuat tab slick di blog . .

Berikut gambaran dan cara membuat Tab Slick di Blogger menggunakan Java Script jQuery :

• Silahkan Login dan masuk pada Edit.
• Tambahkan kode dibawah ini diatas kode </head> :

• untuk lebih mudah silahkan tekan (ctrl+f) lalu cari kata kunci di kolom kiri bawah yang sudah di sediakan..   

  
  
  
   
  

  <script src="jquery-1.3.2.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>
•  
• kalau sudah save template anda dan terettetettetttettttt ...... . . . . hasilnya sudah jadi :)
• selamat mencoba ...