Jquery Accordion ~ coretan guru

Sabtu, 30 April 2011

Jquery Accordion

4/30/2011 08:49:00 AM hardosujatmiko.blogspot.com

Jika anda ingin menambahkan jQuery Accordion ikuti langkah-langkah tutorial brikut ini, namun sebelumnya apa yang dimaksud dengan Accordion ? seperti nama dari sebuah alat musik Accordion yang dimainkan dengan menarik panel sehingga akan tampil sisi panel yang melebar, dan dihasilkan suara yang mengalun. jquery accordion juga demikian. Jika diklik sebuah panel maka akan diperoleh lebar panel yang lain. Anda bisa mencoba di blog http://hardosujatmiko.blogspot.com dikolom sebelah kiri ada panel Tutorial Blog -Jquery diBlog dan Toko Online diBlog, jika panel itu di klik maka akan turun dan tampil isi dari panel tersebut.

Jquery accrodion ini digunakan untuk anda yang ingin menghemat speace atau tata letak dari blog yang terkesan hemat tempat, namun tetap memiliki muatan isi yang banyak. Baiklah kita coba tahap demi tahap tutorial memasukkan Jquery accordion.

1. Biasa anda harus masuk ke blog anda, Login terelbih dahulu.

2. Pilih design dan klik Edit HTML

3. Masukkan koding Jquery ke dalam Template: Letakkan diatas <head>

Komponen jQuery.min.js dan jquery.tools.min.js

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'</script>

<script src='http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js' type='text/javascript' </script>

<head>

4. Masukkan CSS ke dalam template diatas coding ]]></b:skin>

Koding CSS

#accordion {
 background:#333 url(img/h300.png) 0 0;
 width: 320px;
 border:1px solid #333; 
 -background:#222;
}
/* accordion header */
#accordion h2 {
 background:#ccc url(img/h30.png);
 margin:0;
 padding:5px 15px;
 font-size:14px;
 font-weight:normal;
 border:1px solid #fff;
 border-bottom:1px solid #ddd;
 cursor:pointer;  
}
/* currently active header */
#accordion h2.current {
 cursor:default;
 background-color:#aaa;
}
/* accordion pane */
#accordion div.pane {
 border:1px solid #fff;
 border-width:0 2px;
 display:none;
 height:180px;
 padding:15px;
 color:#000;
 font-size:12px;
}
/* a title inside pane */
#accordion div.pane h3 {
 font-weight:normal;
 margin:0 0 -5px 0;
 font-size:16px;
 color:#ccc;
}
/* end tab accordion styling */

body {
 font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}
:focus {
  -moz-outline-style:none;
}

5. Selanjutnya copy koding Javascript berikut masukkan di bawah ]]></b:skin>

Javastript untuk Jquery accordion

<script type='text/javascript'> 
      $(document).ready(function(){
        $("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
        
        // tambahkan efek baru ke tabs
        $.tools.tabs.addEffect("slide", function(i, done){

          // 1. ketika pane dibuka, maka akan terlihat efek slide dengan efek kedipan warna ungu
          this.getPanes().slideUp().css({backgroundColor: "#b8128f"});

          // 2. setelah pane terbuka, maka kembalikan warnanya ke warna semula (transparent)
          this.getPanes().eq(i).slideDown(function(){
              $(this).css({backgroundColor: 'transparent'});
              done.call(); // fungsi call harus dipanggil setelah efek selesai
          });
        });
     });
</script>

6. Bagaimana menerapkanya, anda masuk ke Design - pilih Page Elements. Anda mau menenpatkan dibagian mana? kalau saya ada di kolom sisi kiri. Add Wedget - HTML/Javascript + selanjutnya paste koding dimawah ini, ini adalah koding untuk memanggil css a yang memiliki id="accordion".

Cara memanggil CSS di postingan

<div id="accordion">
     <h2 class="current">tutorial Blog </h2>
     <div class="pane" style="display: block;">
     <img src="#" style="margin: 0pt 10px 15px 0pt; float: left;" />
<ul>
<li><a href="#">Membuat Blog</a></li>
<li><a href="#">10 Template TOP Gratis</a></li>
<li><a href="#">Ganti Template Modern</a></li>
</ul>
</div>
      
<h2>JQUERY di Blog</h2>
 <div class="pane">
 <ul>
<li><a href="#">Jquery Dasar</a></li>
<li><a href="#">Jquery Accordion(1)</a></li>
<li><a href="#">Jquery Accordion(2)</a></li>
</ul>
 </div>

<h2>Toko Online di Blog</h2>
    <div class="pane">
<ul>
<li><a href="#">Konsep Toko Online</a></li>
<li><a href="#">Barang Yang dijual</a></li>
</ul>
</div>
  </div>

selanjutnya isikan # dengan alamat link dari judul yang ada. Anda bisa mengganti dan menyesuaikan Judul dengan alamat link yang akan anda pasang.
Selamat mencoba.
Bila ada kendala hubungi kami. atau silakan tulis pertanyaan anda di Buku tamu.
Salam 3 B "Berdo'a-Belajar-Berkarya"

Lihat Artikel TOP Terkait:

Posted in: JQuery

coretan guru

tutorial Blog (1)

Tutorial Blog (2)

Toko Online di Blog

software sekolah

Modul Praktek RPL

mikrokontroller

Pengembangan Diri

TOPIK KESEHATAN

DUNIA GURU

Sabtu, 30 April 2011

Jquery Accordion

Lihat Artikel TOP Terkait:

Share

Toko On-Line

Produk Siap Jual

Cara Transaksi

Pembayaran

Arsip Blog

Pilihan ANDA

link

Join