Pasang Widget Tab View mudah

Blog tutorial kali ini kita akan membahas cara membuat widget tab view. Cara pasangnya tidak terlalu susah dan rumit karena kita tidak perlu merubah html pada template blog. Dengan menggunakan cara ini dapat membuat tampilan blog sobat jadi minimalis, tertata rapi dan tidak berantakan dengan dibanjiri widget-widget pada tampilan utamanya. Tertarik ingin mencoba memasangnya diblog sobat? Lihat tutorialnya dibawah ini.

Berikut Caranya:

• Buka akun blog sobat.
• Pilih menu "Rancangan/Design" --> "Elemen Laman" --> "Tambah Gadget/Add Gadget"
• Pilih "Add HTML/JavaScript", kemudian masukkan kode javascript dibawah ini ke kolom HTML. Tidak perlu diberi judul.
<style type="text/css">
.blogtabs {padding: 0px !important;border: 0 solid #bbb;}


.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}


html .blogtabs h2.active {background: #fff;}
.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://naughtyric.googlecode.com/files/SimpleTabViewJQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>
• Klik tombol "Simpan/Save".
• Taruh Widget ini tepat diatas kumpulan widget lain yang ingin dimasukkan kedalam tab view dan pastikan widget-widget tersebut telah memiliki judul.
• Pada script di atas hanya untuk maksimal 3 widget yang dapat masuk ke dalam tab view. Jika ingin menambah lagi widget yang ingin dimasukkan, ubah saja angka 3 (kode berwarna merah) sesuai dengan jumlah widget yang ingin dimasukkan.

• Klik tombol "Simpan" pada bagian atas. Selesai.

Sekarang coba sobat lihat kembali tampilan beranda blog sobat. Jika cara diatas berfungsi, maka sekarang widget tab view telah terpasang di blog sobat. 

Semoga berguna dan bermamfaat

Sumber