Tab Multi Widget adalah penggabungan beberapa Widget pada satu kolom
dengan Tab. Tab Multi widget ini sangat berguna jika Blog sobat
mempunyai terlalu banyak widget. Sobat bisa menggabungkan widget-widget
tersebut pada satu kolom dengan Tab diatasnya. Jadi sobat tidak perlu
menyediakan area yang luas untuk widget yang banyak.
Oke langsung saja ke langkah-langkah pembuatanya.
- Widget tanpa kode HTML/Javascript.
1. Login ke kaun Blogger sobat.
2. Masuk pada bagian Template.
3. Pilih Edit HTML.
4. Cari kode
</head>, agar lebih mudah gunakan tombol ctrl+F.
5. Masukan kode
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> , di atas kode
</head>.
6. Klik simpan Template.
7. Selanjutnya masuk ke bagian Tata Letak.
8. Klik Tambah Gacget di posisi yang sobat inginkan.
9. Pilih HTML/Javascript.
10. Masukan kode berikut.
<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://ayriyzone.googlecode.com/files/SimpleTabViewJQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({
organictabs: 3});
});
</script>
<div id="showtabs"></div>
Keterangan,
kode berwarna biru adalah kode-kode warna,
kode berwarna hijau adalah kode-kode ukuran yang bisa sobat ubah. Sedangkan kode ({
organictabs: 3}) adalah jumlah tab yang akan digabungkan dan sobat bisa sesuaikan.
11. Klik Simpan.
12. Letakan widget-widget yang akan digabungkan tepat di bawah widget yang baru saja dibuat.
Selesai, sobat dapat lihat hasilnya.
- Widget dengan kode HTML/Javascript.
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Pilih Edit HTML.
4. Cari kode
</head>, agar lebih mudah gunakan tombol ctrl+F.
5. Masukan kode berikut diatas kode
</head> .
6. Cari kode
agar lebih mudah gunakan tombol ctrl+F.
7. Masukan kode berikut di atas kode
Gak Bisa. Kosong...
ReplyDeleteCoba ulangi step by stepnya,mungkin ada yang terlewat.
Delete