Membuat Kolom Komentar Author Berbeda Dengan Pengunjung

K

olom komentar merupakan salah satu bagian penting dalam blog. Dengan kolom komentar yang menarik dalam blog kita akan memberikan citra positif bagi kita sebagai author-nya. Yahh.., paling tidak akan membuat pengunjung tertarik dan betah singgah di blog kita, kemudian penasaran "gimana ya cara bikin kolom komentar ini??", hehe5..

Dalam template klasik yang dimiliki blogspot biasanya tidak terdapat perbedaan kolom komentar antara author dengan pengunjungnya. Jadi secara sepintas sulit buat kita untuk membedakannya, oleh karena itu dalam artikel kali ini, kita akan membahas bagaimana membuat kolom komentar author yang berbeda dengan pengunjung seperti yang saya terapkan pada kolom komentar blog ini. Mau tau gimana caranya?? Silahkan simak langkah-langkah berikut ini :

1. Log in ke blogger
2. Kemudian masuk ke Rancangan
3. Edit HTML (centang kotak Expand Template Widget)
4. Lalu cari kode ]]></b:skin> dan letakan kode di bawah ini diatas kode ]]></b:skin>

.author-comments {
background: #F5FBEF;
border: 1px solid #D0F5A9;
border-left: 15px solid #D0F5A9;
line-height: 1.5em;
padding: 0px 0px 0px 15px;
-moz-border-radius: 5px;
}

5. Setelah itu cari kode yang mirip dengan kode dibawah ini

       <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        <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>
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>
            <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>
</b:if>
            <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>
      </div>

6. Kode yang dicetak biru pada kode di atas adalah kode yang harus ditambahkan/disisipkan

7. Langkah terakhir klik Simpan template
8. Dan silahkan dilihat hasilnya

Gimana, pusing edit HTML-nya..?? Sama, saya juga pusing kalo lagi ngedit HTML, maklum saya baru belajar ngedit HTML secara otodidak, abis gak punya cukup modal tuk jadi programmer handal macem yang di "tipi" itu, huehe5..

Tapi tidak masalah mau pemula atau programmer mahir, yang penting kita kudu semangat belajar n hasil yang saya terapkan di blog ini juga tidak jelek-jelek amat toh [narsis], hehe5..

Oke lah, kayaknya itu deh yang bisa Anda terapkan jika ingin punya kolom komentar seperti yang saya miliki di blog ini.

Selamat mencoba yaa n semoga bermanfaat..!!