earth

Guestbook

/* Iklan google ads */
Masih ingat dengan tulisan Membuat Toggle Spoiler Untuk Menampilkan dan Menyembunyikan Widget Sidebar? Nah, kali inipun saya akan menuliskan hal yang sama. Bedanya, sekarang menggunakan framework dari jQuery. Dengan adanya "polesan" jQuery ini, toggle akan tampil lebih dinamis dan menarik. Beda dengan yang hanya menggunakan javascript saja, kelihatan kaku dan monoton.

Sebagai contoh dari toggle dengan polesan jQuery ini bisa dilihat pada sidebar dengan judul "Yang Baru Dari Sastra Culun".

Jika sobat ingin membuat toggle seperti itu, lakukan hal-hal berikut:
  • Dari halaman Dasbor, pilih Template - Edit HTML (untuk amannya, lakukan duplikasi template terlebih dahulu).
  • Beri tanda centrang pada Expand Template Widget.
  • Setelah itu tambahkan CSS berikut di atas kode ]]></b:skin>:
    /*=== Toggle Sidebar jQuery ===*/
    #toggle-sidebar {}
    #toggle-sidebar h2 {cursor:pointer; display:block;}
    #toggle-sidebar h2:hover {opacity: 0.75; -o-opacity: 0.75; -moz-opacity: 0.75; -webkit-opacity: 0.75; filter: alpha(opacity=75);}
    #toggle-sidebar h2:active {color:#888} /*warna huruf ketika aktif*/
    .toggle-content {}
    
  • Lalu tambahkan script berikut di bawah kode ]]></b:skin> tadi:
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    
    <script type='text/javascript'>
    jQuery(document).ready(function(){ 
        jQuery(".toggle-content").hide(); 
        jQuery("#toggle-sidebar>h2").click(function(){ 
            jQuery(this).toggleClass("active").next().slideToggle("slow");
        }); 
    }); 
    </script>
    
    Jika sudah menggunakan script jQuery, hapus salah satunya.
  • Setelah itu cari kode widget yang akan dibuatkan toggle seperti ini (atau yang mirip, karena tiap template kadang berbeda):
    <b:includable id='main'>
        <!-- only display title if it's non-empty -->
        <b:if cond='data:title != &quot;&quot;'>
            <h2 class='title'><data:title/></h2>
        </b:if>
        <div class='widget-content'>
            <data:content/>
        </div>
        <b:include name='quickedit'/>
    </b:includable>
    
  • Jika sudah ketemu tambahkan kode berwarna merah sehingga menjadi seperti ini:
    <b:includable id='main'>
    <div id='toggle-sidebar'>
        <!-- only display title if it's non-empty -->
        <b:if cond='data:title != &quot;&quot;'>
            <h2 class='title'><data:title/></h2>
        </b:if>
    <div class='toggle-content'>
        <div class='widget-content'>
            <data:content/>
        </div>
    </div><!--/toggle-content-->
    </div><!--/toggle-sidebar-->
        <b:include name='quickedit'/>
    </b:includable>
    
  • Simpan hasil kerjaan ini lalu ucapkan Alhamdulillah...

Jika ingin membuatkan toggle untuk widget lainnya, lakukan hal yang sama seperti pada langkah ke-5 dan ke-6.

Ok, segitu aja sob. Semoga bermanfaat .....
  • Artikel Terkait Dengan CSS dan Javascript

    Terimakasih sudah membaca artikel SC Community's Blog

    5 komentar

    Terima kasih atas infonya..

    Salam kenal yach..

    15 Oktober 2012 pukul 00.24  

    aduhhh ente gimana sih script javascript kok dimasukin ke b:skin ? harusnya /body dong. apa boleh seperti itu ?

    29 September 2014 pukul 17.29  

    Thank's Gan Tutornya..

    26 Januari 2015 pukul 10.31  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler