Tab View adalah Suatu cara yang bagus
untuk mengatur letak widget kalian pada sebuah blog supaya tampilan blog
menjadi lebih dinamis, simple, rapi dan terorganisir (opini).
Ada banyak tutorial di blog lain
yang membahas bagaimana cara membuat tab view dengan CSS dan jQuery.
Namun, sebagian dari mereka meminta kalian untuk mengubah kode template
blog kalian. Selain itu kalian juga harus secara manual menambahkan isi
setiap tab. Cukup merepotkan kalian bukan?? He neh saya ada tutorial
bagus buat kalian terapkan.
Yang harus kalian lakukan hanya
menambahkan kode tab view yang sudah saya edit biar lebih ringan ke
sebuah widget/gadget HTML / Javascript. Setelah ditambahkan, maka akan
mengubah widget blog blogger kalian yang sudah ada menjadi tab, secara
otomatis. Tidak seperti tutorial lain harus menambahkan isi tab view
secara manual yang cukup menyibukan. Apalagi dengan edit HTML aagh...
bikin pusing. Untuk demonya lihat tab view di blog ini.
Berikut adalah beberapa feature dari tab view ini :
Mengakomodasi jumlah widget yang tidak terbatas.
Menjaga penampilan asli widget.
Untuk warna, background dan garis pada tab view kalian bisa sesuaikan dengan keinginan kalian.
Sepenuhnya untuk kemudahan dalam pemasangan dan penghapusan. Jika kalian tidak menyukai apa yang kalian lakukan, cukup menghapus gadget HTML / Javascript tab view tersebut.
Selanjutnya ke langkah pemasangan
1. Login kea kun blogger kalian, bisa klik disini
2. Ke menu Rancangan >> klik Elemen Laman >> klik Tambah Widget/Gadget
3. Pilih HTML/JavaScript, Kosongkan kolom judul jangan diisi
4. Selanjutnya Copas kode di bawah ini ke kolom konten yang berada di bawah kolom judul
<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; /*--Pull tab down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff; /*--"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://sakawku.googlecode.com/files/sakawku%20tab%20view.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script>
<!-- untuk memastikan widget bekerja, jangan merubah kode di bawah ini -->
<div id='codeholder'><p>Get this <a href="http://tipstrikpintar.blogspot.com/2012/06/membuat-tab-view-tanpa-edit-html.html" target="_blank">widget</a></p></div>
Kode yang berwarna biru
adalah untuk memuat jQuery, hapus kode ini jika sudah dimuat di tempat
lain di blog kalian. Petunjuk : Jika blog kalian memiliki slider,
slideshow atau sesuatu dengan efek berjalan, kemungkinan itu didukung
oleh jQuery.
Tentukan jumlah widget yang ingin kalian rubah menjadi tab di tulisan angka yang berwarna merah.
Kotak
standar warna latar belakang putih (# fff). Kalian dapat mengubahnya
sesuai dengan warna yang kalian inginkan pada kode berwarna kuning. Terapkan warna yang sama untuk latar belakang tab aktif dan batas bawah (dalam kode berwarna hijau)
5. Posisi gadget HTML/Javascript
di atas gadget yang ingin kalian buat menjadi tab. Pastikan ada judul
di setiap widget yang ingin kalian buat menjadi tab, jika tanpa judul
ini tidak akan bekerja.
6. Terakhir klik Simpan dan lihat hasilnya.
Catatan Sebelum Instalasi
Kurangi lebar sehingga semua tab-tab masuk ke dalam tab. Hal ini dapat dicapai dengan menggunakan judul widget pendek.
Anda mungkin perlu untuk mengurangi lebar dari widget tabified untuk menempatkan mereka ke dalam kotak.
Jangan
lupa untuk menguji di Internet Explorer. Widget ini dapat menyebabkan
"Operasi dibatalkan" untuk beberapa non-design template. Jika itu
terjadi, berarti widget ini bukan untuk kalian. Semoga cocok dengan
template dd saya.
Tidak ada komentar:
Posting Komentar