Membuat Spoiller Buka-Tutup Kotak Komentar pada Blog

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

Share On: