 |
| Multi Tab View Untuk Pengguna Blogger |
Terdapat banyak tutorial mengenai Multi Tab View ni... Macam-macam versi ada... Samada menggunakan CSS mahupun jQuery. Kebanyakannya memerlukan korang memerah otak untuk menyusun dan mengubahnya supaya sesuai dengan code template blog. Bukan tu je.. kandungan setiap tab pun korang kena buat manual.... Mesti rasa malas je nak baca code-code tu kan.. huhuhu... serabut-serabut...
Dengan tutorial Multi Tab View ni... korang boleh abaikan semua masalah tu... Hanya dengan 3 langkah korang dah ada Multi Tab View yang canggih.. hehehe.. Ia mampu mengubah widget sedia ada blog Blogger korang ke dalam tab, secara automatik! weeee~~~~
Lihat dema di sini.
Ciri-ciri Multi Tab View:
- Boleh letak widget tanpa had. ikut suka korang nak letak berapa banyak pun.. ^_^
- Mudah memasang dan membuang widget. Tak payah pening-pening nak delete code-code...
Langkah-langkah pemasangan Multi Tab View Yang awesome ni seperti berikut:
1. Buka Layout → Klik Add a Gadget.
2. Pilih HTML/Javascript widget.
3. Jangan letak tajuk pada widget tersebut
4. Copy Code di bawah dan pastekan dalam widget tadi.
<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb !important;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px; /*--Pull tab down 1px--*/
overflow: hidden;
position: relative;
background: #755668;
cursor:pointer;
}
html .tabber h2.active {
background: #993366;
border-bottom: 1px solid #fff;
border-radius: 10px 10px 0 0;
/*--"Connect" active tab to its content--*/
}
.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>
<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>
- Code yang berwarna biru adalah untuk loading jQuery library. Buang code ini kalau korang dah dah ada guna dalam blog.
- Code yang berwarna fuchia adalah bilangan tab yang korang nak. Saya pakai 3 je...
- Code yang warna hijau, korang boleh ubah ikut theme warna blog masing-masing ye...
6. Klik Save dan boleh lah lihat blog korang.
PENTING
→ Pastikan setiap tab widget ada tajuk. Multi Tab View takkan berfungsi kalau bahagian-bahagian tab takde tajuk.
→ Bagi menampak kan Tab cantik, tajuk bagi setiap tab tue kena pendek-pendek je. ( Tengok dalam gamabr di atas ye... )
