Architektur Blogger Headline Animator

Architektur Blogger

rss

7 Oktober 2010

Menampilkan Avatar Komentar Pada Blog

Hai sobat kita ketemu lagi..! 
Setelah dilihat-lihat ternyata blog saya tidak ada avatar para komentar sehingga saya mencoba untuk membuatnya dan ternyata berhasil. dan sekalian saja saya postingkan sebagai artikelnya, mungkin artikel ini udah terlalu banyak di postingkan oleh para blogger lainnya, tapi dari pada tangan jari-jari saya diam saja lebih baik saya ketik saja ni artikelnya.. hehehehe...

Artikel semacam ini juga terdapat pada beberapa blog yang sempat saya baca-baca kemudian saya simpulkan mana yang lebih mudah dan tidak menyusahkan dalam prosesnya, bahkan di jamin 100% berhasil.


Pada awalnya tampilan kotak komentar saya seperti pada gambar di bawah ini:

Sehingga setelah di rubah maka avatar komentar saya dapat terlihat seperti pada gambar di bawah ini:


Jika sobat tertarik dan ingin membuatnya..? agar kotak komentar sobat terlihat lebih menarik, Nah mari kita membahas cara menampilkan avatarnya:

1. Login dulu ke blog sobat.
2. Kemudian Setelah berada di Dasbor blog sobat, pilih menu Perancangan.
3. Lalu ke Edit Html dan jangan lupa beri tanda centang pada "Expand Widget Templates"
4. Kemudian carilah code di bawah ini, untuk mempermuda pencarian gunakan CTRL+F

 <dl id='comments-block'>
  
5. Setelah dapat codenya gantikan code tadi dengan code di bawah ini

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

6. Setelah itu cari code berikut ini

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

7. Selanjutnya ganti code tersebut dangan code di bawah ini

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</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. Kemudian copy paste code CSS di bawah ini dan letakan tepat di atas ]]></b:skin>

#comments-block .avatar-image-container img {
background: #fff url(http://i37.photobucket.com/albums/e74/mrphoto16/Hermanblog/avatar.gif) no-repeat left top;
width:32px;
height:32px
}

9. Save template sobat dan lihat hasilnya.

Sumber:  hermanblog dan o-om terima kasih atas artikel-artikel menariknya

Terimakasi atas kunjungan anda..!
Terima Kasih Atas Kunjungan Anda Di Blog Ini. Jika Ingin Artikel Terbaru Langsung Di Kirim Ke Email Anda? Masukan Email Anda Untuk Berlangganan (GRATIS). Klik Tombol Suka Jika Menyukai artikel ini.
Related Posts with Thumbnails
Stumble
Delicious
Technorati
Twitter
Facebook
Reddit

5 komentar:

secangkir teh dan sekerat roti on 12 Oktober, 2010 21:19 mengatakan...

wah saya yang biasa aja dah :)

PIK Remaja Al-Hikmah on 13 Oktober, 2010 06:46 mengatakan...

Boleh juga nich. Langsung Ke TKP tuk mencoba

Andi Wong on 18 Oktober, 2010 18:37 mengatakan...

manteb sob.. ini menjadi tutor yg bagus bagi sobat blogger yg secra tdk sengaja menghapus kode avatar di template blognya.. :)

Amien melody on 08 Oktober, 2011 11:55 mengatakan...

Berhasil gan...:)
Salam kenal:
Amien melody

international pharmacy on 27 Desember, 2011 02:22 mengatakan...

Cool post! How much stuff did you have to look up in order to write this one? I can tell you put some work in.


Posting Komentar

Jangan Lupa Tinggalkan Komentar Anda..! Sebab Komentar Anda Sangat Dibutuhkan Demi Pengembangan Blog ini. Asalkan Jangan Spam Dan Komentar Yang Bersifat Menguji. Makasi Atas Kunjungan Anda Di Blog Ini. Thanks for all of you

Berlangganan via email

Ingin Artikel Terbaru Langsung ke Email anda? Masukan Email Untuk Berlangganan:


Delivered by FeedBurner

Recent Comments



Mau punya buku tamu seperti ini?
Klik di sini (Info Blog)