Entah kenapa jarang banget ane liat blog yang menggunakan widget ini. Padahal widget Tab Menu ini cukup keren dari segi tampilan dan ringan dalam proses loading. Alasan ane tidak menggunakan widget ini sendiri karena disamping ane sudah memiliki tab menu sendiri dari om Khendin, widget ini juga tidak sesuai dengan template ane yang sifat bentuknya tidak bergerak alias fixed size.

Widget ini merupakan Tab Menu yang sangat fleksibel, dengan slide effect menggunakan script JQuery. Penasaran seperti apa??? Lihat demonstrasinya di sini. Widget ini merupakan hasil karya dari Webitect, dan terima kasih pada om Abu Farhan yang mau berbagi infonya. ^^

Langsung aja ya! Untuk membuatnya sendiri cukup mudah, pertama-tama masuk ke "Tata Letak" dari Dasbor Blogger, dan masuk pada "Edit HTML".

Langkah awal, pasang kode CSS untuk membentuk tampilan widget ini dengan meng-copy paste kode di bawah tepat di atas ]]></b:skin>.






Setelah itu, kita akan memasang script JQuery dari Google. Kalian tidak perlu memasang script ini jika script ini sudah ada di blog kalian. Kalau belum ada, copy dan paste kode berikut tepat di atas </head>.





Yang terakhir, tinggal memasang widgetnya yaitu dengan meng-copy dan paste kode berikut juga di atas </head>.

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";

</script>
<script type="text/javascript" src="http://www.yourjavascript.com/0293812025/bloggertabv1.0-min.js"></script>

Perhatikan kode berwarna hijau!! "starttab" adalah nomor widget yang akan masuk dalam tab pertama, "endtab" adalah jumlah widget yang akan masuk ke dalam Tab Menu, sedangkan "sidebarname" adalah nama id dari kolom yang akan di jadikan Tab Menu.

Untuk mencari tahu nomor widget yang akan dijadikan Tab Menu, lihat gambar berikut:


Kalau ingin membuat Tab Menu terdiri dari Video, Murottal, & Blog Archive maka atur agar "starttab=0" dan "endtab=2". Apabila ingin mengikutsertakan Label, maka atur agar  "endtab=3". Apabila ingin agar Tab Menu berada di bawah widget Video, atur agar "starttab=1", sehingga Tab Menu akan berisi Murottal, Blog Archive, dan Label.

Untuk mencari apa nama "id" dari sidebar, caranya cukup gampang, yaitu pada "Edit HTML" cari teks bertuliskan nama widget pertama. Contohnya seperti di atas, maka cari kata " 'Video' " maka akan tampil seperti berikut:

....<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Video' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Murottal' type='HTML'/>...

Nah...!!! yang berwarna biru itu adalah "id" dari sidebar kalian. Perhatikan "id" dari <b:section.. yang merupakan "id" yang harus di atur pada kode Tab Menu. Dengan begitu, isi "sidebarname=sidebar".

CATATAN: Widget ini tidak akan muncul di pratinjau, jadi jangan stres bila kelihatannya gagal, langsung saja simpan dan lihat hasilnya ^^ (seandainya tidak muncul, mungkin blogger membutuhkan beberapa saat untuk memperbaiki error yang disebabkan cache dari tampilan sebelumnya).

Sederhana kan!!?? (meskipun keliatannya rumit -_-') Tapi patut di coba. Sekali lagi silahkan lihat CONTOH dari widget ini di blog ane yang satunya.. ^^v..

Oke! Selamat mencoba =)



KEMBALI KE ATAS

Kunjungi artikel yang berhubungan:


Mengenai Saya

Foto Saya
Mizan
Mahasiswa rantau yang mendalami kajian Ilmu Jurnalistik, saat ini sedang sibuk dengan kuliah sambil berbagi info di Dumay (Dunia Maya) ^^v. Blog ini beroperasi secara profesional, berisi tentang info2 seputar komputer dan blogging. Semoga blog ini dapat memberi inspirasi dan info tambahan pada pedoman blogging pengunjung semua. ^^ trims..
Lihat profil lengkapku

Pos Terpopuler