Membuat Tab Slick di Blogger menggunakan Java Script jQuery

Tab Slick jQueryBanyak 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.

Live Demo

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>
  • Letakkan kode CSS dibawah ini diatas kode ]]></b:skin> atau buat CSS Eksternal Hosting:
    #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>

Membuat Tab Slick di Blogger menggunakan Java Script jQuery
  1. mas, mau tanya. hasilny itu nanti munculnya dimana? di sidebar sebelah mana??

    ReplyDelete
  2. thank gan... bwt info nya..
    kini slick anee udah jadi..

    bwt kenalan aj neeh...
    http://www.endz4shared.co.cc/

    ReplyDelete
  3. @ Chandara : Silahkan tempatkan dimana sesuai keinginan Anda, baik pada sidebar kanan (right-sidebar), sidebar kiri (left-sidebar) atau main-sidebar blog Anda ,.

    ReplyDelete
  4. Yth. Hendro Wibowo,
    Trimakasih telah berkunjung di blog saya, dan ternyata setelah saya kunjungi blog anda penuh dengan inspiratif !

    ReplyDelete
  5. isin di coba di blog ku yach
    fotografiikm.blogspot.com

    ReplyDelete