Selamat Datang di http://nthoeng.blogspot.com, Terima Kasih Sudah Berkunjung, Jangan Lupa Tinggalkan komentar. | Selamat Datang di http://nthoeng.blogspot.com, Terima Kasih Sudah Berkunjung, Jangan Lupa Tinggalkan komentar. |

Selasa, 27 Maret 2012

Membuat Tab View Accordion Vertikal Dengan Jquery Versi II

Pada waktu yang lalu telah dibahas mengenai Membuat Tab View Accordion I, kali ini kita akan membahas Membuat tab view accordion II, bedanya pada tab view ini kerja membuka atau menutupnya tab tergantung dengan Klik pada tab, bukan seperti Tab View Accordion I yang menggunakan sentuhan cursor untuk membukanya. Dalam pemberian efek slidenya, Tab view ini juga menggunakan script Jquery, Sebagai demo lihat sidebar pada blog ini. Tutorial pembuatannya sebagai berikut :

 1. Log In ke Blogger.
 2. Pilih tab Rancangan, Elemen Laman, dan pilih Tambah Gadget.
 3. Selanjutnya Html/Javascript, dan masukan script berikut :

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{cursor:pointer;margin:1px 0px;padding:5px 8px;background-color:transparent;font:bold 12px Verdana,Arial,Sans-Serif;color:#a1a1a1;text-shadow:0px 1px 0px rgba(0,0,0,0.4)}
#accordion .content{background-color:transparent;padding:5px 5px;margin: 10px 0pt 10px;font-family:Arial;font-size:12px;color:relative}
#accordion h2.active{background:transparent;color:relative;border:1px solid lime; }
</style>
<script type="text/javascript" src="http://nthoeng.googlecode.com/files/newmenuaccord.js"></script>
<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>
<div id="accordion">
<h2>TAB 1</ h2>
<div class="content">
Konten Di Sini.
</div>
<h2>TAB 2</h2>
<div class="content">
Konten Di Sini.
</div>
<div id="accordion">
<h2>TAB 3</h2>
<div class="content">
Konten Di Sini.
</div>

<div id="accordion">
<h2>TAB 4</h2>
<div class="content">
Konten Di Sini.
</div>
</div></div></div>
</div>

 4. Kemudian Save.

Nb : Jika dalam template Anda telah terdapat file Jquery, maka teks warna merah tidak perlu di copy.

Semoga Bermanfaat.

8komentar:

Яіѕӓӏађаті Тђё Ѕіӏеисё ԁіӓяуmengatakan...

hehehe...nah ini yg aku tunggu, thank bnget gan tutorialnya, akan saya pelajari dan coba,
sekali lagi maksih bnyak,
oh ya kalo mau ngasih border untuk judul kontennya gmn yaak?

Galihmengatakan...

Ada di postingan berikutnya soob !!!

SASTRA REMAJA 11mengatakan...

Oke gan. makasih tutornya. asyik nih. hehe

Anonimmengatakan...

Saya gak ngerti sekali,,,,,,,,apa code atau isi Konten Di Sini.

Faril Lukmanmengatakan...

kode html widget yg dari default blogger yang dicopy ke sini yg mana aja ya?
aku udah nyoba ngopy dari <*widget> sampe <*/widget>, tapi kog nggak keluar kontennya ya? cuma kosongan. aku pengen bikin yg seperti di blog ini.. Trims bantuannya..

Faris Asyrafmengatakan...

menarik bang uda aku coba works.... visit balik bang!!!

Faris Asyrafmengatakan...
Komentar ini telah dihapus oleh pengarang.
Faris Asyrafmengatakan...

@faril lukman !!! tab no.1 error.... hapus ja... jadi langsung tab dua ke bawah.... works... if you don't trust u can visit my blog. http://theindependentenglishcourse.blogspot.com

Posting Komentar

TwitterDeliciousFacebookDiggStumbleuponFavoritesMore