Pengaturan Tampilan Komentar Autor Blog

Tips Membuat Komentar Pemilik Blog Berbeda : Walaupun sudah banyak blogger yang membahas tentang tema yang satu ini, Tips dan Trik Blog tetap “nekad” untuk mempostingnya, siapa tahu masih ada para pengunjung yang masih membutuhkannya. Dengan tips tersebut, kita akan membuat tampilan komentar pemilik blog yang berbeda dengan komentar yang dilakukan oleh pengunjung blog. Jika tertarik, silakan ikuti tipsnya berikut ini.

Dengan tampilan komentar yang berbeda maka para pengunjung akan dengan mudah mengetahui adanya jawaban atau komentar balik atas komentar atau pun pertanyaan yang dilakukan oleh pengunjung blog.

Oh, iya tampilan komentar pemilik blog akan berbeda apabila si pemilik blog tersebut melakukan login terlebih dahulu dengan account blogger yang dimiliknya. Jika tidak, maka tampilan komentarnya tidak berbeda dengan tampilan komentar pengunjung lainnya.

Untuk membuatnya, silakan ikuti langkah-langkahnya berikut ini.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, jangan lupa centangi pada “Expand Widget Template”

Ketiga, dengan Ctrl+F (jika menggunakan Firefox), temukan kode "comments-block" sehingga kita akan menemukan baris kode-kode berikut dan kemudian sisipkan kode yang berwarna merah di dalamnya, dan letakkan seperti di bawah ini.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Keempat, setelah itu, temukan code css comment-body. Setiap template mempunyai code yang berbeda namun mempunyai kemiripan. Sebagai contoh, karena pada kesempatan ini saya menggunakan template “Minima” maka kita akan menemukan css comment-body, seperti di bawah ini.

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

Pada template Rounder, kita akan menemukan comment-body, seperti di bawah ini.

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}

Kelima, tempatkan kode dibawah ini di bawah kode yang disebutkan di atas, sehingga menjadi seperti di bawah ini. (Kode yang berwarna merah adalah kode yang baru saja kita tambahkan).

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
background:#C3FDB8;
}

Atau pada template Rounder akan menjadi seperti di bawah ini.

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
background:#C3FDB8;
}

Keterangan

• Jika menginginkan, kita dapat merubah ketebalan border, jenis border, atau warna border, begitu juga dengan background-nya, kita dapat mengganti warna sesuai selera masing-masing.
• Padding bertujuan untuk menggeser ke kanan agar tidak bertabrakan dengan warna background, jika menginginkan dapat mengganti angkanya.

Keenam, simpan template
Ketujuh, selesai

Sekarang, bukalah salah satu postingan dan berikanlah komentar sebagai pemilik account dan pastikan tampilan komentar kita sebagai pemilik account telah berbeda dengan tampilan komentar pengunjung lain. Di bawah ini, screenshot contoh tampilan komentar tersebut.

Selamat Mencoba!!

(Referensi : Tips For New Bloggers)

Artikel Yang Berhubungan