Modifikasi perwajahan komentar

Kali ini saya hanya sedikit memodifikasi hasil kerja kang jaloee yaitu mengganti perwajahan komentar, di mana saya hanya ingin menambahkan author commentnya beda style atau istilahnya komentar pemilik blog berbeda style dengan komentar pengunjung, seperti yang sobat lihat screenshoot di bawah ini :



Menurut saya perwajahan komentar tersebut sangat menarik dan unik, kalau sobat tertarik ingin membuat perwajahan komentar seperti screenshoot di atas silahkan ikuti langkah-langkah berikut :
1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML
Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!
2. Centang Expand Widget Templates
3. Kemudian cari kode css untuk komentar :

/* Comments
----------------------------------------------- */
#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }
#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
#comments-block .comment-author {
  margin:.5em 0;
  }
#comments-block .comment-body {
  margin:.25em 0 0;
  }
#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
#comments-block .comment-body p {
  margin:0 0 .75em; }

NB: setiap bagian code css komentar berbeda-beda pada setiap template

4. Ganti semua kode di atas dengan kode di bawah :

/* Comments
----------------------------------------------- */
.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;}
.c_avatar {display: block;margin: 0px 0px 7px 0px;}
.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;
}

5. Setelah itu cari bagian di bawah ini :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Kemudian sobat ganti semua kode di atas dengan kode di bawah ini :

<ul class='commentlist'>
<b:loop values='data:post.comments' var='comment'><li>
<div class='pane_l'>
<div class='c_author'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</div>
<div class='c_avatar'/>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='owner-Body'>
<p><data:comment.body/></p>
</div>
<b:else/>
<div class='pane_r'>
<data:comment.body/>
</div>
</b:if>
<div class=' clear'/></li>
</b:loop>
 </ul>



6. Langkah terakhir adalah save template

39 comments:

  1. PERTAMAXXXXXXXXXXXXXXX.....

    WAKAKKKAA

    ReplyDelete
  2. yang pertamakah???
    mas mochal muncul lagi..hoyyeee
    selamat datang bung mochal..ayem waiting foyu

    ReplyDelete
  3. Mochal is back.

    kyknya ane bisa pensiun dari dunia template blogger. ahlinya udah muncul lagi. udah waktunya ane kembali menjadi blogger oon yg cm ngerti bikin posting sederhana aja dan kembali make template minima standart.wekekke.

    templatenya masih loem sempurna yah boz? pasti oc abis nih template.

    ReplyDelete
  4. @ herro > wekekekekke pa kabar bro.. selamat anda yang pertama, hadiahnya mabil di polsek terdefkat
    @ anita > yup anda yang kedua, pa kabar nita :D im back wekekekekkekeke

    ReplyDelete
  5. @ heroo > wew..... ane kan curi ilmu ente suhu herro ....

    ReplyDelete
  6. numpang disave ya om.wahhh ganti template ya hohohoh :D

    ReplyDelete
  7. ini lebih asyik keknya.

    ReplyDelete
  8. Nah gitu dong chal, jangan ngilang lama-lama ..
    semoga sehat dan sukses selalu yach ...

    ReplyDelete
  9. Mochaaaalllll.... :hug:

    Masa bertapamu dah slese? Karena hibernasiku masih on progress :p :p

    Kangen juga nih ma Mochal hehe..

    ReplyDelete
  10. huehuehue........ mas Subagya kembali dengan wajah yang juga baru. Dibuka dengan tutorial super keren lagi..... HORAY!

    ReplyDelete
  11. wah... udah mulai ngeblog lagi ya... wahhh... ganti wajah...

    ReplyDelete
  12. waduh... makin sipp aja nih... hasil semedinya mantap :) hehee boleh tukeran link gak nih?

    ReplyDelete
  13. horeeeeeee brother...hw ar u today.....wah seneng buanget nih ngeliad pak polisi dah on the line lagi....selamad dateng yah kang....jangan hilang lagi yah......

    ReplyDelete
  14. weits....hasil semedi yang ruaaaarrrrr biasa kang....., boleh tukeran link gag :D?

    ReplyDelete
  15. hebat... kata kang herro bapak ini ahlinya ya? wah mesti berguru neh

    ReplyDelete
  16. jovie cuma mau bilang "KANGEEEEEEEEEEN"

    ReplyDelete
  17. Sip bgt tutorialnya kang. :) rasanaya sudah waktunya style comment blog saya diganti.

    ReplyDelete
  18. wew master template blogspot ni, bantuin sayah donk, pliisss. template sayah error ni, iks.
    jadi ngeri ubrak abrik template

    ReplyDelete
  19. akhirnya ^_^ netes juga telor lu chal

    ReplyDelete
  20. wah mas nie keren juga.... palagi kalau ada foto authornya kaya yang kemaren

    ReplyDelete
  21. nah gitu donk nonghol lagi chal.. jgn ke lamaan tapanya entar idenya pada ngilang tuh..

    sy tunggu aksi berikutnya suhu

    ReplyDelete
  22. @ ipank > silahkan om
    @ mantan kyai > menurut saya begitu juga om
    @ abang > amiien bang
    @ uliee > wekekeke kok hibernasi sigh lie
    @ lyla > boleh mbak
    @ hary > boleh bro
    @ fauzan > bisa aja wekekekekke
    @ jovie > aku memang ngangeninkan wekekekkekeke
    @ alam > im back wekekekek
    @ tongkonan > silahkan om, menurut saya bagus juga nigh
    @ ar-ros > sudah saya balas di postingannya bro
    @ cebong > ya soalnya telurnya dagh lama di eram wekekekke
    @ anas > ide bagus nas
    @ diah > yup satuju
    @ jaloee > wekekekekek master suhu bisa aja....

    ReplyDelete
  23. Keren Mas Bagus Tuh Kreatif dan Inovatif banget nih Jadi Inspirasi buat Saya

    ReplyDelete
  24. @ ade > wah mau di hack nih de :D

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete
  26. bgus, tpi perasaan comentnya jdi ga bisa dihapus

    ReplyDelete
  27. mantap pisan euy...
    boleh dicoba nggak bos???

    ReplyDelete
  28. aku coba deh moga berhasil n ok, terima kasih...matur nuhun,ya....

    ReplyDelete
  29. wah ini dia nih yg ane lama cari2 ternyata ada disini jg .. salut deh buat mas :-D

    ReplyDelete
  30. wew....
    ngoprek daleman blogspot blom pernah neh ...
    bisa juga ne jd info

    ReplyDelete
  31. Kang, kok kodenya di Simple Box Template punya kang guruh, gak ada kode Comment diatas? Agak resiko kalo ngeraba-ngeraba.. ngeri error.. Ada solusi Kang?

    ReplyDelete
  32. Wah kere nih, Eh ramenya yg komentar dsni. Ikut ngramein ya....

    oya gan, bisa ngk tmpilan komentarnya admin beda sama pgnjung? gmn caranya?

    ReplyDelete
  33. hehehehe jajal komentar berbeda

    ReplyDelete