Kang Rian [ on Blogger! ]

rian nurherdian, kang rian, blog kang rian, blog rian nurherdian, blogger hacks , free blogger templates, blogspot tutorial, blogger tutorial, tutorial seo, tutorial html5, blog seo friendly, modifikasi template blog, desain web pemula, blogger basic

Basic Pembuatan Tabs dengan CSS & JS

Basic Pembuatan Tabs dengan CSS & JS -
Tabs Icon PNG
Setelah lama menyimpan script ini, akhirnya ada kesempatan juga buat posting! untuk sobat yang belum paham fungsi tabs, plugin tabs ini berfungsi untuk sobat yang ingin mencoba meminimalis content dalam 1 div/area . mengapa saya bilang basic? karena disini saya akan berbagi script dasar nya saja agar sobat bisa kreasikan sendiri setelahnya.

Biar gak penasaran berikut demo nya sob :

Cara Pemasangan :

Untuk pemasangan pastikan sobat sebelumnya sudah menyimpan 1 jQuery Library, jika belum silahkan simpan kode jQuery libray di bawah ini sebelum kode </head> :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Pemasangan jQuery pada template cukup 1 saja. Apabila ada beberapa versi jQuery library, maka efek-efek tidak akan berjalan.


Langkah #1 : Simpan kode CSS di bawah ini sebelum kode </head>


<style type="text/css">
#tabmenu {
    position:relative;
    margin:5px; */ <<---- OPSIONAL */
}

li, p { font: 12px/16px Arial, Helvetica, sans-serif; }

#nav {
    overflow: hidden;
    padding-left: 0;
}

#nav li {
    float: left;
    list-style: none;
}

#nav li a {    
    padding: 10px;
    border-top: 1px solid #CCC;
    border-right: 1px solid #CCC;
    border-radius:3px 3px 0px 0px;
    display: block;
    background: #eee;
    text-decoration:none;
}

#nav li a:hover {
background:#e5e5e5;
}
#nav li:first-child a {
    border-left: 1px solid #CCC;
}

#tab-konten {
    border: 1px solid #CCC;
    border-radius:0px 0px 5px 5px;
    padding: 10px;
    width: 95%;
    margin-top: -1px;
    -moz-border-radius: 0 0 5px 5px;
    box-shadow:0px 5px 3px #eee;
}

#nav li a.active {
    background: #FFF;

}
</style>


Langkah #2 : Simpan kode Javascript di bawah ini tepat di atas kode </body> :


<script type='text/javascript'>
//<![CDATA[
$('#tab-konten div').hide();
$('#tab-konten div:first').show();

$('#nav li').click(function() {
    $('#nav li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('#tab-konten div').hide();

    var indexer = $(this).index();
    $('#tab-konten div:eq(' + indexer + ')').fadeIn(1000); 
});
//]]>
</script>


Penulisan Pada HTML

Langkah Terakhir : Simpan pada area posting / widget di halaman Blog sobat.


<div id="tabmenu">
    
    <ul id="nav">
        <li><a href="#" class="active">Tab ke-1</a></li>
        <li><a href="#">Tab ke-2</a></li>
        <li><a href="#">Tab ke-3</a></li>
        <li><a href="#">Tab ke-4</a></li>
        <li><a href="#">Terakhir!</a></li>
    </ul>
    
    <div id="tab-konten">
        
        <div id="tab1">
            <p>Ini adalah isi dari Tab Pertama.</p>
        </div>
        
        <div id="tab2">
            <p>dan ini adalah tab ke-2 !</p>
        </div>
        
        <!-- Batas Tab Konten -->
        
        <div id="tab3">
            <p>dan ini adalah isi dari tab ke-3 dengan menggunakan gambar di bawah ini:<br/>
                <a href='http://blog.kangrian.com' target='_blank'><img src='https://googledrive.com/host/0B7H_GQEvKCj1Rmh1blVLZV9fSlk/gambar/logo-kang-rian.png' alt='Kang Rian'/></a></p>
        </div>
     
        <!-- Batas Tab Konten -->
     
        <div id="tab4">
            <p>Ke-4? yah ke empat, dengan tambahan video :<br />
            <iframe width="250" height="180" src="http://www.youtube.com/embed/TZ860P4iTaM" frameborder="0" allowfullscreen></iframe></p>
        </div>
        
        <!-- Batas Tab Konten -->

            <div id="tab5">
                Sumber : http://blog.kangrian.com
            </div>

        <!-- Batas Tab Konten -->

    </div>
    
</div>


Coba-coba??

Untuk mencoba dan praktek langsung sobat bisa Klik disini

Semoga Tutorial tentang Cara Membuat Tabs Sederhana / Pembuatan Basic Tabs dengan CSS & JavaScript ini bermanfaat .
Suka artikel ini? Bagikan!