Spoiler Untuk Komentar

Pada postingan yang telah lalu saya menulis tentang cara untuk membuat Membuat Scroll Pada Kotak Komentar Bag 1 dan Membuat Scroll Pada Kotak Komentar Bag 2 yang bermanfaat untuk menggulung komentar yang jumlahnya sangat banyak.
Satu lagi cara untuk membuat komentar tidak terlihat memanjang kebawah karena jumlahnya yang sangat banyak yaitu dengan membuatkan Spoiler Pada Komentar tersebut.
Sedikit saya jelaskan secara singkat bagi sobat yang belum mengerti tentang spoiler ini. Spoiler adalah sebuah tombol yang berfungsi untuk menampilkan dan menyembunyikan komentar pada blog sobat. Supaya lebih jelas coba klik tombol di bawah ini:

Nah seperti ini nich contohnya. Oke kan, tapi yang saya buat nanti tidak sama seperti ini

Jika sobat ingin membuat spoiler pada blok komentar, silahkan ikuti langkah berikut:
Login ke Blogger.
Jika sudah masuk pada halaman Dasbor, klik Tata Letak atau Rancangan lalu pilih Edit HTML.
Download template untuk berjaga-jaga jika terjadi kesalahan.
Centang kotak kecil disamping tulisan Expand Template Widget.
Cari kode CSS untuk comments-block. Jika sudah ketemu tambahkan perintah scroll berikut kedalamnya

height: 300 px; /* tinggi blok komentar */
border:1px solid # CCC ; /* warna bingkai blok komentar */
overflow:auto; /* perintah scroll */

tinggi serta warna bingkai bisa sobat ubah sesuai keinginan. Jika tidak ingin menggunakan scroll untuk blok komentar, hapus saja perintah scroll di atas.
Lalu cari kode ]]></b:skin>, jika sudah ketemu letakkan kode CSS dibawah ini di atas code tersebut:

/*Toggle Spoiler*/
.widgethidden {
display:none
}
.widgetshown {
display:inline;
overflow:auto;
}

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="widgethdden";
}
else{
whichpost.className="widgets hown";
}
}
</script>

Selanjutnya carilah code berikut:

<dl id='comments-block'>

Buat sobat yang sudah menggunakan avatar Blogger Profile, cari kode ini:

<dl expr:class='data:post.avatarInd entClass' id='comments-block'>

Jika sudah ketemu, silahkan sobat 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.avatarInd entClass' class='widgethidden' id='comments-block'>

Perlu sobat ketahui:
Jika blok komentar menggunakan scroll maka avatar Blogger Profile tidak akan terlihat karena tertutup oleh kotak scroll blok komentar.

Lalu tambahkan kode dibawah ini tepat diatasnya:

<div style='text-align:center; margin:10 px 0px; font-size: 15 px; font-weight:bold;'>
<a href='javascript:togglespoiler ("comments-block")' title=' Click for expand '>Show/Hide Comments</a>
</div>

Ukuran huruf, judul link (Tulisan Click for expand), dan nama link (Tulisan Show/Hide Comments) bisa sobat ubah sesuai keinginan.
Jika sudah selesai simpan perubahan yang telah sobat buat.


Selesai dan Selamat mencoba!

Tweet