Membuat Tab View Tanpa Edit HTML

|
Tab View
Tutorial ini saya posting sebagai jawaban dari pertanyaan adik facebook saya yang bertanya bagaimana membuat tab view seperti punya saya di ARMAN BLOG.

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://sakawku.blogspot.com/2012/01/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.

Semoga bermanfaat buat kalian
Baca juga Blogger Tutorial lainnya



35 komentar:

Asis Sugianto said...

tutorial yang sangat menarik sobat, jadi bisa menghemat tempat di blog kita yg jika tempat untuk memasang widgert baru sudah tidak ada...

maaf baru mampir sobat soalnya baru selesai mengikuti UAS sobat...

Arman said...

@Asis, jah sob...fokus aja dlu ma UAS nya sob biar brjln dengan lancar

Rahman Wahid said...

ini yang aku cari gan, tangkyu

Rahman Wahid said...

wah, widget nya udah aku pasang gan, bener2 keren. http://wasilatulhuda.blogspot.com

Arman said...

@Rahman Wahid, Sama-sama gan sukses selalu...happy blogging...

xhu kaitani said...

gan,...yang ini kan jadi nya vertikal kalo gw masukin ke blog ane jadi memanjang banget blog gw,..jadi kalo pengen horizontal gimana gan ??

Arman said...

@@xhu kaitani, template agan ada featur slideshownya ga? atau agan uda pasang featur slide di widget? klo ada hapus kode warna biru diatas, klo tetep ga bekerja berarti tab view ini tidak cocok buat blog agan...

Livetv said...

terima kasiih atas suguhan menu tab view..dari dulu masang script ini nda bisa bisa..hehe..makasih banyak sob

Arman said...

@Livetv, Sama-sama sob alhamdulillah

Hendra Galus said...

wahh...keren bro...
trimakasih atas tutorialnya...

Bisa di lihat hasilnya, dgn sedikit modifikasi..

ARMAN said...

@Hendra, Thank sama-sama bro

Razif Mokji said...

terima kasih banyak

ARMAN said...

@Razif Mokji, Okey sama-sama sob

Razif Mokji said...

Alhamdulillah berjaya ... tq sekali lagi

fathur rahman said...

maaf mas,,,
kok saya ngga bisa ya....

ARMAN said...

@Fathur, Blog sob sudah ada fitur slidenya, coba hapus ketikan yang warna biru di kodenya

fathur rahman said...

tetap ngga bisa mas

ARMAN said...

@fathur, Klo emg tetap ga bisa berarti widget ini bukan untuk template sob

fathur rahman said...

owh,,,makasi deh sob...

azhima said...

thanks untuk informasinya

ARMAN said...

@azhima, sama-sama sob

Erwan Saputra said...

trimakasih banyak sob...

GB Magz said...

thanx gan. Lebih Simple dan mudah di aplikasikan ke blog ane :)

GB Magz said...

O ya, gan cara bikin kotak komentar kaya punya ente gimana caranya?. Blog ente keren gan. Ane juga suka sama template yg ente pake TOP BGT dah d^.^b

ARMAN said...

@GB Magz, Thanks, Agan hanya merubah nilai width di template sob pada kode comment-editor (setiap template kodenya bervariasi)

Arisa Hiraoka said...

tak bisa. yg nampak cmn link ke blog sini. hahah. but thanks ! :D

ARMAN said...

@Arisa, di baca baik2 tutorialnya arisa :D ga sembarang template pake ni script, atau mungkin di templatenya sudah ada aplikasi slide nya

Anonymous said...

udah di coba,,, tapi tampilannya tab view nya ko' malah di bawah,,,???

USOFT said...

wah... mantabss nihh...! keren gan.. :D

Krisadhi said...

kok pas dipasang tab 1 buat posting tab yang 2 dan 3 ga bisa gan..
ada solusi?

ARMAN said...

@Semuanya, kalau di template kalian sudah ada aplikasi slide show/gambar atau tulisan yang berganti secara otomatis (jquery) hapus ketikan yang berwarna biru, jika tetap tidak berjalan berarti script ini tidak cocok dengan template kalian.

Limit Komputer said...

Wah sip gan ttornya

Ignatiustrf said...

kolom judul dimana gan?

Sukiya said...

makasih gan, tutorialnya mudah dipahami,,,di coba ah,,.

agung uchiha said...

nah, makasih om, scriptnya bekerja di Blog saya nih :D

Post a Comment

Silahkan kalian berkomentar, namun tetap jaga kesopanan dengan tidak melakukan komentar spam. Saya Lagi Bermasalah Dengan Adsense, Saya izin Vakum Ngeblog Dulu Sobat Buat Nyari Solusi!!

Related Posts Plugin for WordPress, Blogger...