Cara Mudah Memasang Widget Tab View di Blog

Cara Mudah Memasang Widget Tab View di Blog

Sobat blogger pasti sudah pada tau apa widget tab view itu, jadi tidak perlu saya jelaskan lagi bukan? Bagi yang belum tau silahkan liat screenshot di atas. Kurang lebih seperti itu lah tampilan dari widget tab view. Sobat dapat memasukkan beberapa widget yang dapat dimunculkan dengan melakukan klik pada tab sesuai judulnya.

Berikut ini tutorial simple memasang widget tab view, sobat tidak perlu melakukan edit template atau semacamnya. Cukup dengan memasang widget ini, tab view dengan tampilan yang bagus sudah dapat di pasang pada blog sobat. Tanpa basa-basi lagi, berikut tutorial cara memasang widget tersebut.

Cara Mudah Memasang Widget Tab View di Blog

1. Sebaiknya blog sobat telah terpasang jquery terlebih dahulu. Bisa menggunakan jquery versi apa saja. Bila belum punya, silahkan letakkan script jquery berikut tepat di atas atau sebelum kode </head> lalu save.

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

2. Menuju ke Tata Letak, klik Tambahkan Widget lalu pili HTML/Javascript. Masukkan kode berikut lalu save.

<style type="text/css">
.blogtabs{padding:0!important;border:0 solid #bbb}
.blogtabs h2{float:left;margin:0;font-size:12px;padding:2px 5px;overflow:hidden;position:relative;background:#fff;cursor:pointer;display:block;width:30%;text-align:center;border-bottom:0}
html .blogtabs h2.active{background:#4f93c5;color:#fff}
.blogtabs .widget-content{border-top:2px solid #4f93c5;padding:10px;background:#fff;clear:both;margin:0}
.btab,#showtabs{display:none}
</style>
<script src='https://googledrive.com/host/0B2oQSsObIa2lcWxtUjZkNjVZejQ' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){$("#showtabs").simpleBlogTab({organictabs:3})});
</script>  
<div id="showtabs"></div>

3. Konfigurasikan widget yang akan dimasukkan kedalam tab view dengan meletakkan widget di bawah widget tab view sebelumnya. Lebih jelasnya lihat gambar berikut.

4. Setelah selesai meletakkan widget yang di inginkan, silahkan save dan lihat hasilnya.

Baca juga : Cara Memasang Widget Recent Post Keren Pada Blog

Saya rasa cukup sekian artikel tentang Cara Mudah Memasang Widget Tab View di Blog. Semoga bermanfaat bagi sobat blogger dan jangan lupa untuk berkomentar terlebih dahulu sebelum menerapkan. Terima kasih telah mengunjungi Opick Weblog.

Bagikan Artikel ini