Menampilkan Avatar Teman Anda di Blogspot Comment List

Hai pengunjung setia :). Saat melakukan Blogwalking, saya menemukan artikel Howto yang menarik. Artikelnya mengajarkan bagaimana menampilkan avatar teman anda pada setiap komentar mereka. Saya sudah mencobanya dan berhasil tanpa menghadapai kendala apapun, heheh sip deh pokoknya blog kalian jika pake kostumisasi ini.

Oke cukup basa-basinya, bagi kalian yang mau coba silahkan ikuti langkah berikut:

1. Pertama-tama yang harus anda lakukan adalah sign-in ke blogger.
2. Klik Menu Settings > Comments dan Pilih "Yes" pada Menu Dropdown "Show Profile Images and Comment".
3. Selanjutnya back-uplah template anda terlebih dahulu, dengan cara meng-klik Menu Design > EditHTML > dan klik link "Download Full Template", dan simpa dilokasi yang diinginkan.
4. Aktifkan checkbox pada "Expand Widget Templates", dan carilah kode seperti berikut :

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

5. Jika anda tidak menemukan kode diatas, lakukan langkah berikut,
6. Cari kode 

   <dl id='comments-block'>

   dan ganti dengan   

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

7. Cari lagi kode 

   <a expr:name='data:comment.anchorName'/>

   Dan ganti dengan  

   <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'>
   <div expr:class='data:comment.avatarContainerClass'>
   <data:comment.authorAvatarImage/>
   div>
   b:if>

8. Sedangkan untuk kode CSS-nya, cari kode

   ]]>b:skin>

   dan copy-pastekan kode berikut

   .avatar-image-container {background:url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SrTInZfKwVI/AAA

   AAAAAAwA/xaGlRIqkHDw/s400/default.gif); width:35px;height:35px; }
   .avatar-image-container  img { border:none;

   tepat diatasnya.
9. Langkah terakhir adalah simpan template dengan meng-klik Tombol "SAVE TEMPLATE". Dan cobalah refresh tampilan blog anda dan perhatikan perubahan avatar pada list komentar.
10. Sedangkan jika anda tidak puas dengan ukuran avatar yang sekarang, anda dapat memperbesar avatarnya dengan mengganti kode

    .avatar-image-container {background:url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SrTInZfKwVI/AAA

    AAAAAAwA/xaGlRIqkHDw/s400/default.gif); width:35px;height:35px; }
    .avatar-image-container  img { border:none;}

    dengan kode berikut

    .avatar-image-container{width:50px;height:50px;margin-top:-5px;}
    .avatar-image-container img {background:url(http://3.bp.blogspot.com/_u4gySN2ZgqE/SrSUS1YpxwI

    /AAAAAAAAAv4/DihiWlWRxQs/s400/grav.png);width:50px;height:50px;}

    dan jangan lupa klik "SAVE TEMPLATE". 

Terimakasih pada Anesh, anda juga dapat membaca tutorial aslinya disini.