Untuk membuat tampilan blog agar terlihat lebih rapi dan ringkas "Multi
Tab View" mungkin menjadi salah satu pilihan untuk di pasang pada blog.
Tab sendiri merupakan suatu komponen yang memungkinkan pengguna dapat
beralih dari satu layar/widget ke layar/widget lain dalam satu tampilan
hanya dengan mengklik judul Sub Tab. Biasanya, Tab berjumlah lebih dari
satu, tapi dalam satu waktu hanya dapat mengaktifkan satu layar/widget.
Kini penggunaan komponen Tab semakin populer karena Selain membuat
tampilan blog menjadi rapi dan rinkas, Multi Tab View ini juga
menjadikan banyaknya menu yang ingin di tampilkan hanya membutuhkan
tempat yang relatif sedikit.
Ada banyak cara yang dapat digunakan untuk membuat Tab View di blog,
namun cara yang akan saya gunakan yaitu dengan menggunakan jquery.
kenapa? karena ada banyak kelebihan dan keunggulan tersendiri dari
tampilan tab yang akan saya buat, selain cara pembuatannya yang lebih
sederhana tentunya, berikut kelebihan dari Tab View menggunakan Jquery:
- Tampilanya akan mengikuti gaya dari header widget template anda,
yaitu bentuk dan warnanya, jadi jika tidak di kostumasi terkait warna
dan bentuknya pun sudah bisa sesuai dan serasi dengan blog anda.
- Mempunyai efek jquery, atau efek smooth saat anda mengalihkan menu tab, yang tentu menambah nilai keindahan untuk blog anda.
- Cara instalasi atau pemasanganya yang sangat mudah karena hanya
perlu menambahkan satu widget "HTML/JavaScript" dan menyisipkan kodenya.
- Tidak Memerlukan embel embel atau tambahan CSS atau script untuk dimasukkan di Edit HTML.
- Anda tidak perlu susah dalam meletakan widget kedalam menu Tab View
ini, anda hanya perlu meletakan beberapa widget tepat dibawah widget
kode "HTML/JavaScript" yang anda sudah tambahkan.
Bagi anda yang tertarik untuk membuat menu Tab View ini langsung saja ikuti langkah-langkahnya di bawah:
Login ke blog anda.
Pilih menu "Tata Letak" >> "Tambahkan Gadget" >> HTML/JavaScirpt.
Isi konten widget dengan kode yang ada di bawah,
<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #0000FF;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #000000;
border-bottom: 1px solid #fff;
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
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://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'>
<a
href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html"
target="_blank"></a></div>
Seperti yang sebelumnya saya beritahukan, untuk menentukan widget apa
saja yang ingin anda letakan pada Tab View ini, anda hanya tinggal
meletakkan widgetnya dibawahnya. (lihat gambar di bawah)
Sekian artikel mengenai cara membuat menu Tab View pada blog.
Semoga bermanfaat.