Memodifikasi Komentar Blog

Kotak komentar memang menjadi daya tarik tersendiri, apalagi bagi blog yang sudah mulai ramai. Kita perlu memodifikasi kolom komentar supaya lebih terlihat menarik, ringkes dan lain sebagainya. Seperti yang di minta oleh chibi blog bagaimana membuat komentar dengan fungsi scroll. Namun supaya lebih padat isinya, saya akan membagikan cara bagaimana memodifikasi komentar blog tidak hanya dari scroll, namun beberapa pilihan yang dapat dilakukan.

Panduan secara umunya adalah, :

1. Pilih Tab Template (Dasboard Bloger baru),
2. Pilih Backup/restore, download full template untuk menghindari kesalahan.
3. Kemudian pilih Live on Blog >> kita buka edit HTML
4. Lakukan salah satu modifikasi kotak komentar di bawah ini,
5. Save Template.

Ok, sekarang kita akan membahas satu persatu apa saja yang bisa dilakukan dalam modifikasi kotak komentar blog kita:

1. Membuat scroll pada komentar

Untuk membuat scroll pada kotak komentar adalah dengan mencari :

#comments-block {

Kita mencarinya pada template, biasanya terdapat pada CSS (paling bagian atas dari HTML blog kita), untuk mempermudahnya silahkan cari dengan CTRL F atau F3. Kadang kode tersebut bisa berbeda, kadang ada sepasi kadang tidak so pilih kata kunci yang mendekati. Setelah itu modifikasi kode di atas menjadi:

#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;

Kode warna biru tersebut yang harus di tambahkan, untuk yang wana merah, menunjukan tinggi dari scroll yang di inginkan, jadi sesuaikan menurut selera masing masing. Setelah itu simpang (save), dan liat hasilnya.

2. Membuat Spoiler Pada Komentar

Untuk teori ini saya peroleh dari teman saya di http://fayescool.blogspot.com/, dan tentunya telah melalui tahap ujicoba sebelum saya tulis disini. Untuk membuat spoiler ada dua jenis, yang pertama untuk kotak komentar yang bertingkat dan yang tidak bertingkat.

A. Bertingkat

Untuk kotak komentar yang bertingkat seperti gambar di atas, membuat spoiler pada kotak komentarnya mengunakan cara seperti dibawah ini:

A.1. Cari kode sperti di bawah ini:

<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>

A.2. Setelah menemukan kode seperti di atas, masukan kode di bawah ini, di atas kode A.1. :

<!-- Spoiler Komentar Bertingkat 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;Hide&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&apos;; }' style='margin: 0px; padding: 0px; width: 180px; font-size: 12px;font-weight:bold;' type='button' value='Lihat Komentar'/></div>
<div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'>
<!-- spoiler komentar part1 end -->

A.3. Lalu masukan kode di bawah ini, di bawah kode di atas.

<!-- Spoiler Komentar Bertingkat Part2, start -->
</div></div></div>
<!-- Spoiler Komentar Bertingkat Part2, end -->

A.4. So, kita akan menemukan kode lengkapnya seperti di bawah ini.

<!-- Spoiler Komentar Bertingkat Part1, start-->

<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;Hide&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&apos;; }' style='margin: 0px; padding: 0px; width: 180px; font-size: 12px;font-weight:bold;' type='button' value='Lihat Komentar'/></div>

<div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'>

<!-- Spoiler Komentar Bertingkat Part1, end -->

<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>

<!-- Spoiler Komentar Bertingkat Part2, start -->

</div></div></div>

<!-- Spoiler Komentar Bertingkat Part2, end -->

A.5. Save dan lihat hasilnya

B. Tidak Bertingkat (non treaded)

B.1. Untuk membuat spoiler pada komentar yang non bertingkat ini, kode yang di cari cukup panjang, jadi carilah unjung ujungnya saja. Cari kode seperti berikut dibawah ini, fokuskan kepada warna merah dan biru:

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

<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>

</dl>

B.2. Setelah ketemu masukkan kodenya, masukan kode di bawah ini diatas kode B.1 :

<!-- Spoiler Komentar Tidak Bertingkat 1, Start -->
<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;Hide&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&apos;; }' style='margin: 0px; padding: 0px; width: 180px; font-size: 12px;font-weight:bold;' type='button' value='Lihat Komentar'/></div>
<div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'>
<!-- Spoiler Komentar Tidak Bertingkat 1, end -->

B.3. Kemudian Masukkan Kode berikut dibawah kode B.2 (warna biru) :

<!-- Spoiler Komentar Tidak Bertingkat 2, Start-->
</div></div></div>
<!-- Spoiler Komentar Tidak Bertingkat 2, end -->

B.4. Selengkapnya kode akan menjadi seperti ini:

<!-- Spoiler Komentar Tidak Bertingkat 1, Start -->

<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;Hide&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&apos;; }' style='margin: 0px; padding: 0px; width: 180px; font-size: 12px;font-weight:bold;' type='button' value='Lihat Komentar'/></div>

<div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'>

<!-- Spoiler Komentar Tidak Bertingkat 1, end -->

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

<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>

</dl>

<!-- Spoiler Komentar Tidak Bertingkat 2, Start-->

</div></div></div>

<!-- Spoiler Komentar Tidak Bertingkat 2, End-->

B.5. Save dan lihat hasilnya

3. Mengubah warna kolom komentar

Bagaimana merubah warna pada background pada komentar, kode untuk CSS nya di tandai dengan :

#comments {

Intinya anda harus mengerti sedikit mengenai HTML kode, kemudian setelah ketemu kode seperti di atas, biasanya di CSS (apa itu CSS? intinya di bagian paling atas dari template blog, biasanya sebelum kode <Head>, untuk pengertian lebih lanjutnya hubungi google ya), anda akan memukan koede warna seperti ini #F5F5F5, silahkan ganti kode tersebut dengan kode yang anda sukai.

Untuk mengecek kode warna tersebut bisa mengunakan http://html-color-codes.info/ atau kalau anda ingin memakai warna yang sesuai dengan template anda bisa mengunakan collosr snifler.

4. memberikan warna berbeda pada komentar admin

Nah untuk membuat warna berbeda pada kotak admin, sampai postingan ini di tulais saya saya belum menemukan yang pas, karena begitu banyak metode yang di tawarkan namun belum berhasil saya cobakan. Hal ini dikarenakan perbedaan template yang digunakan, so ada yang berhasil pada template tertetu sementara yang lain tidak.