Membuat Toggle Spoiler Untuk Menampilkan dan Menyembunyikan Widget Sidebar

Untuk lebih jelasnya kamu bisa mengikuti langkah-langkah sebagai berikut:


  1. Login ke akun Blogger kamu.
  2. Dari halaman Dasbor, klik Rancangan dan pilih Edit HTML.
  3. Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
  4. Beri tanda centrang pada Expand Template Widget.
  5. Cari kode ]]></b:skin> lalu letakkan kode CSS berikut di atasnya:
  6. /*-----Toggle Spoiler-----*/
    .widgethidden {display:none}
    .widgetshown {display:inline}
  7. Dan letakkan script berikut di bawah kode ]]></b:skin> tadi:
  8. <script type='text/Javascript'>
    function togglespoiler (postid){
    var whichpost = document.getElementById(postid);
    if (whichpost.className=="widgetshown"){
    whichpost.className="widgethidden";
    }
    else{ whichpost.className="widgetshown";
    }
    }
    </script>
  9. Setelah itu carilah kode berikut pada widget-widget yang akan kamu sembunyikan:
  10. <h2 class='title'><data:title/></h2>
  11. Ganti kode tersebut dengan kode ini:
  12. <a href='javascript:togglespoiler (&quot;widget-spoiler1&quot;)' title='Show/Hide Widget'><h2 class='title'><data:title/></h2></a>
  13. Kemudian pada kode berikut, yang ada di bawahnya:
  14. <div class='widget-content'>
  15. Ganti dengan kode ini:
  16. <div class='widgethidden' id='widget-spoiler1'>
  17. Simpan dan Lihat hasilnya

    Nah, sekarang coba kamu klik pada judul widget-widget sidebar kamu, apakah sudah bisa di Show/Hide?
    Catatan:
    Untuk widget-widget berikutnya, ganti widget-spoiler1 menjadi widget-spoiler2, widget-spoiler3, dst., baik pada kode HTML untuk judul (title) maupun pada kode widget-content-nya.

0 komentar:

Posting Komentar

Kalau berkenan memberikan komentar, harap menggunakan kalimat yang santun dan tidak membahas topik lain di luar konten blog ini. Terima kasih.

Next previous home