-->

Membuat Tab Slick di Blogger menggunakan Java Script jQuery

Membuat Tab Slick di Blogger menggunakan Java Script jQuery

Banyak cara yang digunakan untuk Membuat Tab Slick di Blogger menggunakan Java Script jQuery, oke blog akan menggunakan pada blogger agar tampilan blog lebih indah dipandang mata, caranya mudah hanya dengan copy paste aja udah bereas.
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 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>

Anda mungkin menyukai postingan ini

5 komentar

  1. Unknown
    mas, mau tanya. hasilny itu nanti munculnya dimana? di sidebar sebelah mana??
  2. Hendro Wibowo
    thank gan... bwt info nya..
    kini slick anee udah jadi..

    bwt kenalan aj neeh...
    http://www.endz4shared.co.cc/
  3. Manuk Merak
    @ Chandara : Silahkan tempatkan dimana sesuai keinginan Anda, baik pada sidebar kanan (right-sidebar), sidebar kiri (left-sidebar) atau main-sidebar blog Anda ,.
  4. Manuk Merak
    Yth. Hendro Wibowo,
    Trimakasih telah berkunjung di blog saya, dan ternyata setelah saya kunjungi blog anda penuh dengan inspiratif !
  5. hery "Cool"gunawan
    isin di coba di blog ku yach
    fotografiikm.blogspot.com
  1. Untuk menyisipkan sebuah kode gunakan <i rel="pre">code_here</i>
  2. Untuk menyisipkan sebuah quote gunakan <b rel="quote">your_qoute</b>
  3. Untuk menyisipkan gambar gunakan <i rel="image">url_image_here</i>