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 dipakai pada blog download entah itu dengan niche Game, Software, Video atau Film. Tab View berikut ini dibentuk dari CSS, HTML, dan Jquery.

Silahkan lihat Demo Tab View pada tombol Result di final tutorial. Jika Anda tertarik untuk menggunakannya pada blog atau web sobat, silahkan eksklusif 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 isyarat </head>.

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

2. Letakkan CSS berikut sebelum isyarat ]]></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 isyarat </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 mempunyai 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 kemudian ubah post dari Compose ke HTML.

2. Letakkan isyarat 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 goresan pena Tab #1, Tab #2, Tab #3 dan Tab #4 dengan judul tab yang Anda inginkan.
• Ganti Isikan Kontent Anda disini ! dengan isi kontent, sanggup profil, about, screenshot, dll.

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

Result

Cara Memasang Tab View Pada Postingan Blog (White Background)

Tab View White Background

Caranya sama ibarat 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 isyarat ]]></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 sanggup mempunyai kegunaan bagi teman blogger yang membutuhkannya. Jangan lupa untuk berkomentar sebelum memasang Tab View ini biar aku sanggup terus update artikel diblog ini. Terima kasih banyak telah membaca artikel di .