Install Embedded Blogger Comment Box on our Blog?

12:39:00 AM |

1. Log in to Blogger
To begin this tutorial, now go to Blogger.com and log in to your account.

2. Go to Edit HTML
In the Dashboard page, now go to Layout/Design > Page Element > Edit HTML.

3. Expand Widget Templates
In the Edit HTML Page, there is one small box called "Expand Widget Templates" next to it, now press that small box.

I strongly suggest you to save your current template, if later you made a mistake on your blog template, you can revert it back by using the existing one. Now click at the link Download Full Template.
save blogs templates

4. Find the code
Now in order to modify the blogger comment box, you must firstly enter the Find mode on your browser. Now, by press Ctrl + F at the same time, you will enter the search mode. Now find the code below:

#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;
}

5. Replace the Code
After locating the code on number 4, now block all of those codes and then replace it using the code below. The CSS below indicates that the new column layout of your blogger comment box will be installed to your blog.

#comments h4 {
margin:0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #000;
}

#bg_commentblock {
width: 100%px;
background: #ffffff;
float: left;
padding:20px;
margin:0 0 10px 0;
border:1px solid #C0C0C0;
}

#commentblock {
width: 90%;
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: 0px 0px 0px 10px;
padding: 0px 0px 10px 0px;
}


.commentdate {
font-size: 12px;
padding-left: 0px;
}


#commentlist li p {
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}


.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}


.commentinfo{
clear: both;
}


.commenttext {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url() no-repeat top left;
}


.commenttext-admin {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url() no-repeat top left;
}

6. Find the Code again
After replacing the old column code with the new one, now by using pressing Ctrl + F, now find these code:

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

7. Replacing the Code
And finding the code on number 6, now block again those codes, replace it with the following code:

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

<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>
<data:commentPostedByMsg/>
</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'>
<data:comment.timestamp/>
</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>


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

8. Saving the current changes
Now you are about to finish the tutorial. By pressing the Save Template button in Edit HTML page, now save the current changes you've just made. It's done guys! Now, the new customized blogger comment box has been successfully embedded to your blog.


Comment Box Configuration

As many of my other tutorial articles, in the end of it, there will be the configurations that can be applied to the new embedded element. Now, in this embedded blogger comment box, i want to show you how to customize the blogger comment box.


Adjusting the Width Size of New Comment Box

Firstly, the code i've already shown you above is customizable. Now look at the code on number 5 of this tutorial and find the code below

#bg_commentblock {
width: 100%;
background: #ffffff;
float: left;
padding:20px;
margin:0 0 10px 0;
border:1px solid #C0C0C0;
}

#commentblock {
width: 90%;
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;
}

As you can see on the code above. The percentage value 100% indicates the width size of the new comment box. By reducing or extending the number into any value, you will be able to adjust the suitable size with your own template. You can also try reducing the size of blogger comment box with the value 400px. And for the property width:90% in the#commentblock section, you must also adjust it with the value from the#bg_commentblock section. So, if you change the first value from 100% to 80%, you must also replace the value 90% with 70%, and so on.