1. Log in to your dashboard--> Design- -> Edit HTML
2. Click on "Expand Widget Templates"
3. Search "Ctrl+F" and find the following code or similar:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<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>
<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>
Replace the upper code with the next one:
<ol class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.adminClass == data:post.adminClass'>
<li class='comment odd'>
<div class='comment-body'>
<div class='comment-author vcard'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='32px' style='margin-bottom:-2px;' width='32px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<cite class='fn'>
<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>
</cite> <span class='says'>says:</span>
</div>
<div class='comment-meta commentmetadata'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<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>
</li>
<b:else/>
<li class='comment even'>
<div class='comment-body'>
<div class='comment-author vcard'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='32px' style='margin-bottom:-2px;' width='32px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<cite class='fn'>
<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>
</cite> <span class='says'>says:</span>
</div>
<div class='comment-meta commentmetadata'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</div>
</li>
</b:if>
</b:loop>
</ol>
4. Next search for ]]></b:skin> and just before it paste the next piece of code:
/*----------------------------------------------------
{--------} Comment {--------}
----------------------------------------------------*/
#commentsbox {
margin-left:5px;
padding:10px;
}
/*----------------------------------------------------------
{--------} Comment Answer Box Title {--------}
-----------------------------------------------------------*/
h3#comments{
font-weight: bold;
font-size: 20px;
padding: 0;
margin: 0 0 15px 0;
padding: 10px;
display: block;
background: #fff;
border: 1px solid #DFDFDF;
}
/*----------------------------------------------------------
{--------} Comment Answer Box Ordered {--------}
-----------------------------------------------------------*/
ol.commentlist {
margin:0px 0 0;
clear:both;
overflow:hidden;
list-style:none;
}
/*----------------------------------------------------------
{--------} Comment Answer Box {--------}
-----------------------------------------------------------*/
ol.commentlist li {
margin:5px 0;
line-height:18px;
padding:10px;
border: 1px solid #dfdfdf;
background:#fff;
}
ol.commentlist li:hover {
background: #fcf4e8;
}
/*---------------------------------------------------------------
{--------} Comment Answer Box List Author Fn {--------}
----------------------------------------------------------------*/
ol.commentlist li .comment-author .fn {
}
/*----------------------------------------------------------
{--------} Comment Answer Box Cite Fn {--------}
-----------------------------------------------------------*/
cite.fn{
color:#555;
font-style:normal;
}
/*-----------------------------------------------------------------------------
{--------} Comment Answer Box Comment Author{--------}
-------------------------------------------------------------------------------*/
ol.commentlist li .comment-author {
color:#555;
}
ol.commentlist li .comment-author:hover {
color: red;
}
/*----------------------------------------------------------------------------------
{--------} Comment Answer Box Comment Author Link A Visited{--------}
----------------------------------------------------------------------------------*/
ol.commentlist li .comment-author a:link,ol.commentlist li .comment-author a:visited{
color: red;
font-weight:bold;
text-decoration:none !important;
}
/*-------------------------------------------------------------------------
{--------} Comment Answer Box Ordered List Avatar {--------}
--------------------------------------------------------------------------*/
ol.commentlist li .comment-author .avatar{
float:right;
border:1px solid #413E45;
background:#413E45;
padding:2px;
}
/*--------------------------------------------------------------------
{--------} Comment Answer Box Ordered List Mata {--------}
---------------------------------------------------------------------*/
ol.commentlist li .comment-meta{
font-size:10px;
}
/*--------------------------------------------------------------------
{--------} Comment Answer Box Ordered List Commentmata Data {--------}
---------------------------------------------------------------------*/
ol.commentlist li .comment-meta .commentmetadata{
color:#000;
}
/*--------------------------------------------------------------------
{--------} Comment Answer Box Ordered List Mata A {--------}
---------------------------------------------------------------------*/
ol.commentlist li .comment-meta a {
color:red;
text-decoration:none !important;
}
/*------------------------------------------------------------------------
{--------} Comment Answer Box Ordered List Paragraph {--------}
--------------------------------------------------------------------------*/
ol.commentlist li p {
line-height:22px;
margin-top:5px;
color:#999;
font-size:12px;
}
/*----------------------------------------------------------------------
{--------} Comment Answer Box Avatar Image Container {--------}
------------------------------------------------------------------------*/
.avatar-image-container {
float:right;
border: 1px solid #ddd;
padding: 4px;
height:48px;
width:48px;
}
/*----------------------------------------------------------------------
{--------} Comment Answer Box Image Container Image {--------}
-----------------------------------------------------------------------*/
.avatar-image-container img {
background:url('#') no- repeat;
height:48px;
width:48px;
}
/*----------------------------------------------------
{--------} Clearing {--------}
----------------------------------------------------*/
.clearfix:after {
content: ".";
display:block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: block;
}
/*----------------------------------------------------
{--------} Hides From IE Mac {--------}
----------------------------------------------------*/
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/*----------------------------------------------------
{--------} Clear {--------}
----------------------------------------------------*/
.clear {
clear: both;
}
/*----------------------------------------------------
{--------} No Clear {--------}
----------------------------------------------------*/
.noclear {
clear: none;
}
Change the : background , border size and color and other options in the code find on step 4, according your desires.
5. Save the template and you're done.
DEMO: See the comments on my site.
Post a Comment