Membuat author gravatar pada blogspot


Banyak cara membuat modifikasi pada bagian komentar, seperti membuat mybloglog avatar, salah satu triknya suhu Jaloee dan lain-lain. Kali ini saya mencoba memberikan salah satu trik baru untuk modifikasi perwajahan bagian komentar dengan menampilkan author gravatar sehingga memberikan kesan seperti komentar themes wordpress. Trik ini memang ada beberapa kelemahan yaitu hanya owner blog yang bisa tampil beda sedangkan untuk komentar pengunjung gravatarnya sama semua.sedangkan keuntungannya adalah tidak memakai javascript sehingga loading pagenya cukup cepat.
Langkah-langkah yang perlu di siapkan adalah
  1. Login ke blogspot kemudian Layout > Edit HTML
  2. Taruh kode di bawah ini di atas ]]></b:skin> :
  3. .commentlistdiv { margin-top: 10px;padding:10px; background: #FFF;border: 1px dotted #ddd;font-size: 0.75em;color: #666;} .commentlistdiv h1 {font-size: 1.3em; color: #366799;border-bottom: 1px solid #eee; line-height: 1.5em;} .commentlist li {background: #fff; border-bottom: 1px dotted #ddd;padding: 20px;} .commentlist li.alt {background: #fff;} .pane_l {float: left;display: inline; width: 160px;min-width: 160px;max-width: 160px; border-right: 1px dotted #ddd;padding-right: 20px;margin-right: 20px;} .pane_r {display: block;line-height: 1.5em;margin-left: 201px;} .c_author {font-size: 0.9em;font-weight: bold;margin: 0px 0px 7px 0px;} .gravatar {padding: 4px;float:right;border:2px solid #ccc;} .c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 7px 0px;} .c_approved {color: #aaa;font-size: 0.9em;} .comment-form { background:#EFEFEF; border:5px solid #cccccc; margin:0 10px 20px 10px; padding:10px 0 0 15px; } .owner-Body {display: block;line-height: 1.5em;margin-left: 201px;} .owner-Body p { font-size:100%; margin:0 0 .2em 0; color:#FF0000; text-decoration:bold; }
  4. Kemudian save hasil pekerjaan sobat dan baru centang expand widget template
  5. Cari kode  <dl id='comments-block'>  dan cari sampai tag pentupnya </dl>
  6. Kemudian ganti dengan kode di bawah ini
    <ol class='commentlist'> <b:loop values='data:post.comments' var='comment'> <li> <div class='' expr:id='data:comment.id'> <div class='pane_l'> <p class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'> <a expr:name='&quot;comment-&quot; + data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel=''><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <br/> Said </p> </div> <b:if cond='data:comment.author == data:post.author'> <div class='owner-Body'> <div class='gravatar'> <img alt='gravatar' class='avatar' height='55' src='YOUR URL PIC' width='55'/> </div> <p><data:comment.body/></p> <div class='c_date'><data:comment.timestamp/></div> <div class='c_approved'/> <b:include data='comment' name='commentDeleteIcon'/> </div> <b:else/> <div class='pane_r'> <div class='gravatar'> <img alt='gravatar' class='avatar' height='55' src='YOUR URL NOPIC ' width='55'/> </div> <p><data:comment.body/></p> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <div class='c_date'><data:comment.timestamp/></div> <b:include data='comment' name='commentDeleteIcon'/> </b:if> </div> </b:if></div> <div class=' clear'/></li> </b:loop> </ol>
    NB : - ganti YOUR URL PIC dengan alamat images photo sobat ukuran photo width=55px dan height=55px - ganti YOUR URL NOPIC dengan alamat images photo pengunjung ukuran photo width=55px dan height=55px
  7. Finally, simpan hasil pekerjaan sobat dan lihat hasilnya
Semoga trik sederhana ini bisa mempercantik bagian komentar sobat

61 comments:

  1. wow ini trik baru lagi ya kang....seeeepppp, aku ijin ambil yah

    ReplyDelete
  2. ooo gitu suhu.. baru ngeh sy. emang kemarin lihat koq ada img gravatar tapi ngga nonghol profil na.. wah sip neh info na

    ReplyDelete
  3. Wah ini yg lg sy cari, keren mas thanks ya tutornya bnr zip ntar dak coba..

    ReplyDelete
  4. infonya keren-keren bang, tp untuk yg ini aku udah pake. btw, kita bs tukeran link ngga? blog aku PR 3.

    ReplyDelete
  5. Mantep banget, sempet bingung juga caranya akhirnya nemu juga disini. Terima kasih banyak mas saya mesti sering2 main kesini biar lebih pinter.

    Thanks alot

    ReplyDelete
  6. saya masih pemula nih di blogspot
    numpang ngopy scriptnya..............
    langsung dicoba nih buat mempercantik blog

    ReplyDelete
  7. Thanks mas...

    saya biasa pake wp tapi skrg lagi iseng2 coba blogspot. dsini dapet ilmu baru deh

    ReplyDelete
  8. Terima kasih, saya juga lagi coba2 pake blogspot..

    Informasinya sangat bagus.

    ReplyDelete
  9. Bgitu toh caranya.. maklum nih pemula. kawan2 juga mampir blog saya yah. dofollow juga :)

    ReplyDelete
  10. Pelajaran berharga, terima kasih atas infonya ...langsung belajar nih

    ReplyDelete
  11. Jadi kelebihan yang utama adalah loading page lebih cepat krn tidak terhubung dengan server gravatar dot com...
    patut dicoba...

    ReplyDelete
  12. ternyata di blogger bisa juga pake gravtar yah .. thx for triknya yah ;)

    ReplyDelete
  13. Oalah begitu toh caranya.. makasih mas baru tau saya. Thanks a lot

    ReplyDelete
  14. Keren nih kalo Blogspot ada gravatarnya. Sip dah infonya. Mo pasang gambar kepiting ah...

    ReplyDelete
  15. Makasih yach udah saya coba...MANTAP

    ReplyDelete
  16. Kalau agar semuanya tampil spt di WP gmn Ruh?

    ReplyDelete
  17. Thanks tutorialnya....keep posting...

    ReplyDelete
  18. thanks mau saya test yah, nanti kalau gabisa balik lagi kesini yah :D

    ReplyDelete
  19. kalo naruh adsense di atas coment gimana boss

    ReplyDelete
  20. thanks infonya bos....perlu di coba nih....

    ReplyDelete
  21. biar lebih keliatan jelas antara admin dan komentator, sip keren abiz

    ReplyDelete
  22. Trik ini memang ada beberapa kelemahan yaitu hanya owner blog yang bisa tampil beda sedangkan untuk komentar pengunjung gravatarnya sama semua


    Pengunjungnya juga bisa tampil gravatarnya kan Mas? Asal di profil bloggernya ada foto/gambarnya?

    Soalnya di komentar blog ini juga ada beberapa pengunjung yang gravatarnya muncul tu...

    ReplyDelete
  23. @blog mamet : itu sudah saya modif mas, karena sekarang blogspot ada fasilitas gravatar

    ReplyDelete
  24. template di blog nya bagus juga nih lebar, pake yg mana nih mas kalo di menu blogspot...thx

    ReplyDelete
  25. Mau nanya bos, your url pic aku mengerti. tapi your url nopic itu gimana maksudnya? maksudnya alamat apa yg kita masukkan?

    ReplyDelete
  26. hmmm...uedan rek,,,,......bgus infone...thx ea mas subagya....
    kpn2 mmpir jg k blogq lo....hehehe..
    qw psti bngga klo blogq dkunjungi sma pmilik blog dg pR 5.....scara sya sndiri bru pR 2 .....hehhheee

    ReplyDelete
  27. @padly : makud url nopic adalah gravatar untuk orang lain bukan gravatar kita btw postingan ini sudah ga update karena blogspot sudah mengeluarkan feature gravatar.

    ReplyDelete
  28. hebat mas...ijin dicopy kode nya mas buat belajar, salam kenal mas

    ReplyDelete
  29. mau aku coba pada blogspot ku hmmm... makasih banyak ya mas infonya top banget

    ReplyDelete
  30. cobain ah, thank for de tpis brader

    ReplyDelete
  31. gan, author gravatar apa ya??
    maklum newbie

    ReplyDelete
  32. mangstab gan... siap dipraktekkan...
    ntar yang anonym tak ganti fotoQ,,

    ReplyDelete
  33. boleh juga tipsnya... thanks ya ..
    ntar tak coba di websiteku....

    ReplyDelete
  34. walah, itu namanya autor gravatar to mas.. baru tahu.. makanya dari dulu cari2 info ttg ini susah nemunya.. trims bgt

    ReplyDelete
  35. Di coba dulu ya, mudahan gak bikin pusing..

    ReplyDelete
  36. Pingin nyoba dulu.. makachi infonya ya.. :) sukses slalu..

    ReplyDelete
  37. bagus nih infonya , makasih mas bro

    ReplyDelete
  38. lumayan rumit gan.. tapi patut ane coba.. bagus buat hias blog ane

    ReplyDelete
  39. mas,apakah ini mempengaruhi kecepatan load page nya? takutnya kalo malah makin memperlambat mas, mohon info dan pencerahannya, terimakasih mas

    ReplyDelete
    Replies
    1. menurut saya tidak kang... karena tidak menggunakan java script

      Delete
  40. Blognya keren kenapa kok di belikan domain .com

    ReplyDelete
  41. Thank infony mas, bru tau gue caranya,,

    ReplyDelete
  42. sangat mantaf tutorialnya ijin coba gan, makasih

    ReplyDelete
  43. coba praktekin dulu

    ReplyDelete
    Replies
    1. Hehehehe blogger trik nya udah ga Update lagi om...

      Delete