cara modify kotak komentar dengan efek bubble

Jika tertarik ingin membuatnya langsung saja ikuti langkah-langkah berikut.

1. Login ke Account Blogger sobat. masuk ke Tab Rancangan/Design , kemudian pilih Edit HTML.
2. Beri tanda centang pada Expand Template Widget. (jangan lupa backup template anda dengan mengklik linkDownload Full Template)
3. Cari kode ]]></b:skin> lalu copy code di bawah ini :  ( dan letakkan di atas kode diatasnya. 

/* Comment */#bg_commentblock {color:#fff;width:598px;background:transparent;float: left;padding:10px;margin:0px}#bg_commentblock li{list-style:none}div .comment-body a{color:#0080ff}div .comment-body a:hover{color:#fff}.comment-body {background:transparent;text-shadow:2px 2px 2px #000;padding:5px 0px 0px 7px;-moz-border-radius:10px;margin:15px 0px 20px 0px;border:1px solid #aaa;color:#fff}.comment-body:hover{background:#000; opacity:0.8; font-size:16px;box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;}.comment-body-author {background:#666;background:-moz-linear-gradient(top,#fff,#fbefd9);padding:5px 0px 0px 7px;-moz-border-radius:10px;margin:15px 0px 20px 0px;border:1px solid #aaa;color:#fff}.comment-list li a{color:#00a}.sg1 {position:relative;top:-29px;left:5px;border-color: transparent transparent #aaa transparent;border-style:solid;border-width:12px;height:0;width:0;}.sg2 {position:relative;top:0px;left:5px;border-color: transparent transparent #fff transparent;border-style:solid;border-width:12px;height:0;width:0;margin-top:-52px;}.commentblock {text-align:left;padding:0;margin:0;}.commentblock a{color:#666;}.commentblock a:hover{color:#fff;}#comment-editor{height:300px;width:618px;margin:0;padding:0;}.commentlist {margin-top:10px}.commentlist li {list-style:none;margin-bottom:px;line-height: 20px;padding: 0px;}.author-name a {color:#ff5500}.author-name a:hover {color:#

KET::
--> Ubah teks berwarna biru diatas sesuai dengan kalkulasi berikut :
Lebar main-wrapper dikurangi 22px. 
--> Contoh, Jika lebar main wrapper anda adalah 410px, maka sesuai dengan kalkulasi diatas, lebar tersebut kemudian dikurangi sebesar 22px.
410px – 22px = 388px
Hasil tersebut lah yang kemudian harus di gantikan pada teks berwarna biru diatas.
--> Ganti kode berwarna merah dengan kode warna background yang anda inginkan.
--> Ganti kode berwarna hijau dengan kode warna border/garis pinggir yang anda inginkan.

4. Selanjutnya,cari seluruh kode berikut :

<dl class='commentlist'><b:loop values='data:post.comments' var='comment'><span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'><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/></b:if></dt>pada hari&#160;<dd class='comment-footer' style='display:inline; margin:0px'><span class='comment-timestamp'><a expr:href='data:comment.url' title='comment permalink'></a><b:include data='comment' name='commentDeleteIcon'/></span></dd></span><dd class='commenttext'><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:loop></dl> 

5. Lalu Ganti Semua kode diatas dengan kode berikut ini :

<dl class='commentlist'><b:loop values='data:post.comments' var='comment'><li class='comment' id='li-comment'><div id='commentblock'><div class='comment-author vcard'><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'><data:comment.authorAvatarImage/></b:if><div class='author-name'> <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></div></div><div class='comment-meta'>             <a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a> <b:include data='comment' name='commentDeleteIcon'/></div><div class='comment-body'><div class='sg1'/><div class='sg2'/><b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span><b:else/><p><data:comment.body/><span class='interaction-iframe-guide'/></p></b:if></div></div></li></b:loop></dl> 

 6. Simpan hasil kerja anda. Kini kolom komentar anda sudah lebih cantik bukan ?
 
Semoga bermanfaat.