Cara Membuat Tabs view di postingan Blog

Pernahkah kalian melihat tampilan tabs yang berada di dalam sebuah post ? Mungkin ada yang pernah, ada juga yang belum. Bagi yang belum anda bisa melihat demo-nya di Bawah.

Ya, itu adalah tampilan dengan mode tabs biasanya sering kita lihat di sidebar-sedebar blog yang dijadikan tempat untuk menaruh widget, akan tetapi ini agak berbeda kali ini kita akan membuat tabs tersebut berada di dalam sebuah postingan.

• View Demo
• 
  

Tabs view di dalam postingan memang jarang dipakai, sebagian orang mungkin menganggapnya tidak terlalu berguna. Tapi bagi yang suka akan kerapihan blog ini akan sangat berguna.

Misalnya anda mempunyai sebuah artikel dengan teks yang sangat panjang, bisa menggunakan tabs view ini untuk memotongnya menjadi beberapa bagian. Atau anda ingin mengkategorikan sesuatu di dalam postingan. bisa juga memakai ini.

Dan masih banyak lagi manfaat penggunaan tabs view di dalam sebuah postingan, tergantung bagaimana anda bisa menggunakannya.

Sekarang kita akan masuk dalam pembuatan, disini kami akan memakai CSS3 Transition dan sedikit jQuery


CSS

Silahkan Copy code di bawah ini, lalu paste-kan tepat di atas ]]></b:skin>

#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  margin: 0 -15px 0 0;
 margin-right: 0.5%
}

#tabs a {
  float: left;
  position: relative;
  padding: 0 9px;
  height: 0; 
  line-height: 200px;
  text-transform: none;
  text-decoration: none;
  color: #fff;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #3D3D3D;
  border-bottom-color: #777\9;

  filter: alpha(opacity=30);    
}

#tabs a:hover,
#tabs a:focus {
  border-bottom-color: #bc360a;
  opacity: 1;
  filter: alpha(opacity=100);
}

#tabs a:focus {
  outline: 0;
}

#tabs #current {
  z-index: 3;
  border-bottom-color: #3d3d3d;
  opacity: 1;
  filter: alpha(opacity=100);
margin-bottom: 2.5%;
}

#tabs a {
  height: 0; 
  line-height: 30px;
  border-right: 30px;
  border-bottom: 30px solid #34373b;
  font-size: smaller;
}

Seperti biasa anda bisa melihat dalam pembuatan Tabs view ini sepenuhnya menggunakan CSS, tanpa adanya gambar, dibuat dengan sedikit mungkin, dan menggunakan CSS3 Transition untuk efek perpindahan antara tab satu dengan lainnya. Di sini anda bisa mengubah warna tabs sesuai selera anda, perhatikan code CSS di atas.

#34373b: Kode warna yang digunakan untuk warna Tabs, silahkan ganti sesuai selera anda.

#bc360a: Kode warna yang digunakan untuk efek hover tabs, silahkan ganti sesuai selera anda.


jQuery

Bagi anda yang templatenya belum terdapat code jquery seperti di bawah ini bisa mencopy-nya, untuk yang sudah ada maka tidak perlu menaruh lagi.

Silahkan copy code di bawah ini, lalu paste-kan tepat di atas </body>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

Penambahan kembali jQuery, code ini berguna untuk memfungsikan perpindahan tabs tanpa harus me-refresh halaman.

Silahkan copy code di bawah ini lalu paste-kan tepat di atas code </body>

<script>
$(document).ready(function() {
    $("#content").find("[id^='tab']").hide(); // Hide all content
    $("#tabs li:first").attr("id","current"); // Activate the first tab
    $("#content #tab1").fadeIn(); // Show first tab's content
    
    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return;       
        }
        else{             
          $("#content").find("[id^='tab']").hide(); // Hide all content
          $("#tabs li").attr("id",""); //Reset id's
          $(this).parent().attr("id","current"); // Activate this
          $('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab
        }
    });
});
</script>

HTML

<ul id="tabs">
    <li><a href="#" name="tab1">tab1</a></li>
    <li><a href="#" name="tab2">tab2</a></li>
    <li><a href="#" name="tab3">tab3</a></li>
    <li><a href="#" name="tab4">tab4</a></li>    
</ul>

<div id="content"> 
    <div id="tab1">Konten yang ingin ditulis</div>
    <div id="tab2">Konten yang ingin ditulis</div>
    <div id="tab3">Konten yang ingin ditulis</div>
    <div id="tab4">Konten yang ingin ditulis</div>
</div>

Silahkan copy code HTML dan taruh di mode HTML bukan di Compose.
HTML di atas saya buatkan untuk 4 tabs, untuk mengurangi jumlah tabs anda bisa langsung menghapus salah satu code yang berada di bawah <ul id="tabs"> dan <div id="content"> .

Perhatikan pada Code <a href="#" pastikan untuk tidak memberinya alamat URL dan harus diisi pagar, agar perpindahan antara tab satu dengan laiinnya bisa berfungsi.

Sudah selesai pembuatan tabs View di postingan blogger mudah bukan ? Semoga bermanfaat dan selamat mencoba.