earth

Guestbook

/* Iklan google ads */
Pada tulisan sebelumnya saya mengungkapkan salah satu cara untuk mengatasi "kekosongan" pada blok komentar yang belum terisi jika blok komentarnya menggunakan scroll, yaitu dengan membuat "pengantar komentar". Cara lain untuk mengatasi "kekosongan" tersebut adalah dengan membuat toggle spoiler pada block komentar.

Bagi kamu yang menyetel pengaturan penempatan formulir komentar-nya disemat di bawah entri, kemudian artikel-artikelnya sering dikomentari banyak orang sehingga membuat panjang blok komentar, mungkin dengan membuat spoiler ini akan sangat membantu karena setiap komentar yang masuk akan disembunyikan sehingga kotak kolom komentar berada tepat di bawah artikel (bagi yang sudah menggunakannya related post akan berada di bawahnya). Dan untuk melihat komentar-komentar tersebut kamu bisa meng-klik spoiler-nya.

Sebagai contoh toggle spoiler ini kamu bisa melihat pada spoiler related post (artikel terkait) yang berada di bawah artikel ini.

Jika kamu ingin membuat spoiler pada blok komentar, kamu bisa mengikuti langkah-langkah sebagai berikut:
  • Login ke akun Blogger kamu.
  • Dari halaman Dasbor, klik Tata Letak dan pilih Edit HTML.
  • Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
  • Beri tanda centrang pada Expand Template Widget.
  • Carilah kode CSS untuk comments-block (gunakan Control F atau F3).
  • Tambahkan perintah scroll berikut kedalamnya (gunakan Control C untuk mengkopi):
    height:300px; /* tinggi blok komentar */
    border:1px solid #CCC; /* warna bingkai blok komentar */
    overflow:auto; /* perintah scroll */
    
    (Untuk lebih jelasnya kamu bisa mempelajari artikel ini)
    Kamu bisa mengubah tinggi dan warna bingkai sesuai keinginan kamu.
  • Jika kamu tidak ingin menggunakan scroll untuk blok komentar, abaikan perintah penambahan scroll di atas.
  • Selanjutnya cari kode ]]></b:skin>:
  • Letakkan kode CSS berikut di atasnya:
    /*-----Toggle Spoiler-----*/
    .widgethidden {display:none}
    .widgetshown {display:inline}
    
  • Lalu letakkan script berikut di bawah kode ]]></b:skin>:
    <script type='text/Javascript'>
    function togglespoiler (postid){
     var whichpost = document.getElementById(postid);
     if (whichpost.className=="widgetshown"){
     whichpost.className="widgethidden";
     }
     else{
     whichpost.className="widgetshown";
     }
    }
    </script>
    
  • Setelah itu carilah kode berikut :
    <dl id='comments-block'>
    
    Bagi yang sudah menggunakan avatar Blogger Profile, cari kode ini:
    <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
    
  • Jika sudah ketemu, ganti dengan kode ini:
    <dl class='widgethidden' id='comments-block'>
    
    Atau dengan kode ini bagi yang menggunakan avatar Blogger Profile:
    <dl expr:class='data:post.avatarIndentClass' class='widgethidden' id='comments-block'>
    
    Catatan:
    Jika blok komentar kamu menggunakan scroll maka avatar Blogger Profile dengan sendirinya tidak akan terlihat karena tertutup oleh kotak scroll blok komentar.
  • Setelah itu, tambahkan kode ini di atasnya:
    <div style='text-align:center; margin:10px 0px; font-size:15px; font-weight:bold;'>
    <a href='javascript:togglespoiler ("comments-block")' title='Click for expand'>Show/Hide Comments</a>
    </div>
    
    Kamu dapat mengubah ukuran huruf, judul link (kalimat Click for expand), dan nama link (kalimat Show/Hide Comments) sesuai keinginan kamu.
  • Simpanlah hasil kerjaan kamu dan ucapkan alhamdulillah.....

Nah, sekarang coba kamu lihat kotak komentar kamu, apakah sudah bisa di Show/Hide?

Ok coy, selamat mencoba.....
  • Artikel Terkait Dengan CSS dan Javascript

    Terimakasih sudah membaca artikel SC Community's Blog

    17 komentar

    tapi kenapa komentar harus disembunyiin....

    20 Februari 2010 10.55  

    blog saya tadina mah mau pake scroll kang ...tapi gagal terus jadi bingung.........cari kodenya susah tidak ada yang seperti di tutorialnya (apa beda atau cari yang mirip mirip )

    mudah mudahan yang ini bisa di pake kang...doakeun nya...

    20 Februari 2010 18.56  

    saya lebih suka yang perti mas ini... scrolll hehehe

    20 Februari 2010 21.52  

    wah tipnya kang enes keren2 euy

    21 Februari 2010 02.17  

    wuih hade euy idena mah...tapi kalo yg udah ada javascript ajax dr google gak usah javascript itu lagi loh, bisa kita buat id terus di tag deh bagian komentnya dg id entuh..(sok tau w ah)...wkwkwkkwkw

    21 Februari 2010 17.22  

    Jadi mainan punyanya kang eNes, sip kang!

    27 Februari 2010 20.40  

    sobat mau tanya donk, bikin tempat komentar kaya sobat yang bisa scroll gimana caranya...? ^^

    11 April 2010 15.55  

    Waduh HTML yang satu bisa Gan,tpi nu hiji teh nteu bisa kumaha atuhc...??

    30 Mei 2010 17.17  

    Thanks bgt tutorialnya mas. :)

    27 September 2010 01.55  

    kok g bisa bekerja dgn baik mas..., bisanya cuman nge-hidden doang paka buka blog tetep tampil juga... cuman ngehidden aja... HELP!

    9 November 2010 00.19  

    mantaabb... mampir ke blog ku ya:

    http://loviabatikdancraft.blogspot.com/

    4 April 2011 17.13  

    thanks gan tutornya
    salam BLOGWALKING

    22 Desember 2012 17.13  

    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