Friday, August 12, 2011

Tips Membuat Efek Kedipan Warna Accordion - jQuery

Wah sudah lama rasanya saya tidak memposting tentang jQuery karena itu pada postingan kali ini saya ingin membagi tips cara membuat menu dengan efek kedipan warna menggunakan jQuery. Apabila anda penasaran silahkan lihat demonya disini.

Untuk cara membuatnya :

1. Login seperti biasa ke akun blog anda
2. Klik Rancangan > Elemen Laman > Tambah Gadget > HTML/JavaScript. Kemudian copy-pastekan kode HTML dibawah ini

<div id="accordion">
       <h2 class="current">Judul 1</h2>
       <div class="pane" style="display: block;">
          Masukkan teks atau kodehtml/javascript disini
    </div>
   
       <h2>Judul 2</h2>
        <div class="pane">
          Masukkan teks atau kodehtml/javascript disini
    </div>

       <h2>Judul 3</h2>
       <div class="pane">
          Masukkan teks atau kodehtml/javascript disini
</div>

3. Kemudian klik Simpan
4. Lanjut ke tahap berikutnya klik Edit HTML
5. Backup terlebih dahulu template lengkap anda dengan mengklik Download Template Lengkap
6. Cari kode ]]></b:skin>  (tekan Ctrl+F untuk mempercepat pencarian).
7. Kemudian copy-pastekan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

#accordion {
    background-color:#333; /*background content*/
    width: 250px;
    border:1px solid #333;   
}

#accordion h2 {
    background-color:#000;
    color:#FFF;
    margin:0;
    padding:5px 15px;
    font-size:14px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    border:1px solid #fff;
    border-bottom:1px solid #ddd;
    cursor:pointer;       
}

#accordion h2.current {
    cursor:default;
    background-color:#fff;
    color:#000;
}

#accordion div.pane {
    border:1px solid #fff;
    border-width:0 2px;
    display:none;
    height:180px;
    padding:15px;
    color:#fff;
    font-size:12px;
   border-bottom:1px solid #fff;
}

Perhatikan kode yang berwarna hijau.
- width: 250px; adalah lebar halaman dan height: 180px; adalah tinggi content, setinglah agar sesuai dengan lebar dan tinggi halaman blog anda.

8. Langkah selanjutnya cari lagi kode </head> dan copy-paste kode berikut sebelum kode </head>.

<script src='https://sites.google.com/site/mariozoner/gb-mario/jquery.tools.min.js' type='text/javascript'/>

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

             this.getPanes().slideUp().css({backgroundColor: &quot;#00FF00&quot;});

             this.getPanes().eq(i).slideDown(function(){
                    $(this).css({backgroundColor: &#39;transparent&#39;});
                    done.call();
             });
        });
        });
    </script>

Keterangan :
- Kode yang berwarna merah digunakan untuk memunculkan kedipan warna hijau. Anda bisa menggantinya dengan warna yang anda inginkan.

9. Jangan lupa klik SIMPAN TEMPLATE dan lihat hasilnya.

Semoga bermanfaat


Related Post

7 comments:

  1. sob kok aku coba gagal ya di blogku,, pengen bgt hasilnya kyk contoh diatas,, munculnya cuma 2 tab aja,, mohon pencerahannya sob,,

    ReplyDelete
  2. wkwkwkkwk,, maaf sob salah comment,, maksudnya yg tab view menu,, heheheh

    ReplyDelete
  3. boleh ni gan dipraktekin, salam kenal

    ReplyDelete
  4. @rama88 : mungkin ada kesalahan dlm penulisan kode n scrip kmu sob ...perhati'in yg script yg berwarna sob...hrus diganti.sesuaikan dg tinggi dan lebar halaman blog sobat..

    karena ukuran dan lebar halaman setiap blog berbeda-beda sob :D

    ReplyDelete
  5. @rudy : silahkan sob jng malu2 kucing..hehe saya senang bs berbagi dg sesama :D

    salam kenal kmbli :D

    ReplyDelete

Mohon tinggalkan jejak/komentar sobat disini. Dilarang SPAM. Okey...