Stylish and dynamic comments box for blogger blog

Posted by ravindra Feb 14, 2009

This is quite simple to Build a stylish comments box using Lightbox java scripts . Beautiful comments box make your site attractive; After all first impression is last impression . Today we Build stylish Dynamic comments box using Light box JavaScript . Here we start the stylish comments box using Lightbox JavaScript . there is 6 step to build dynamic comment box for blogger blog.

Step1. 1. login to your blogger blog account and open the blog layout section and click the “EDIT HTML” when you click the edit html page is coming like this ;

Search the </head> tag on your template and paste the CSS for your dynamic comments box before the </head> tag.

#facebox .b {
background:url(http://bollywooodsargam.googlepages.com/b.png);
}

#facebox .tl {
background:url(http://bollywooodsargam.googlepages.com/tl.png);
}

#facebox .tr {
background:url(http://bollywooodsargam.googlepages.com/tr.png);
}

#facebox .bl {
background:url(http://bollywooodsargam.googlepages.com/bl.png);
}

#facebox .br {
background:url(http://bollywooodsargam.googlepages.com/br.png);
}

#facebox {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
text-align: left;
}

#facebox .popup {
position: relative;
}

#facebox table {
margin: auto;
border-collapse: collapse;
}

#facebox .body {
padding: 10px;
background: #fff;
width: 370px;
}

#facebox .loading {
text-align: center;
}

#facebox .image {
text-align: center;
}

#facebox img {
border: 0;
}

#facebox .footer {
border-top: 1px solid #DDDDDD;
padding-top: 5px;
margin-top: 10px;
text-align: right;
}

#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
height: 10px;
width: 10px;
overflow: hidden;
padding: 0;
}

and now copy the JavaScript file link and paste them after your CSS code and before </head> tag.

<script src='http://bollywooodsargam.googlepages.com/jquery-1.2.2.pack.js'
type='text/javascript'></script>
<script src='http://bollywooodsargam.googlepages.com/facebox.js'
type='text/javascript'></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
 $('a[rel*=facebox]').facebox()
})
</script>

Search the <b:if cond='data:post.allowComments'> from your blog templates and Repalce this code

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a>

with this code

<a href='#mydiv' rel='facebox'>Your comments title here</a>

<a href='#mydiv' rel='facebox'>ADD COMMENTS</a>

</b:if>

</div>

<div id='mydiv' style='display:none'>

<b:include data='post' name='comment-form'/>

Below that. look like a this ;