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