How to Install Embedded Blogger Comment Box on our Blog?

Filed Under :

Hi bloggy readers,
Do you know that, we can change the default interface of blogger comment box which already provided by Blogger. There are many reasons i found why bloggers want to change the blogger comment box, mostly, that's because they want to extend or reduce the width size of that default blogger comment box. Interested? Then let's start the tutorial! But dont forget, if it works, share it to your friends with the Digg button beside this post, i will be thankful to you guys.

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.

Okay, that's it for now. Any trouble applying this tutorial on your blog, just ask me, leave your question here, and who knows, i can give a better solution for that.

Good luck Bloggers!

Filed Under :
You might also like to read :
Share This Article to Other People Across the World !
Thanks!
Get the fresh updates from Whatmakesblog.com!
To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe.
Your email address will not be shared to any third party
Delivered by FeedBurner
edit post

13 comments:

Hacker Kecil said...

yeahhh . . .
thanks !! !
I will try

Daniel Likin P said...

Yeah sure, Hacker Kecil. Go ahead.

zeyrulez said...

there is different coding in template according to the version of template we use...

Tika said...

this didn't work :(

Daniel Likin said...

Hi Tika,
What do you mean this tutorial didn't work? i've just tried this tutorial on the new testing blog, and it worked.

Are you having a problem of finding the code on number 6?

I found the number 6 and 7 of this tutorial are little tricky. If you are having a problem on locating the code on number 6, i suggest you to firstly, find the last code data:post.addCommentOnclick and then block the last b:if code while scrolling up to the beginning part of the code comments' var='post.

And then replace those codes with the code on number 7.

Ohh.. i forgot to tell you that the comment box you must use in this tutorial is Embedded below Post (Go to Setting > Comment. In the option "Comment Form Placement" switch to Embedded below post. I think it might working now..

Thanks for the useful comment

SAHL said...

ive used almost everything whic uve posted at your blogs

and same as before

this was also AWESUMM
=)=)


www.blogsforall.co.cc

أحمد المغربي، 1/1/1987، الهرم said...

Thanks :)

hsn said...

Find and share coupon codes and promo codes for great discounts at thousands of online stores.
http://www.megacouponsite.com

abhinav singh said...

helpful tutorial..

Anonymous said...

its rally good tut..

muinlicious said...

Can you give a animated cursor tutorial for blogger.

Gevorg Nazaryan said...

Can I change "Post a comment" line to something else?

Bali Hotels said...

Great post, thanks

Post a Comment

Copyright © 2013 Whatmakesblog.com All Rights Reserved. Reproduction in whole or in part or in any form or medium without written permission is prohibited.
Web Theme Designed by Daniel Likin
Disclaimer | Privacy Policy | Contact Us Google Analytics Alternative