Maret 02, 2012

Membuat Vertical Tab View Dengan jQuery

Tab View Vertikal dengan menggunakan jquery

Situseo Blog : Cara membuat tab view secara vertikal, pada umumnya tab view yang pernah banyak dibuat berbentuk tab view mendatar atau horizontal dengan 3 atau 4 bahkan 5 tab view, tab view yang akan kita kupas merupakan tab view berbentuk vertikal atau tegak lurus dengan tambahan penggunaan efek jquery yang sudah bergitu terkenal dengan efek-efeknya yang menghasilkan animasi yang halus.

Script tersebut saya ambil dari jsfiddle.net, dalam situs tersebut tidak disebutkan fungsinya untuk apa, setelah saya lihat bentuk dan cara kerjanya, ternyata bisa untuk menyimpan widget-widget dalam bentuk tab view, dengan alasan itu saya memberi nama script tersebut dengan Tab View Vertikal. Jika penasaran seperti apa script dan bentuk tab view-nya, kalian bisa melihatnya melalui link demo dibawah atau melihat pada sidebar blog ini (jika belum saya rubah).


Dalam situs tersebut hanya menampilkan bagian script-scriptnya saja, seperti bagian css, jquery dan html-nya tanpa memberi tahu cara pemasangannya, jika kalian kesulitan cara untuk memasangnya dalam blog, kalian bisa menggunakan cara di bawah ini untuk diterapkan dalam blog kalian.

Masuk pada Design - Page Element - Addgadget - HTML/JavaScript dan Copy - Paste script dibawah ini tanpa keterangan kata Css, jQuery dan HTML :

CSS
<style type="text/css">
#accordion {
width:90%;
margin:10px auto;
border:2px solid white;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}
#accordion h2 {
cursor:pointer;
margin:0px 0px;
padding:7px 15px;
background-color:black;
font:bold 11px Verdana,Arial,Sans-Serif;
color:#e6e6e6;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
#accordion .content {
background-color:#ddd;
padding:10px 15px;
color:black;
height:120px;    
}
#accordion h2.active {
background-color:#4BB347;   
}
</style>
jQuery
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
HTML
<div id="accordion">
<h2>Panel 1</h2>
<div class="content">
....
</div>
<h2>Panel 2</h2>
<div class="content">
....
</div>
<h2>Panel 3</h2>
<div class="content">
....
</div>
<h2>Panel 4</h2>
<div class="content">
....
</div>
</div>

Script murni saya ambil dari situs tersebut tanpa melalukan perubahan sedikitpun, jika kalian kurang cocok dengan tampilan-nya, kalian bisa modifikasi pada bagian css-nya.

Selain bentuk tampilannya bagus (bisa kalian modifikasi sendiri dengan menyesuaikan dengan warna blog kalian) apalagi ditambah dengan efek jquery yang halus, selain itu dengan adanya Vertical Tab View pada blog akan mengurangi ruang sidebar yang telah penuh dengan widget-widget.

Semoga bermanfaat,

28 Diskusi untuk Membuat Vertical Tab View Dengan jQuery

4 Maret 2012 18.57  

Cara pasang untuk sidebar bagaimana ?

5 Maret 2012 01.14  

@Tips dan Trik : script itu bisa langsung dipasang disidebar

10 Maret 2012 20.42  

maksudnya semuanya dimaksukkan disidebar atau perlu dipilah pilah lagi, misalnya css dan html pada edit HTMl sedangkan jquery langsung pada kolom tambah widget, saya mohon bantuannya mas dalang :)

10 Maret 2012 21.40  

sip mas dalang saya baru paham, sudah dicoba berhasil

3 April 2012 22.55  

kok gk hide sih kontennya, semua nya terbuka, gmn tuh mas dalang?

4 April 2012 01.36  

@Rohmat Julianto ada kemungkinan scriptnya tidak berjalan dengan baik :

1. jika kamu menggunakan cara diatas perhatikan tulisan css, jquery dan html yang berhuruf besar jangan diikut sertakan dalam script seperti keterangan diatas

2. ada kode javascript/jquery yang bentrok

solusi :

coba css-nya letakan diatas kode ]]></b:skin> jquery-nya letakan diatas kode </head> dan html-nya letakan disidebar addwidget - html

semoga berjalan dengan baik

4 April 2012 04.26  

@Mas Dalang
solusi dari mas dalang sudah dipraktekan dengan benar sekali, tetapi kok hasilnya sama saja?
apakah karena template saya gk support atau apa yah?
saya pake template yg dibloogger trrus dimodif dikit doang mas, mohon pencerahannya.

4 April 2012 04.34  

@Rohmat Julianto sudah dicoba pake template custom ???

4 April 2012 04.40  

@Mas Dalang
saya sudah jajal berbagai template lain yg saya punya ternyata juga sama saja, saya jadi pusing mas, tapi pingin tau saya, hahaha..
menurut mas gmn ya tentang masalah ini.. :-D

4 April 2012 05.04  

@Rohmat Julianto apa nama template blogger yang dipakai ?

4 April 2012 05.11  

@Mas Dalang
template saya pake itu template dari blogger dari kelompok template PT keren sekali, baris yg nomer 4.

4 April 2012 23.09  

@Mas Dalang
saya pakai template dari blogger, namanya PT KEREN SEKALI yg baris ke 4, itu yg saya pakai mas.

4 April 2012 23.53  

@Rohmat Julianto iya tuh sob kayaknya untuk template blogger tidak cocok scriptnya, belum ketemu masalahnya disebelah mana, tapi untuk template custom berjalan baik.

5 April 2012 01.51  

@Mas Dalang
oohh, eko deh mas.
thx ya.

oh iya, kalo model seperti ini buat post bisa gk, jadi pas judul postingannya di klik, artikelnya langsung turun kebawah, kalo menurut mas bisa saya request tutornya ya mas.

5 April 2012 05.00  

@Rohmat Julianto walaupun bisa dilakukan itu akan merugikan blog tersebut, kenapa ? karena tidak akan menambah pageview, kalau hanya untuk menampilkan judul saja kamu bisa lihat ini

http://situseo.blogspot.com/2012/03/hanya-menampilkan-judul-atau-title-pada.html

dalam post tersebut ada demonya dan tentu saja dengan cara ini bisa menambah pageview

5 April 2012 21.49  

@Mas Dalang
nanti kan bagian artikel postnya bisa dibikin read more mas, jadi tetep aja klik sini klik situ n pageviewnya bertambah.
saya minta tutornya dong mas, selain tampilannya yg bagus, itu juga supaya blog saya jadi ringkas mas.
jadi tolong buatkan ya mas, maaf nih kalo agak maksa, abis pengen banget, hehehe ^_^

29 April 2012 17.03  

untuk HTMl nya ga ngerti sob..tolong di perjelas dlu yang ad ...... sob

30 April 2012 04.12  

@Metal-xp html letakan pada add gadget - html/javascript (pada menu layout)

tanda ... isi dengan script widget yang akan ditampilkan, keterangan panel 1 dst judul dari widgetyang dipasang

5 Mei 2012 15.14  

mantap banget gan

21 Juni 2012 13.36  

mantabh gan hehehehe

23 Juni 2012 01.29  

wow mantap nih...
dicoba dulu gan...

26 Juli 2012 22.51  

gan, kalau sy mau pindahin ke vertical tab gadget kategory tuw, gmna caranya?

3 Agustus 2012 06.31  

Aku berhasil nih.. tapi kok tab-nya ngga ngikutin dari isi-nya.. isi tabnya itu pada keluar dari tabnya. mohon bantuannya, mas..

10 September 2012 03.52  

fiuuuhh..
udah sejam nyari yang kek gini, ternyata ada disini..
thankz berat gann..

25 September 2012 23.54  

blognya keren, efek jquerynya mantab

6 Oktober 2012 14.29  

gan ga mau di hide dah !!

jadinya panjang banget kebawah !!

29 November 2012 07.35  

Saya masih bingung untuk memasukkan script widget yang dari default blogger, semacam popular post, recent post, archive, dll..
saya coba copy dari <*widget> sampe <*/widget>, tapi tetep nggak keluar kontennya..
Gimana ya?
Bagian mana dari script widget yang seharusnya dicopy?

2 Juni 2013 22.50  

koreksi gan, ini widget namanya keren menu accordion, nice post!

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top