Menampilkan Avatar Blogger comments

16.03 | Diposkan oleh depalpiss

Banyak sekali penyedia jasa layanan free download template yang bisa Anda dapati di Internet. Kemudian jika kebetulan Anda sudah mendapatkan design yang cocok untuk blog Anda! namun kemudian ternyata di design template yang baru ini tidak memiliki logo Avatar di komentar blogger Anda. Tenang & kalem, berarti Anda sudah datang ke tutorial yang tepat kali ini.



Berikut adalah tutorial tips dan trik menampilkan avatar komentar di blogger Anda. Setiap kali ada pengunjung yang berkomentar maka avatarnya akan di tampilkan apakah itu avatar Blogger ataupun Name/Url, Anonymous.

Untuk Avatar Name/Url atau Anoymous akan muncul gambar avatar No User atau biasanya di tandai dengan gambar siluet orang.

Baik langsung aja dech :

Login ke dasbor blogger
KLIK Rancangan --- Elemen Halaman --- KLIK Edit HTML

Cari Kode :

]]></b:skin>

Kemudian Copy-paste kode berikut di atasnya :

---

.avatar-image-container img{
background:transparent url(http://i827.photobucket.com/albums/zz194/depalpiss/favicon/user.png)no-repeat;
height:25px;
width:25px;
}

---

Untuk Kode yang saya bold warna merah bisa di ganti dengan gambar direct link (photobucket atau image shark dll) punya Anda jika punya (pastikan ukurannya sesuai dengan height dan widht) dan jika anda ingin membuat logo sendiri  silahkan mampir ke Kumpulan Free Icon Logo

Dan untuk Yang saya bold warna biru bisa di ubah sesuai dengan ukuran avatar favicon yang Anda Kehendaki (pastikan juga jangan terlalu besar maksimal 45X45)

Sudah lanjut kita :

Cari kode berikut

Note : Kode biasanya bisa berbeda-beda antara template yang satu dengan template yang lain ( <dl id atau <div id )

Langkah1 »

<dl id='comments-block'>

Kalau tidak ada cari yang berikut

<div id='comments-block'>

Sudah ketemu :

Langkah2 »

Hapus dan ganti dengan kode di bawah ini :

Note Sesuai dengan kode yang Anda temukan di template

Jika kode <dl id ganti dengan :

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

atau

Jika kode <div id ganti dengan :

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

Langkah3 »

Cari kode :

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

Kemudian hapus kode di atas dan ganti dengan

---

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='25px' style='margin-bottom:-2px;' width='25px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

---

yang saya bold warna merah sesuaikan dengan ukuran pada kode css di atas ]]></b:skin> yang telah Anda Tambahkan sebelumnya, dan SIMPAN TEMPLATE