Basic Pembuatan Tabs dengan CSS & JS - Info Desain Web Terbaru!
Info Desain Web Terbaru!
4 Kang Rian 2/02/2014 01:28:00 AM Basic Pembuatan Tabs dengan CSS & JS Basic Pembuatan Tabs dengan CSS & JS

Basic Pembuatan Tabs dengan CSS & JS

Oleh. Kang Rian  •  15  •      Edit
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='https://rian-nurherdian.blogspot.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 : https://rian-nurherdian.blogspot.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 .

Kang Rian Ikuti

Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.

Cek. Jasa-Design.web.id

   

15 komentar

  1. Bisa untuk semua jenis template ya kang :)

    BalasHapus
    Balasan
    1. betul! silahkan di coba kang , kalo ada pertanyaan silahkan berkomentar :shakehand

      Hapus
  2. Kang rian cara bikin gambar lonceng yang di atas share ke blog donk kang......trims ya?

    BalasHapus
    Balasan
    1. sudah saya share kang :) , silahkan check disini Link

      Hapus
  3. trik yang cukup baik untuk menghemat tempat di blog....
    btw, ada gak tutorial cara membuat slide show and hide menu di sebelah kiri seperti yang ada di blog ini? trims

    BalasHapus
    Balasan
    1. hehe betul mba , memang seperti itu yang saya harapkan ..

      untuk tutorial menu di samping kiri ini bawaan dari template yang saya download dari website templateism.com mba :) .

      terima kasih sudah berkunjung di blog saya .

      Hapus
    2. sama-sama mas... sip, langsung menuju tkp...
      kl gak slh, dulu blog ini nuansanya hitam putih trus ada awan bergerak diatas ya.... namun, tampilan yang sekarang lebih keren

      Hapus
    3. hehe , iya dulu sempet mendung mba, sesuai dengan desain nya .. mendung dari sisi postingan , dsb. wah pokonya kelabu banget deh sama admin2 nya :D .. wkwkwk

      loh kok tau mba? , ciyee diem2 ngefans yah sama ane ? *PD BANGET* :ngakak

      Hapus
    4. hehe..... iya mas, ngefans sm trik-triknya :)

      Hapus
    5. ahaha . jadi malu :malu ..

      eh iya lupa bilang "makasih" untuk apresiasi nya . :shakehand

      Hapus
  4. ijin nyicip triknya ah

    BalasHapus
  5. yang ini bisa di pasang di blog gak mas?
    ini yang saya cari

    BalasHapus
    Balasan
    1. bisa kok mba . silahkan kalo mau di coba. semoga berhasil :)

      Hapus
  6. kok kalo di klik tabnya, tampilan halamannya jadi keatas lagi gan, kira2 masalahnya apa?

    BalasHapus

Terpopular! Minggu ini..

×