Membuat tab slick di blog . .

Written By Namaqu Aoi on Tuesday, November 9, 2010 | 3:19 PM

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 ... 

0 comments:

Post a Comment