Cara membuat tab view di postingan blog

Hallo kali ini juga saya akan kembali membagikan artikel tentang cara membuat tab view di postingan blog ...artikel ini saya sadur dari rekan blogger di itstopover.blogspot.com (terimakasih untuk artikelnya Kang)..Baik kita akan mulai saja tutorialnya...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;}

#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> 

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">

<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>

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

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

Sumber : itstopover.blogspot.com

Baca Juga

Josie

Cuma seorang blogger yang jarang ngeblog

Share :

Related Posts