Merubah Tampilan Komentar Efek Bubble

Bosan dengan tampilan komentar yang standar? (Bawaan blogger)
Ayo kita ubah tampilan yang biasa menjadi komentar efek bubble.
Tutor berikut ini murni kode CSS saja.,

Step by step: (Petunjuk)
1. Login ke Akun Blogger
2. Beri tanda centang pada Expand Template Widget (BackUp template untuk jaga-jaga)
3. Cari kode ]]></b:skin> lalu copy kode di bawah ini :  ( letakkan di atas kode ]]></b:skin> )

#bg_commentblock{width:678px;background:#fff;border:1px solid #91bde6;float:left;padding:10px;margin:0px;-moz-border-radius:10px;}
#bg_commentblock li{list-style:none}
.comment-body{background:#eee;padding:5px 10px;-moz-border-radius:10px;margin:30px 0px 0px 10px;border:1px solid #aaa;}
.comment-body .sg1{position:relative;top:-29px;left:5px;border-color: transparent transparent #aaa transparent;border-style:solid;border-width:12px;height:0;width:0;}
.comment-body .sg2{position:relative;top:0px;left:5px;border-color: transparent transparent #eee transparent;border-style:solid;border-width:12px;height:0;width:0;margin-top:-52px;}
.avatar-image-container{float:left;width:40px;height:40px;background:#fff;padding:1px;border:1px solid #ccc;margin:0px 10px 0px 0px;}
.avatar-image-container img { width:40px; height:40px;}

Keterangan:
- Ubah teks warna biru diatas sesuai dengan kalkulasi: 'lebar main-wrapper dikurangi 22px.
Misal, lebar main wrapper kamu 500px, maka lebar tersebut setelah dikurangi 22px menjadi 500px - 22px = 478px.
Hasil nya diganti pada teks warna biru diatas.
- ganti kode warna merah dengan kode warna background yang kamu suka.
- Ganti kode warna hijau dengan kode warna border yang kamu suka.

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. Ganti semua kode diatas dengan kode dibawah 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 dan lihat hasilnya..
Code by uttafreak

---

Note.
Thanks for reading! Suka dengan artikel ini? Kamu bebas menyebarluaskan, mau menggunakan sharing is sexy tool. Atau kamu mau co-pas, gunakan kode yang ada didalam text area sebagai sumber/link back artikel ini. Gunakan Etika!!

<a href="http://yauni.blogspot.com/2011/08/merubah-tampilan-komentar-efek-bubble.html">Merubah Tampilan Komentar Efek Bubble</a>

Posted in: Tips-Tricks Blog