Cara Memasang Tab View Pada Postingan Blog

Cara Memasang Tab View Pada Postingan Blog

Tab View berfungsi sebagai pemisah kontent yang berbeda dalam satu post. Tab View biasanya digunakan pada blog download entah itu dengan niche Game, Software, Video atau Film. Tab View berikut ini dibuat dari CSS, HTML, dan Jquery.

Silahkan lihat Demo Tab View pada tombol Result di akhir tutorial. Jika Anda tertarik untuk menggunakannya pada blog atau web sobat, silahkan langsung ikuti tutorialnya.

Cara Memasang Tab View Pada Postingan Blog

1. Sebaiknya blog Anda telah terpasang jquery (versi apa pun boleh). Jika belum memasangnya, silahkan letakkan script Jquery berikut di atas kode </head>.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

2. Letakkan CSS berikut sebelum kode ]]></b:skin> atau </style>.

.tabs{width:100%;display:inline-block}
.tab-links:after{display:block;clear:both;content:''}
.tab-links li{margin:0 5px;float:left;list-style:none}
.tab-links a{padding:9px 15px;display:inline-block;border-radius:3px 3px 0 0;background:#7FB5DA;font-size:16px;font-weight:600;color:#4c4c4c;transition:all linear 0.15s}
.tab-links a:hover{background:#a7cce5;text-decoration:none}
li.active a,li.active a:hover{background:#fff;color:#4c4c4c}
.tab-content{padding:15px;border-radius:3px;box-shadow:-1px 1px 1px rgba(0,0,0,0.15);background:#fff}
.tab{display:none}
.tab.active{display:block}

3. Letakkan script berikut di atas kode </body>.

<script type='text/javascript'>
jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');
 
        // Show/Hide Tabs
        jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
        jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);  
 
        // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
 
        e.preventDefault();
    });
});
</script>

4. Jika sudah, silahkan klik save.

Sekarang blog Anda sudah memiliki tab view sendiri. Untuk memunculkan tab view pada postingan blog Anda silahkan ikuti tutorial pemasangannya pada postingan.

Baca juga : Cara Memasang Widget Recent Post Keren Pada Blog

Memunculkan Tab View Pada Postingan

1. Siapkan artikel post yang akan dipasangi tab view lalu ubah post dari Compose ke HTML.

2. Letakkan kode Tab View berikut kedalam postingan tersebut.

<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">Tab #1</a></li>
<li><a href="#tab2">Tab #2</a></li>
<li><a href="#tab3">Tab #3</a></li>
<li><a href="#tab4">Tab #4</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>
Tab #1 Letakkan Judul Kontent disini !</p>
<p>
Isikan Kontent Anda disini !</p>
</div>
<div id="tab2" class="tab">
<p>
Tab #2 Letakkan Judul Kontent disini !</p>
<p>
Isikan Kontent Anda disini !</p>
</div>
<div id="tab3" class="tab">
<p>
Tab #3 Letakkan Judul Kontent disini !</p>
<p>
Isikan Kontent Anda disini !</p>
</div>
<div id="tab4" class="tab">
<p>
Tab #4 Letakkan Judul Kontent disini !</p>
<p>
Isikan Kontent Anda disini !</p>
</div>
</div>

Keterangan :

• Silahkan ganti tulisan Tab #1, Tab #2, Tab #3 dan Tab #4 dengan judul tab yang Anda inginkan.
• Ganti Isikan Kontent Anda disini ! dengan isi kontent, bisa profil, about, screenshot, dll.

3. Silahkan edit isi kontent dari tab view tersebut lalu klik Publikasikan dan selesai.

Result

Cara Memasang Tab View Pada Postingan Blog (White Background)

Tab View White Background

Caranya sama seperti diatas, namun disini kita gunakan css atau style yang berbeda. Silahkan gunakan CSS berikut untuk tampilan Tab View dengan background putih. Seperti biasa, letakkan CSS berikut sebelum kode ]]></b:skin> atau </style>.

/* CSS Tab View by wajahilmu.blogspot.com */
.tabs{width:100%;display:inline-block}
.tab-links:after{display:block;clear:both;content:''}
.tab-links li{margin:0 5px;float:left;list-style:none}
.tab-links a{padding:9px 15px;display:inline-block;border-radius:3px 3px 0 0;background:#7FB5DA;font-size:16px;font-weight:600;color:#4c4c4c;transition:all linear 0.15s}
.tab-links a:hover{background:#a7cce5;text-decoration:none}
li.active a,li.active a:hover{background:#4a98d3;color:#fff}
.tab-content{padding:15px;webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);box-shadow: 0px 1px 3px rgba(0,0,0,0.4);;background:#fff;border-top:2px solid #4a98d3;}
.tab{display:none}
.tab.active{display:block}
li.active {margin:0;}
.widget .post-body ul {margin:0;padding:0;}
.widget .post-body li {margin:0 5px 0 0;}

Result

Sekian Artikel kali ini dengan judul Cara Memasang Tab View Pada Postingan Blog. Semoga dapat berguna bagi sobat blogger yang membutuhkannya. Jangan lupa untuk berkomentar sebelum memasang Tab View ini agar saya bisa terus update artikel diblog ini. Terima kasih banyak telah membaca artikel di Opick Weblog.

Bagikan Artikel ini