Author Comment Highlight

Berikut ini adalah tips buat Blogger mania yang ingin membuat tampilan blog lebih mantab lagi. Mengingat ada rekues tentang tips ini maka saya coba sempatkan untuk menulis tentang tips ini.

Tips di bawah ini adalah untuk membedakan mana komentar dari pengunjung blog dan mana komentar pemilik blog, yaitu dengan membuat warna yang berlainan satu sama lain. Artinya ketika ada pengunjung blog meninggalkan komentar di blog kita maka warna dari komentar pengunjung blog tersebut akan berbeda dengan warna komentar pemilik blog tersebut.

Tampilan komentar Anang's Blog
Berikut ini akan saya coba jelaskan langkah-langkah dalam melakukan teknik ini.

Pertama-tama anda harus login ke blog anda masing-masing, ya iya lah anda kan mau ngutak-atik blog anda to? Masa anda mau login ke blog saya, mau jadi hacker ya sampeyan?

Langkah selanjutnya setelah anda berhasil login, klik menu Edit Layout pada Dashboard anda dan kemudian pilih menu Edit HTML dan selanjutnya berikanlah tanda centang pada kotak Expand Widget Templates. Dan cari kode id ='comments-block' pada bagian template anda, dan anda akan menemukan 3 buah atribut class yaitu 'comment-author', 'comment-body', dan 'comment-footer'. Nah, kemudian sisipkan kode yang berwarna merah di bawah ini ke dalam template anda. Ok?

<dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<dt class='owner-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:else/>
          <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>

<b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<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>

<b:if cond='data:comment.author == data:post.author'>
<dd class='owner-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:else/>
          <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:if>

        </b:loop>
</dl>

Nah, setelah langkah membuat kondisi if-else di atas terselesaikan dengan sempurna, maka lanjut ke tahap selanjutnya yaitu memberikan hiasan pada masing-masing tipe kondisi komentar baik itu komentar dari pengunjung maupun pemilik blog.

Misalkan yang sangat sederhana sekali yaitu memberikan warna huruf yang berbeda, sebagai contohnya warna dari isi komentar pemilik blog akan ditampilkan dengan warna merah dan huruf tebal. Pertama-tama cari atribut class 'comment-author', 'comment-body', dan 'comment-footer' pada elemen style CSS anda.

Misal saya punya kode di bawah ini:

.comment-body {
margin:0;
padding:0 0 0 20px;
}
.comment-body p {
font-size:100%;
margin:0 0 .2em 0;
}

Copy dan Paste-kan pada atribut class baru yaitu 'owner-Author', 'owner-Body', dan 'owner-Footer' dan lakukan perubahan sesuai yang diinginkan (misal warna merah dan huruf tebal).

.owner-Body {
margin:0;
padding:0 0 0 20px;
}
.owner-Body p {
font-size:100%;
margin:0 0 .2em 0;
color:#FF0000;
text-decoration:bold;
}

Maka hasilnya nanti akan menjadi seperti ini:



Nah jika anda lebih mahir, maka anda bisa memodifikasi tampilannya menjadi sedemikian rupa, tidak hanya merubah warna tetapi juga merubah warna atau gambar background komentar dll lah pokoknya, seperti yang saya punya.

Selamat mencoba.