Cara Mengganti Form Komentar Pada Blogger 2

Banyak alasan mengapa kebanyakan blogger ingin merubah form komentar default blogger pada umumnya,ini dikarnakan mereka ingin menambah atau mengurangi bahkan mempercantik tampilan blog itu sendiri pada bagian box komentar sehingga menarik perhatian para pengunjung blog untuk meninggalkan komentarnya.

Adapun langkah-langkah untuk merubah form komentar pada blogger tersebut adalah:

1. Log in ke blogger dengan ID anda

2. Click Layout

3. Click Edit HTML

4. Click Download full template. silahkan back up template templete (untuk mengamankan templete anda jika terjadi kesalan).

5. Beri tanda centang (check) pada Expand Template Widget.

6. Tunggu beberapa saat sampai proses selesai.

7. Cari Kode Css seperti di bawah ini (Gunakan Ctrl+F untuk mencari kode).

#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;
}
.deleted-comment {
font-style:italic;
color:gray;
}

8. Hapus kode diatas dan ganti dengan kode Css dibawah ini


#comments h4{margin:0;font-weight:bold;line-height:1.4em;text-transform:uppercase;letter-spacing:.1em;color:#000;padding-left:0px;font-size:13px}
#commentblock {
width: 530px;
background: #E8E8E8;
text-align:left;
padding: 20px 20px 10px 20px;
margin: 10px 0px 0px 0px;
border-top: 2px solid #333333;
border-bottom: 1px solid #333333;
}
#commentblock ol{list-style-type:square;margin:0 0 10px 10px;padding:0 0 10px 0}.commentdate{font-size:12px;padding-left:0}
#commentlist li p{margin-bottom:8px;line-height:20px;padding:0}
.commentname{color:#333;margin:10px 0;padding:5px 5px 5px 0}.commentinfo{clear:both}
.commenttext{background: #fff url(http://bambang-file.googlecode.com/files/visitor_thumb[2].png) no-repeat bottom left;clear: both;margin:15px 0 0 0;padding:10px 10px 40px 9px;width: 495px;color:#000;}
.commenttext-admin{background: #aaa9a9 url(http://bambang-file.googlecode.com/files/admin_thumb%5B2%5D.png) no-repeat bottom left;clear:both;margin:20px 0 0 0;padding:10px 10px 35px 10px;width:495px;color:#000;}
div.comment-form-block{width:700px;margin:0 auto}

9. Cari kode dibawah ini.

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<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>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>

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

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<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>
</b:if>

10. Ganti kode di atas dengan kode di bawah ini.

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<div id='bg_commentblock'>
<h4>
Comment :
</h4>
<div id='commentblock'><!--commentblock-->
<strong>ada</strong> <b:if cond='data:post.numComments == 1'>1

<b:else/>
<strong><data:post.numComments/> <data:commentLabelPlural/> ke &#8220;<data:post.title/>&#8221;</strong>
</b:if>
<dl class='commentlist'>
<b:loop values='data:post.comments' var='comment'>


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


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

<data:comment.author/>
</b:if>
mengatakan....
</dt>pada &#160;<dd class='comment-footer' style='display:inline; margin:0px'>
<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></span>




</b:loop>
</dl>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>

<data:post.olderLinkText/>
</a>

&#160;
<data:post.commentRangeText/>
&#160;

<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>

<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

<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>
</div><!--end commentblock-->
</div>
</b:if>

10. Simpan templete.

11. Selesai dan lihat hasilnya .

Keterangan : Kode di atas terutama pada kode css anda dapat merubahnya dan menyesuaikan dengan templete anda terutama pada bagian :

lebar=width: 548px ganti dan sesuaikan lebarnya.


Semoga bermanfaat....