Hi, this post I’m going to tell you how to insert the comment box widget. It will looks like below :

So why did you need this comment box widget? Simple reason, to make convenient for your readers to drop comments in your blog. Some readers may find dropping comment is something that will causes inconvenient for them. So if you have a comment box under every post, then your readers can simply drop down a comment after reading your post. Sounds simple and easy. As for this comment box widget, once your mouse pointer hover over the comment box, it will automatically jump into ‘comment page’ in Blogger without popping up another new window. Below is how to insert it.

1. Go to Template, then Edit HTML, check the Expand Widget box. Be sure to backup your HTML file before doing all the editing work. You can simply save your current HTML file by either clicking the Download Full Template button or simply copy all the codes and save them in notepad.

2. Look for this tag :

</head>

Then copy this code below and paste them right below the tag :

<!– www.jackbook.com –>
<!– this to hide and show el –>
<script languange=’javascript’>function showcomment(a,b){var jackbookdotcom = document.getElementById(a);jackbookdotcom.style.display = ‘none’;jackbookdotcom = document.getElementById(b);jackbookdotcom.style.display = ‘block’;}</script>
<!– www.jackbook.com –>

3. Now, look for these codes :

<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:comment.body/></p>
</b:if>
</dd>
<dd class=’comment-footer’>
<span class=’comment-timestamp’>
<a expr:href=’”#comment-” + data:comment.id’ title=’comment permalink’>
<data:comment.timestamp/>
</a>
<b:include data=’comment’ name=’commentDeleteIcon’/>
</span>
</dd>
</b:loop>
</dl>

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

4. Replace all the above code with these :

<b:includable id=’comments’ var=’post’>
<div class=’comments’ id=’comments’>
<a name=’comments’/>
<b:if cond=’data:post.allowComments’>

<!– jackbook.com part 1 start –>
<!–
<h4>
<b:if cond=’data:post.numComments == 1′>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<dl id=’comments-block’>
<b:loop values=’data:post.comments’ var=’comment’>
<dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’>
<a expr:name=’”comment-” + data:comment.id’/>
<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=’”#comment-” + data:comment.id’ title=’comment permalink’>
<data:comment.timestamp/>
</a>
<b:include data=’comment’ name=’commentDeleteIcon’/>
</span>
</dd>
</b:loop>
</dl>

<p class=’comment-footer’>
<a expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><data:postCommentMsg/></a>
</p>
–>
<!– jackbook.com part 1 ends –>
<!– actually i almost do nothing with your template, just add that comment, you did it –>

<div id=’comment-parent’ onmouseover=’showcomment(”hoverme”, “comment-child”);’>
<h3 id=’hoverme’ style=’display:block;’>
<img alt=’Your cOmment”s Here! Hover Your cUrsOr to leave a cOmment.’ src=’http://lifewg.googlepages.com/html-code-leave-comment.gif’ title=’Your cOmment”s Here! Hover Your cUrsOr to leave a cOmment.’/>
</h3>

<!– this iframe below is your comment form. you can change the height, or add more style property into it –>
<div id=’comment-child’ style=’display:none; background: #edf5fa; height:400px; border: 1px solid #FCO; height: 700px;’>
<iframe expr:src=’data:post.addCommentUrl’ height=’100%’ scrolling=’yes’ width=’100%’/>
</div>
<!– end of iframe –>
</div>
</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>

5. Done, save your template.

Thanks to Loui$$ for letting me know this great widget.

Popularity: 100%

Posted on July 10th, 2007 by Shawn
Filed under: Blogging Tips

I Strongly Recommend You My Goal Setting Formula System. How You Can Set And Achieve Your Goals Like A Winner. Transform Yourself Into A Super Achiever NOW! Discover My Goal Setting Formula And Achieve Your Goal Setting Success Today!