Tutorial kali ini kita akan membahas cara membuat widget tab view seperti yang terdapat pada sidebar blog saya yang ada disini.
Untuk cara pemasangannya cukup mudah karena tidak perlu merubah html pada template blog. Dengan menggunakan tab view ini dapat membuat tampilan blog anda jadi lebih dinamis & minimalis.
Tertarik ingin mencoba?
Lihat tutorialnya dibawah ini.
*.Buka akun blog sobat.
*.Pilih menu"Rancangan/Design"-->"Elemen Laman"-->"Tambah Gadget/AddGadget"
*.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: #000;cursor:pointer;}
html .blogtabs h2.active {background: #ff0000;}
.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: transparent;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: 4});
});
</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 4 widget yang dapat masuk ke dalam tab view. Jika ingin menambah lagi widget yang ingin dimasukkan, ubahsaja angka di organictabs: 4 sesuai dengan jumlah widget yang ingin dimasukkan.
*.Klik tombol"Simpan"pada bagian atas.
*Selesai.
Sekarang coba lihat kembali tampilan beranda blog anda.
Semoga berguna dan bermamfaat..
Source
