Trik Membuat Tabview dengan JQuery

Tabview atau biasa disebut kotak kecil yang menghemat ruang blog.bisa berisi apa saja.misalnya:link friends,daftar isi,download,recent comment,dsb.Trik membuat tabview dengan menggunakan Jquery ini sangat simple.kekurangannya adalah apabila kita terlalu banyak kode Jquery dalam blog kita,blog kita akan terasa berat loadingnya.untuk itu gunakan saja widget yang penting-penting dan hapus saja kalo tidak ada manfaatnya.mempercantik blog memang penting,tapi manfaatkanlah yang mempunyai manfaat.jadi tidak sekedar indah dilihat.

Trik membuat tabview dengan Jquery ini tidak berlaku untuk wordpress.com karena blog ini antijava.Trik ini berlaku untuk blogspot dan blog yang sudah menyupport java script.klik lin dibawah ini untuk melihat bentuknya.

jquery

Cara membuatnya sbb:

  • Login ke akun <a href=”http://blogger.com”>Blogger.com</a&gt; anda
  • Pada dasbor <a href=”https://fjr1.wordpress.com”>Blog</a&gt; pilih edit tata letak
  • Masuk pada Edit html dan copykan kode berikut sebelum </head><script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&#8217; type=’text/javascript’/>
    $(document).ready(function(){$(&quot;.tab_content&quot;).hide();$(&quot;ul.tabs li:first&quot;).addClass(&quot;active&quot;).show();$(&quot;.tab_content:first&quot;).show();$(&quot;ul.tabs li&quot;).click(function(){$(&quot;ul.tabs li&quot;).removeClass(&quot;active&quot;);$(this).addClass(&quot;active&quot;);$(&quot;.tab_content&quot;).hide();var activeTab=$(this).find(&quot;a&quot;).attr(&quot;href&quot;);$(activeTab).fadeIn(800)})});
  • Masukan kode HTML berikut sebelum <div id=’footer-wrapper’>
    <div class=’pageTabs’>
    <h1>Demo Content Tabs</h1>
    <ul class=’tabs’>
    <li><a href=’#tab1′>Tab1</a></li>
    <li><a href=’#tab2′>Tab2</a></li>
    <li><a href=’#tab3′>Tab3</a></li>
    <li><a href=’#tab4′>Tab4</a></li></ul>
    <div class=’tab_container’>

    <div class=’tab_content’ id=’tab1′>
    <h2>Tab1</h2>
    Disini tempat kode1
    </div>
    <div class=’tab_content’ id=’tab2′>
    <h2>Tab2</h2>
    Disini tempat kode2
    </div>
    <div class=’tab_content’ id=’tab3′>
    <h2>Tab3</h2>
    Disini tempat kode3
    </div>
    <div class=’tab_content’ id=’tab4′>
    <h2>Tab4</h2>
    Disini tempat kode4
    </div>
    </div>
    </div>

  • Masukan kode CSS berikut sebelum ]]</b:skin>
    /* pageTabs
    */

    .pageTabs {width: 760px; height:150px; margin: 10px auto 0; font-size:11px;}

    ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
    }
    ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px;
    line-height: 31px;
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px;
    background: #e0e0e0;
    overflow: hidden;
    position: relative;
    }
    ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff;
    outline: none;
    }
    ul.tabs li a:hover {
    background: #ccc;
    }
    html ul.tabs li.active, html ul.tabs li.active a:hover {
    background: #fff;
    border-bottom: 1px solid #fff;
    }
    .tab_container {
    border: 1px solid #999;
    border-top: none;
    clear: both;
    float: left;
    width: 100%;
    background: #fff;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    }
    .tab_content {
    padding: 20px;
    font-size: 1.2em;
    }
    .tab_content h2 {
    font-weight: normal;
    padding-bottom: 5px;
    border-bottom: 1px dashed #ddd;
    font-size: 1.8em;
    }
    .tab_content h3 a{
    line-height: 2em;
    color: #254588;
    }
    .tab_content img {
    float: left;
    margin: 10px 20px 20px 0;
    border: 1px solid #ddd;
    padding: 5px;
    }
    .tab_content p {
    padding-bottom:10px;
    }</div>

  • Catatan: kode css ini perlu anda sesuaikan dengan karakter template anda5. Save template, selesai🙂

Ingat..!!..Trik ini berlaku pada blog di <a href=”http://this-trik.blogspot.com”&gt; blogspot</a> bukan diwordpress..:D


Trik Membuat Tabview dengan JQuery

7 thoughts on “Trik Membuat Tabview dengan JQuery

Comments are closed.