Cara Memasang Tab View Pada Postingan Blog

Baca Juga

Ilustrasi

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.

Jika sudah jadi akan terlihat seperti gambar diatas. 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. klik untuk lihat hasilnya

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

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.

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 labor blog.

Pages: