hapus ruang kosong dibawah kotak komen

Kebiasaannya pada  bahagian bawah kotak komen blogger meninggalkan ruangan kosong yang agak luas .Jika anda ingin merapatkan sedikit jaraknya ikutilah langkah dibawah ini:

masuk ke design--Edit HTML-Expand widgets template h.yjx/
kemudian akan kelihatan kod seperti dibawah:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>,m,ndsb
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>/div>

ketinggian iframe saya warnakan diatas iaitu 410.Untuk merapatkan anda boleh cuba ubah jarak  ke 250 atau ukuran lain yang disukai.
selamat mencuba

Letak kotak komen diatas komen

Kebiasaannya kotak komen berada dibawah komen,jadi kita perlu scroll kebawah untuk membuat komen.Artikel kali ini adalah cara untuk mengubah kedudukannya dan letak diatas ruangan komen.Jadi tentu lebih mudah kerana tak perlu scroll lagi dan terus boleh letak komen.

Untuk mengubahnya:

1.masuk kedesign-edit HTML
2.Klik pada expand widgets templates
dan cari kodibawah ini::

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

3.Kemudian delete kod diatas
4.Seterusnya cari kod ini pula:

<a name='comments'/>

sesudah jumpa letakkan kod dibawah ini dibawahnya:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

5.kemudian klik save.dan lihat hasilnya.

cara pasang widget top commentators

Widget top commentators ini akan memaparkan bilangan siapa paling banyak buat komen.Untuk skrip ini adalah berdasarkan berapa jumlah komen yang telah dibuat oleh seseorang.Dengan memasang widget  juga ini boleh menggalakan pengunjung membuat komen di blog kita.

cara memasangnya:

Terus masuk ke design--Page elements..Add Gadget-
Pilih HTML/Javascript
dan masukkan kod ini:

<script type='text/javascript'>
function pipeCallback(obj) {
 document.write('<ul style="list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlY58zFORtFxPl0Mw-Flp5yRAtQaawnRyxzHNODzlDQG6N3rVpQ7Aym2AbjmOpY9hwWr4MUY_RMRou5e2alQFkWExwjNE2wpeOhpO-9HhZTwq1HagWYtGWF3PY3puFZktYAafv2YFlsEA/s1600/circle-arrow-blue.png);margin-left: 20px;">');
 var i;
 for (i = 0; i < obj.count ; i++)
 {
 var href = "'" + obj.value.items[i].link + "'";
 var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
 </script>
<script type="text/javascript" src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=918c4b96efdf63fee389f2f025085904&EntertheURL=http%3A%2F%2Fjendela-id.blogspot.com&number=10&Nametobeexcluded=yahaya"></script>
<span style="font-size: 70%; float:right;">Get this <a href="http://jendela-id.blogspot.com/2011/02/cara-pasang-widget-top-commentators.html">widget</a></span>

kemudian klik pada save..

Teks berwarna merah gantikan dengan alamat blog anda .Begitu juga dengan yahaya (nama yg dikecualikan dari terpapar) dengan nama sendiri supaya nama kita tidak termasuk juga dalam senarai.
Tukarkan jumlah bilangan pengomen yang hendak ditampilkan pada teks warna biru

selamat mencuba...:)
kredit untuk  http://www.corpseofattic.com/

Cara letak scroll dan background pada komen

Tutorial ini saya buat sebagai menunaikan permintaan rakan-rakan yang ingin membuat scroll dan meletak warna latar belakang pada komen sebagaimana yang ada diblog ini.Kotak ini juga mempunyai border disekeliling dan dengan adanya scroll tentunya lebih memudahkan jika terdapat banyak komen pada sesuatu posting.Loading rasanya lebih cepat jika komen kita mempunyai avatar kerana paparan tidak keluar secara serentak.

Cara membuatnya:
Masuk kedesign--pilih edit html dan cari kod yang berwarna merah seperti dibawah

.post-footer {
margin: 1.5em 0 0;
}

#comments {
height:280px;
overflow:auto;
border:8px ridge #33FF99;
background: #006699;
padding: 20px 20px 10px 20px;
margin: 10px 0px 0px 0px;
}

#comments .comment-author {
padding-top: 1.5em;
background :#009999;
border:1px dotted;
}

Kemudian tambahkan kod dibawahnya seterusnya dengan kedudukan sebagaimana diatas.Ubahkan kod warna jika inginkan warna yang diingini.

Cara letak facebook like pada komen blog

Memasang butang facebook like pada komen blog adalah satu langkah yang baik kerana sebelum meletak komen pengunjung juga boleh klik dan share entri kita dengan rakan facebook yang lain.Butang tersebut juga tampil bersesuaian dengan ruang dibawah post a comment.

Langkah membuatnya:
1.Masuk ke design-Edit HTML dan klik pada expand widgets template
2.Cari kod ini:

<data:postCommentMsg/>

kod pada template mungkin ada lebih dari satu contohnya seperti ini:

kebiasaan nya seperti ini: <h4 id='comment-post-message'><data:postCommentMsg/></h4>

3.Kemudian salin kod dibawah dan letakkan selepas kod <data:postCommentMsg/>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

4.Akhir sekali klik save template.

Cara letak jumlah komen disebelah tajuk posting

Meletakkan jumlah komen disebelah tajuk posting dengan dengan bentuk gelembung  boleh membuatkan blog anda nampak lebih menarik.Jika ingin mengubahsuai tampilan pada blog dengan jumlah komen ini, ikuti langkah berikut: 

1.Masuk ke Design,dan pilih edit HTML,
2.Kemudian klik pada expand template widget

Dan cari kod ini pada template:

<h3 class='post-title entry-title'>

3. Sebelum  atau selepas kod diatas ,letak kod dibawah ini:

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/><br/><span style='font-size:10px'>Komen</span></a>
</b:if>

#Bahagian yang berhuruf merah adalah bagi membuat  perkataan komen dibawahnya .

Jika tiada kod <h3 class='post-title entry-title'> ,cari kod <b:if cond='data:post.url'> dan letakkan kod diatas sebelum kod ini.

4.Kemudian cari kod ini pula:

</head>

5.Letakan sebelum atau selepasnya kod dibawah ini:

<style type="text/css">.comment-bubble {
float: right;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXF2e9ktzpjhbeOSwnLnR8LR4c0PXgtk5-4y-VvRkZ5NHQzDGVSQcQhR5cOUVPVslHq4dAty__bN6VMaVnyKVdTu2V9NLt9zOoqAZ4T3lKR-rcgIjaWcGAF-i0C_aAqExUfLydLjcl9yfD/s1600/Blogger+comment+bubble+%284%29.png) no-repeat;

width: 55px;

height: 38px;
font-size: 18px;
margin-top: -15px;

margin-right: 2px;

text-align: center;
}
</style>

6.kemudian preview dan akhir sekali klik save template

Cara letak background disekeliling kotak komen

Mungkin korang hendakkan sedikit kelainan pada kotak komen.Apa kata kalau kita letakkan background disekelingnya.Background ini boleh kita letakkan warna sahaja atau pun imej.Cara membuatnya agak mudah cuma masukkan kod dibawah ini sebelum kod ]]></b:skin>

• Masuk ke design
• Edit HTML

dan masukkan kod dibawah ini:

Background warna:

.comment-form { background:#BE81F7; border:3px solid #74DF00; margin:0 10px 20px 10px; padding:0 0 0 15px; }


background  imej:

.comment-form { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDjd8JCxXHW2_kB6sV8BCoLth6qNKUMOAWPLZLuojVVTzP11b_z8EQNnZLVGhyqrxFdztZ6M6LQgk7RBkHXG37-UmnVLNH6jTdmMeP4MxLWSCaCuYRZEPlZbpNTaebucYX-8KeMlE5GsE/s1600/animated_50.gif); border:3px solid #74DF00; margin:0 10px 20px 10px; padding:0 0 0 15px; }


Bahagian teks berwarna hijau boleh diubah dengan warna yang dingini dan juga imej dengan meletakkan url bagi imej.
kemudian save template.

Cara pasang widget jumlah post dan jumlah komen

Salah satu widget yang sering kita lihat dipasang pada blog adalah bagi memaparkan jumlah komen dan juga jumlah posting yang ada pada sesuatu blog.Dengan adanya widget ini akan membolehkan pengunjung mengetahui jumlah komen dan posting yang ada diblog anda.

Bagi membuatnya:

1.Masuk ke blogger
2.pilih design-->> page elements
3.Pilih Add Gadget--->>HTML/Javascript
   dan masukkan kod dibawah ini:

<center><script style="text/javascript">function numberOfPosts(json) {document.write('Jumlah Posting: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script><script src="URL blog anda/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script><script src="URL blog anda/feeds/comments/default?orderby=published&alt=json-in-script&callback=rp"></script><script style="text/javascript">function numberOfComments(json) {document.write('Jumlah Komen: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script><script src="URL blog anda/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script><a href="http://jendela-id.blogspot.com/2010/08/cara-pasang-widget-jumlah-post-dan.html"><small>get this</small></a></center>

4.Tukar perkataan berwarna oren kepada nama alamat /url blog anda
5.Kemudian save .

Menukar jumlah komen pada artikel kepada perkataan

  Pada setiap posting pada kebiasaanya akan memaparkan link dengan jumlah komen(sekiranya ia di aktifkankan) dan terpapar "0 comments" dan jika terdapat 1 komen ia akan memaparkan "1 comments",dimana paparan ini agak kurang menarik seolah olah  mcm menyuruh membuat komen(one comment pun boleh diubah pada kod dibawah.)Perkataan ini boleh juga ditukarkan kepada "Leave your Comment" atau lain perkataan yang kita suka.Berikut adalah cara nya:

1. Pada Design pilih,Edit HTMLdan seterusnya klik kotak “Expand widgets template”
2. Seterusnya cari kod ini:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>

dan tukarkan dengan kod ini:

<b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Leave your comment </b:if> <b:if cond='data:post.numComments == 1'> 1 Comment </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if> </a> </b:if>

3. Seterusnya cari kod ini:

<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

dan tukarkan dengan kod ini:

<b:if cond='data:post.allowComments'> <h4> <b:if cond='data:post.numComments == 0'> Leave your comment </b:if> <b:if cond='data:post.numComments == 1'> 1 Comment: </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments: </b:if> </h4>

Tulisan berwarna putih(bold) boleh ditukarkan dengan perkataan yang diinginkan.
Selamat mencuba.

mengatasi masaalah pada kotak komen

Pernahkah anda menghadapi masaalah untuk memasukkan word verification pada komen yang hanya nampak separuh sahaja.Semasa saya blogwalking pernah saya terjumpa masaalah seperti ini pada beberapa blog,Bila terjadi begini tentunya pengunjung membatalkan hasrat untuk membuat komen.Untuk mengatasi masaalah seperti ini terdapat 3 cara yang boleh anda lakukan.

1.Tekan butang tab

bagi mengatasi masaalah perkataan yang hanya muncul separuh.klik pada perkataan word verification dan tekan butang tab beberapa kali sehingga kotak post comment muncul

2.Matikan fungsi show word verification for comments

Log in ke blogger,pilih setting
kemudian klik pada comments dan cari perkataan Show word verification for comments? dan pilih no
seterus nya klik save setting.

3.pasang fungsi scroll pada kotak komen

log in ke blogger
pilih design>>>edit HTML>>tandakan pada expand template widget
cari kod dibawah ini:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>

gantikan perkataan yang berwarna hijau menjadi seperti dibawah:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='yes' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>

Kemudian klik pada save template.

memasang fungsi reply to comment

Bagi memasang reply pada komen adalah memerlukan kita membuat sedikit pengubahsuaian pada template.Hack yang dicipta oleh thisischen ini memudahkan kita membuat reply pada komen.

Cara unuk membuatnya:

Log in ke blog dan dashboard
klik pada Layout dan pilih edit HTML
klik pada expand widget Templates
cari kod ini:

<data:commentpostedbymsg>

lebih mudah gunakan Crtl + F untuk find dan taipkan kod disitu

jika tiada cari tag ini  

<data:commentPostedByMsg/>

atau pun boleh juga pada tag ini :

<dd class='comment-footer'> 

dan masukkan kod ini selepasnya

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=BLOG ID ANDA&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Reply to comment]</a></span>

Tukarkan BLOG ID ANDA ke Id blog anda yang boleh didapati pada URL di dashboard

Klik save template dan lihat hasilnya.
Update:untuk dapat blog ID klik pada Design dan tengok pada bahagian atas ruangan url (tempat alamat yg ada logo blog tu la  :) :) atau masa nak buat posting pun ada pada bahagian atas...

cara letak avatar pada komen

Blogger telah pun memperkenal satu elemen baru bagi membolehkan kita meletakkan  avatar pada komen
Berikut adalah cara meletakkan avatar pada komen.

Log in ke bloggerpilih setting--->comments
kemudian pilih "Show profile images on comment”
jika sekiranya anda memiliki template biasa avatar akan muncul pada komen di blog anda.Tetapi jika anda menggunakan template selain dari terdapat pada blogger anda perlu membuat perubahan pada template.
masuk ke layout---->pilih edit HTML (backup dulu template anda)

Klik pada Expand Widget dan cari kod berikut:

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

jika tidak jumpa bermakna anda kena buat sesuatu,jika tidak jumpa ikuti langkah berikut:

Cari:

<dl id='comments-block'>

gantikan dengan:

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

Kemudian cari semua kod:

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

dan gantikan dengan:

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

</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>

Jika anda ingin menggunakan default avatar pada komen bagi seseorang yang tiada gambar profile avatar gunakan kod CSS dibawah ini:

.avatar-image-container{width:50px;height:50px;margin-top:-5px;}

.avatar-image-container img {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDjnpE-RfQt_mhjG7cLQBNmT9p0-gio7UbCQEHZleJV3eiNCPkhxc5CA5-4FBVD8dgRr_46K7uAZpvGy7wIx2v43c-ECWIaLccS892Iqxl2xmce9pJ75gwsuUumpVbcP58vYMQ6Pm1XLs/s400/grav.png);width:50px;height:50px;}

letakkan diatas kod:  ]] ></ b:skin >

Kemudian simpan template anda dan lihat hasilnya.

cara pasang emoticon pada komen blog

Memasang emoticon smiley ini rasanya dah banyak diposting oleh blog blog lain.Namun saya masukkan pada entri kali ini bagi kemudahan rakan rakan yang blogger yang ingin memasukkan nya pada komen di blog.

Berikut adalah caranya:


1. Masukk ke Blogger -->> design -->> edit HTML

2. kemudian tandakan pada "Expand Widget Template",

3. Sekarang kembali ke template, cari kode ini :

</body>

4.Gunakan kemudahan search Ctrl +F untuk membuatn pencarian

5. salin kod dibawah dan letakkan diatasnya

<script src='http://oom.blog.googlepages.com/smiley.js' type='text/javascript'/> 

6. seterusnya cari kod ini:

<b:if cond='data:post.embedCommentForm'>

7. Pastekan kod dibawah ini dibawah kod diatas:

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>

<b>

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))

</b>

</div>

8.Preview dahulu hasilnya,jika tiada apa apa error,Klik butang save template.

Meletakkan warna background berbeza pada komen

Selalunya komen antara pemilik blog dan pengunjung mempunyai paparan yang sama. Oleh itu agak sukar untuk melihat yang mana satu komen oleh pengunjung dan komen oleh admin sesuatu blog.Disebabkan  itu biasanya pemilik blog meletakkan paparan warna background yang berbeza bagi jawapan untuk pengunjung. Oleh sekiranya anda   ingin meletakkan paparan kotak komen berbeza dan belum tahu caranya, ikutilah langkah dibawah ini.

Pada blog anda pilih Layout
Klik edit html.
Klik pada Expand template widget.
Cari kod yang seakan di bawah ini, kemudian tambahkan kod yang berwarna merah.

/* Comments ----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em; text-transform:uppercase;
letter-spacing:.2em;
color: #999999;
}
#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;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
.admin-comments{
background:#00CC33;(tukarkan kod warna background disini jika ingin mengubah warna)
border:3px solid #FF9966;
padding:5px; 
}
kod  berwarna merah diatas ini adalah yang perlu anda tambahkan.Boleh juga diletakkan diatas kod 
]]></b:skin>
 
Kemudian cari kod dibawah ini  dan tambahkan juga kod yang berwarna merah.
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='admin-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<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>
</b:if>
<dd class='comment-footer'>


 Nota:Kod yang berwarna merah perlu anda tambah
 Kemudian klik preview,jika tiada masaalah ,jangan lupa klik butang save