Friday, July 6, 2007

I have promise Rosiee to create this post, so here I'm. How to let your comment box appear under every posts of your blog? Just Follow 3 simple steps, then you can do it, just little bit html knowledge require. Before I continue, I guest you would wanna see mind comment box under my blog post. Have a look below:


After your pointer hover to the comment box, It's will automatically turn to your original comment box without to load another new page. Nice right? ;)


If you like to have this hack in your blog, please follow below steps:
(Please back up your template before do any changes.)

1. Go to your dashboard - > control panel - > edit html

2. Tick the Expand Widget Templates

Then find below code:

</head>

Copy all this code below, and paste it directly on top of the </head> code.

<!-- 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. Find below html 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>

<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>
</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 below html code:

<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.Then click on the "Save Template" button.

I have to give a credit to Jackbook for his effort to come out with this hack. I combine 2 hacks in 1, so make it easy to bloggers.


Technorati Tags: , ,

10 Comments:

  1. Techmaster said...
    Amazing stuff.
    Tejas Surya said...
    Hi,
    Thank you very much for the information provided. It's very useful. I'll use this in all my blogs.
    ---------------------------------
    Mean while don't forget to visit these blogs and leave your comments.

    India News and Current Affairs
    http://indiavartha.blogspot.com
    -----------------------------------------------------------------------------------------
    Mobiles Tips, Ringtones, Reviews etc.
    http://mobile-india.blogspot.com
    -----------------------------------------------------------------------------------------
    Education, E-Books, Online Learning resources
    http://vidyanavan.blogspot.com
    ------------------------------------------------------------------------------------------
    Step-by-Step tutorials – computers, technology, Internet.
    If u have any problems related to computer and internet, just state your problem here -
    http://tekbysteps.blogspot.com
    ------------------------------------------------------------------------------------------
    Blog for Happy life, Inspiration and spirituality
    http://guruvarya.blogspot.com
    ------------------------------------------------------------------------------------------
    Zhu said...
    I'd love to get this hack for my blog, but it doesn't work for me...

    I have the "new" blogger - could it be the reason ?

    It's really frustrating...
    morinn said...
    thanx a lot for this superb trick!
    Vicky said...
    Love this hack. But can U tell me any similar hack for old blogger. One of my blog genius @ play is still using the older blogger template structure. So, this hack code won't work there. Can u plz give a old blogger version?
    LOUI$$ said...
    Vicky, I will figure out for the old version blogger.
    Budhie said...
    good stuff here ,
    its very usefull for new blogger visit my blog and ask me how to do that.

    visit my blog and comment it

    budhie
    http://budihlm.blogspot.com
    anh Sang và bé Quyên said...
    hỏng hỉu ...
    Ashwini said...
    cool , can you limit the size of which we type in comment till the box only?
    Wisteria Blue said...
    Tell me I am a stupid!
    Did it so many times, though nothing happens at my template!
    Help please I am not able to see the Comment link near my post.

Post a Comment




Blogging,Tutorials,Tricks,Technology,Reviews,Gadgets,Tips and Make Easy Money Online.