Home / CSS / JavaScript / Basic Pembuatan Tabs dengan CSS & JS

Cara Download Basic Pembuatan Tabs dengan CSS & JS Update Terbaru

Sedikit Info Seputar Basic Pembuatan Tabs dengan CSS & JS Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Basic Pembuatan Tabs dengan CSS & JS, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel CSS, Artikel JavaScript, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Basic Pembuatan Tabs dengan CSS & JS Terbaru
link: Basic Pembuatan Tabs dengan CSS & JS

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Basic Pembuatan Tabs dengan CSS & JS Terbaru dan Terlengkap 2017

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 .

Itulah sedikit Artikel Basic Pembuatan Tabs dengan CSS & JS terbaru dari kami

Semoga artikel Basic Pembuatan Tabs dengan CSS & JS yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Basic Pembuatan Tabs dengan CSS & JS

Share this