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.
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.
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;}
Sekian Artikel kali ini Semoga dapat berguna bagi sobat blogger yang membutuhkannya. Jangan lupa untuk berkomentar .