Jumat, 11 Maret 2011

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



6 komentar:

  1. terimakasih gan dan berbagai

    BalasHapus
  2. @FootNote
    Oke..
    Sama-sama boss..n makasih ya dah singgah di blog-ku, semoga apa yang dicari bermanfaat..
    Selamat mencoba..

    BalasHapus
  3. @ Peluang Bisnis Online Oriflame
    Yang saya tahu kalau untuk wordpress, biasanya sudah tersedia dan tampilannya berbeda antara pengunjung dengan author. Terlebih jika kita membalas komentar langsung terlihat dan berada di bawah komentar yang kita balas tadi.. Jadi lebih tersusun rapi..

    BalasHapus
  4. Thank atas info ini sob. langsung di pratik kan nih
    panas di blog gue "Ketahui Rahsia Buah Dada Wanita (18sx)"

    BalasHapus
  5. @ chris™
    Oke..sipp mas bro..
    Terima kasih dah singgah n semoga infonya bermanfaat...

    BalasHapus


Facebook Comment Box : "Silahkan berikan komentar Anda mengenai tampilan dan isi blog saya ini untuk membangun blog ini jadi lebih baik lagi . . ."