Category: All

In my previous post I was telling about how Jackbook has developed a hack to allow blogspot users to post their comments directly from the
post page. However the link to jacks instruction is not working for some strange reason. Nevertheless I am posting the instructions here . Hope Jack will not be offended.. this is just a Repeat-post..

Instructions to allow the comments from post page itself

1. Settings – Comments – Show Comments in POP-UP window – YES
2. Save and Back up you existing template
3. Note that the “Expand Widget Template” has the “tick” mark
4. Locate the code given below and add the lines marked in red

<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’ style=’padding-bottom: 20px;’ 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=’border: none; display: none; height:750px; width: 420px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;’>
<iframe style=’border:none;’ expr:src=’data:post.addCommentUrl’ height=’100%’ scrolling=’yes’ width=’100%’/>
<br/>
<a href=’http://www.jackbook.com/2007/06/how-to-make-readers-leave-comment.html’ title=’Want to have this on your blogger/blogspot?’>Comment Form under post in blogger/blogspot</a>
</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. Write the code below ABOVE the </body> 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 –>

6. Locate the code below and replace the code shown in red with the code written in green


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

7. Save Template and view any Blogpost ( which has comments)

Move your mouse over the comment-form… all the existing comments will be shown allong with the comment form to add new comment

TO ALTER THE HEIGHT-WIDTH-BACKGROUND OF THE COMMENT-FORM
Notice the lines shown in red in the code below
<!– this iframe below is your comment form. you can change the height, or add more style property into it –>
<div id=”comment-child” style=’border: none; display: none; height:750px; width: 420px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;’>
<iframe style=’border:none;’
expr:src=’data:post.addCommentUrl’ height=’100%’ scrolling=’yes’ width=’100%’/>
<br/>
<a href=’http://www.jackbook.com/2007/06/how-to-make-readers-leave-comment.html’ title=’Want to have this on your blogger/blogspot?’>Comment Form under post in blogger/blogspot</a>
</div>
<!– end of iframe –>

• Here height:750px; width: 420px; is responsible for the width and height of the comment form
• You may change the width:99% to occupy the entire width of the colum
• You may change the height:800px to increase the comment form section…. just play around with the values till you are satisfied
• You may change the background: transparent, if you want the comment section to merge with the background of your blog
• You may change to background:#DDDDDD, if you want to give a unique background color for the comment section… Use the hexadecimal color chart for any color of your choice

Hope this helps till Jack’s page is available to all of us once more. do drop your comments to express your appreciationYour appreciation is my motivation