Campoeng Cmoneng

"Belajar IPS Lewat Internet"

Kamis 27 Maret 2025

Membuat Spoiller Buka-Tutup Kotak Komentar pada Blog


Mulai tanggal 1 Januari 2014 Campoeng Cmoneng menutup Kolom Komentar, karena ingin fokus ke materi postingan. Ini hanya sementara saja, dan sudah lama direncanakan.
Semua komentar teman/sobat-sobit masih tersimpan rapi, tak ada yang dihapus

Widgetnya juga dicopot, disimpan disini ini agar tidak lupa saat memasangnya lagi.



Cara Membuat Spoiller Buka-Tutup Kotak Komentar sbb.
Bagian I
Langkah-Langkah sebagai berikut:
1.    Buka dasbor blog Klik template -- Klik edit HTML
2.    Tekan Ctrl + f
3.    Cari kode di bawah ini dengan cara masukkan sebaris kode di bawah lalu “enter”

<div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
</div


4.    Copy paste script dibawah ini, persis di atas kode tadi

<!-- spoiler komentar part1 -->
<div><div style='margin-bottom: 2px;'><i><b><small/></b></i><input onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Tutup&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos; Lihat Komentar Disini&apos;; }' style='margin: 0px; padding: 0px; width: 200px; font-size: 15px;font-weight:bold;' type='button' value='Lihat Komentar Disini'/></div>
<div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'>
<!-- spoiler komentar part1 end -->


5.    Langkah yang terakhir klik SAVE.
6.    Jika gagal, copy paste-kan script dibawah ini setelah kode  yang berwarna merah, lalu save.

<!-- spoiler komentar part2 -->
</div></div></div>
<!-- spoiler komentar part2 end -->



Bagian II

Selanjutnya untuk mempercantik-memperindah kotak komentar, saya dikasih tahu teman dari Lamongan, agar melakukan langkah-langkah sebagai berikut:

1.    Klik Tata Letak
2.    Klik Tambah Gadget
3.    ilih HTML/JavaScript 
4.    Copy Paste code script di bawah ini 

<style type='text/css'>

/**
 *
 */
.comments:after { border-color: #fff; }
.comments:before { background-color: #030826; }
.comments .comment {
  background: #C0ADFF;
  border-radius: 10px;
  font-size: 14px;
  padding: 10px 15px;
}
.comments [class*="level-"] .photo:before { background-color: #fff; }
.comments .meta { color: #ccc; }
.comments .meta a { color: inherit; }
.comments .meta a:hover { color: #34b5d0; }
.comments .body { color: #888; }

/**
 * Comments Thread
 */
.comments {
  list-style-type: none;
  padding: 5px 0 0 26px;
  position: relative;
  margin: 0 0 0 1px;
}
.comments:before,
.comments .comment,
.comments .comment:after,
.comments .comment:before,
.comments .photo img,
.comments [class*="level-"] .photo:before {
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.comments:after,
.comments:before {
  display: block;
  content: '';
  position: absolute;
}
.comments:before {
  border-radius: 0 0 5px 5px;
  height: 100%;
  width: 8px;
  left: 0;
  top: 0;
}
.comments:after {
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.4) inset;
  border-width: 4px;
  border-style: solid;
  border-radius: 18px;
  height: 10px;
  width: 10px;
  left: -5px;
  top: -16px;
  z-index: -1;
}
.comments .comment {
  margin-bottom: 10px;
  position: relative;
}
.comments .comment:after,
.comments .comment:before {
  border-radius: 10px;
  background-color: #fff;
  position: absolute;
  display: block;
  content: '';
}
.comments .comment:after {
  width: 12px;
  height: 12px;
  left: -14px;
  top: 7px;
}
.comments .comment:before {
  width: 5px;
  height: 5px;
  left: -22px;
  top: 16px;
}
.comments .photo {
  position: absolute;
  left: -60px;
  top: 2px;
}
.comments .photo img {
  border: 1px solid #fff;
  border-radius: 32px;
  overflow: hidden;
}
.comments .meta { margin-bottom: 5px; }
.comments .meta .reply { display: none; float: right; }
.comments .comment:hover .reply { display: block; }
.comments [class*="level-"] .photo:before {
  display: block;
  content: '';
  position: absolute;
  margin-top: -2px;
  height: 4px;
  width: 20px;
  left: -10px;
  top: 50%;
  z-index: -1;
}
.comments .level-2 { margin-left: 30px; }
.comments .level-3 { margin-left: 50px; }
.comments .level-4 { margin-left: 70px; }
.comments .level-5 { margin-left: 90px; }
.comments .level-6 { margin-left: 110px; }
.comments .level-3 .photo:before { width: 40px; left: -30px;}
.comments .level-4 .photo:before { width: 60px; left: -50px;}
.comments .level-5 .photo:before { width: 80px; left: -70px;}
.comments .level-6 .photo:before { width: 100px; left: -90px;}</style>

5.    Klik save

Sumber
http://www.muroielbarezy.com/

ARTIKEL TERKAIT
Di bawah ini adalah beberapa materi lanjutan dan sebelumnya yang berkaitan dengan materi di atas
Label: