Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara Memasang Avatar Untuk Komentar Anonymous/Name Url.
Salah satu fitur baru yang menarik dari Blogger adalah fitur "Show Your Face", sebuah fitur yang memungkinkan kita menampilkan avatar/foto dari para pengunjung yang berkomentar di blog :D Untuk menampilkan avatar pada bagian komentar tidak sulit, kamu cukup mengaktifkannya dengan cara masuk ke bagian Settings > Comments lalu pilih Yes pada bagian Show profile images on comments? lalu Save :D
Setelah kamu mempraktekan cara diatas kamu akan mendapati avatar-avatar dari para blogger yang telah meninggalkan komentar di blog kamu :)
Cara diatas hanya menampilkan avatar dari pengguna blogger yang melakukan login baik menggunakan akun Google, OpenID, AIM, TypePad, WordPress maupun LiveJournal. Tapi bagaimana dengan yang telah menulis komentar sebagai Anonymous atau menggunakan Name/URL? Tentunya fotonya tidak akan muncul, yang ada hanya bidang kosong saja.
Agar bidang kosong itu nampak lebih rapih diantara avatar-avatar blogger yang telah ada, dapat diakali dengan cara memasang default photo untuk para blogger yang login sebagai Anonymous atau menggunakan Name/URL.
Baca Juga
- Cara Mengembalikan Navbar Blog yang Hilang pada Blog
- Cara Menampilkan Ip Adress Untuk Pengunjung Blog
- Cara Membuat Kotak Tukeran Link pada Blog / Menggunakan Scroll
- Cara Menampilkan Widget Hanya di Halaman Depan Saja
- Cara Menampilkan Foto di Komentar Blog
- Cara Menampilkan Seluruh Postingan Blog pada Label Jika di Klik
- Cara Menampilkan Widget di Halaman Tertentu
- Cara Membuat Tepi Gambar Bershadow Dengan CSS 3
Cara Memasang Avatar Untuk Komentar Anonymous/Name Url pada Blogspot :
- Login pada Blogger
- Masuk mode Rancangan, kemudian Edit HTML
- Centang Expand Widget Templates
- Cari kode berikut ( Cara mencari kode, Tekan Ctrl+F Copy-Paste atau tulis kode yang ingin dicari pada kotak yang muncul lalu tekan Next )
<dl id='comments-block'> atau <dl class='comments-block' id='comments-block'>
- Jika sudah ketemu, ganti kode tadi dengan kode berikut
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
- Setelah itu cari kode ke-2 yaitu kode <a expr:name='data:comment.anchorName'/>
- Lalu letakan kode berikut tepat diatas kode tadi
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if>
- Setelah itu tambahkan CCS ini untuk default photo di atas kode ]]></b:skin>
.avatar-image-container img {
background: url(http://lh3.ggpht.com/_sjkDLNBkESU/S2UosFIpJyI/AAAAAAAAAZY/mmOU-XKKuuQ/s800/emo.png) no-repeat;
width: 35px;
height: 35px;
}
background: url(http://lh3.ggpht.com/_sjkDLNBkESU/S2UosFIpJyI/AAAAAAAAAZY/mmOU-XKKuuQ/s800/emo.png) no-repeat;
width: 35px;
height: 35px;
}
- Bagian yang berwarna merah dapat diganti dengan Url gambar Anda
- Jika sudah selesai semua, Simpan Template
Semoga bermanfaat dan semoga berhasil.
Terima Kasih ^_^
