Hi bloggy readers,
Have you ever seen the Wordpress plugin comment in other blogs? Yeah, i think the comment box provided by Wordpress is better than the one from Blogger blog, because it's more simple and looks better in blogs.
In the standard mode of comment box provided by Blogger blog service, we are served with the option to pick the comment box that suits us well. There are the:
- Embedded below the post comment box,
- Pop-Up Window comment box and
- Full page comment box.
But, did you know that, there is one more option of blogger comment box that we can apply in our blog, and it's called "Wordpress plugin comment". For your information, not many bloggers know about this type of blogger comment box, i can describe this comment box as a combination of Pop-up Window and Embedded below the post comment box. Actually, this type of comment box was invented by blogger who has succeed hacking the pop-up window of blogger comment box and put it below the post. Interested to apply this Wordpress plugin comment on your Blogger blog? Let's start the tutorial guys!
How to Install Wordpress Plugin Comments on Blogger?
1. Log in to Blogger
To begin this tutorial, now log in to your Blogger account.
2. Go to Setting
In the Dashboard page, now pick a blog that will be added with the new Wordpress wannabe Comment Box, and then go to the Setting page of that blog you've chosen.
3. Pick the sub-tab Archiving
In the Setting page, there are many sub-tabs you can switch. Now press the sub-tab Archiving. After landing to the page of sub-tab Archiving, In the option Enable Posts Pages, set the configuration to Yes. By selecting Yes in that option, will automatically give each of your posts their own unique web page, in addition to appearing on your blog's front page.
Now switch the sub-tab to the Comments. After landing the Comments sub-tab, now look at the option Comment Form Placement, and then make sure that you choose Pop-Up window in that option.
Embedding the Wordpress plugin comment into blogger template
5. Go to Edit HTML
After finished setting the comment box mode on your blog, now press the tab Edit HTML.
6. Give a tick at the Expand Template widget box.
In the Edit HTML Page, there is one small box called Expand Widget Template next to it, now press that small box.
Anyway, before editing the template of your blog, you must firstly save your current template if later, you did a horrible thing to the template code, you can revert your template back to normal again.
Now it's time to search some code sections in your template. To do that, press CTRL + F at the same time and find the code below.
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h3 id='comments'><strong>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</strong>
to “<span style='color: rgb(128, 128, 0); letter-spacing: 0px;'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if>
</span>”
</h3>
<ul class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<li class='commentlist-author'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<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>
<br/>
<a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='clear'/>
</li>
<b:else/>
<li class='commentlist-general'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<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>
<br/>
<a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='clear'/>
</li>
</b:if>
</b:loop>
</ul>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
8. Replace the Code
After locating the code section on number 7, now block from the code <b:includable id='comments' var='post'> until the last code </b:includable> (on number 7) and then, replace it with the code below.
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<!--
<h3 id='comments'><strong>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</strong>
to “<span style='color: rgb(128, 128, 0); letter-spacing: 0px;'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if>
</span>”
</h3>
<ul class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<li class='commentlist-author'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<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>
<br/>
<a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='clear'/>
</li>
<b:else/>
<li class='commentlist-general'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<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>
<br/>
<a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='clear'/>
</li>
</b:if>
</b:loop>
</ul>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
-->
<!-- This is the start of the iframe which contains the comments box -->
<!-- You can change the appearance of the iframe using styling code if you prefer -->
<iframe expr:src='data:post.addCommentUrl' frameborder='0' height='750' scrolling='yes' style='border: none; background:#dddddd;' width='400px'/>
<!-- This is the end of the iframe code -->
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
9. Find the Code
Now enter again the Find mode (Ctrl + F) and find the code below:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
10. Replace the code
After locating the code, now block all the codes on number 9 and replace it with the code below:
<span class
='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
11. Save the Change
Now press the button Save Template to save the current changes you've just made in your blog template. As you can see in your blog article, the Wordpress plugin comment has been successfully installed in your blog.
How to modify the Wordpress plugin comments?
Anyway, there is something you need to know before ending this tutorial about adding Wordpress plugin comment on Blogger. Inside the code section that controls the comment box above, can be modified with some particular styles.
For example, the background color of the comment box is set in the color value #dddddd (on number 8 of this tutorial). So, if you want to change the background color of that Wordpress plugin comment, you can simply change the code #dddddd with any color you want ( see HEX and RGB color chart for more detail).
Good luck bloggy!
Share This Article to Other People Across the World !
Thanks!
Get the fresh update 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
6 comments:
Nice trick... but, how to make a comment form auto width on main wrapper ??
thank u
Thanks for the nice information..
can we not change the width of comment form ?
Hello Preveen Trivedi,
Thanks anyway for the question. Here's the answer.
To resize the width and height of this Wordpress comment box, you just need to change the numeral code on number 8 of this tutorial. Here's the code:
<iframe expr:src='data:post.addCommentUrl' frameborder='0' height='750' scrolling='yes' style='border: none; background:#dddddd;' width='400px'/>
Now pay attention at the code width="400px" i've already marked in the code above.
Hope it helps you..
Daniel Likin
OK, and now how to do this within new Blogger admin look?
Post a Comment