Blogger Trick : Applying Zebra Striping in Comments after each post.

An another idea to improve readability and visual appearance of comments section could be to apply Zebra Striping. In simple words Applying alternate colors.

To add Zebra Striping add the below Javascript : Include jQuery library. Add below line just before </head> section.
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>

Add below code to just before </body> section.

<script type="text/javascript">
$(document).ready(function() {
$("#comments-block dt").each(function(i){
      var divId='zpk' + i.toString();
      $(this).before("<div id='" + divId + "'></div>");
      $(this).next().next().prependTo("#" + divId);
      $(this).next().prependTo("#"  + divId);
      $(this).prependTo("#"  + divId);
      $("#" + divId).css("padding","10px");
       if(i%2==0){
        $("#" + divId).css("background-color","#cdd1f3");
       }else{
       $("#" + divId).css("background-color","#ffffff");
       }
 });
});
</script>

See the demo page here.

Related Posts:
Blogger Trick : Displaying post titles as summary on index pages
Blogger Trick : Adding numbering to comments after each post using jQuery
Blogger Trick : Make sidebar column height equal to the main content using jQuery

Blogger Trick : Displaying post titles as summary on index pages

One more idea that can enhance use experience on index pages is to display a summary of all titles on the page. This way user will not have to scroll though all the content on the page. He/She can directly jump to the title of their choice by hitting the navigation link.

Now .. to add the feature you simply need to add few lines of JavaScript  code just before </body> tag.

<script>
if($(".post-title >a ").length>1)
{
   $("#main-wrapper").prepend("<ol id='summary-list'></ol>");
   $("#summary-list").css("background-color","silver");
   $("#summary-list").css("list-style","none");
   $("#summary-list").css("padding","10px");
   $("#summary-list").css("margin","0px");
   $(".post-title >a ").each(function(i){
      var anchorname=$(this).parent().prev("a").get(0).name;
      $("#summary-list").append("<li><a href='#" + anchorname + "'>" + $(this).text() + "</a></li>");
    });
}
</script>

And you need to include my favorite jQuery library at the top before </title> tag.
<script src='http://geekonweb.com/scripts/jquery-1.2.6.min.js' type='text/javascript'></script>

Thats it..  

see the demo page here

Blogger Trick : Adding numbering to comments after each post using jQuery

Another pretty simple jQuery code to put more information on page.. the way we want.  What if I want to see numbering after or before each comments on my blog. Yes! solution is there and very easily achievable if you have idea about html layout of   Blogger.

In plain English the solution would translate to

1. Find the HTML Element with id="comments-block"

2. Find all DT Element inside it

3. Insert content of your choice. that's it.

and  the above solution in jQuery can be translated to :

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>
</script>
<script type="text/javascript">
$(document).ready(function() {
 $("#comments-block").find("dt").each(function(i){
  $(this).prepend("<span style='color:red;margin-right:2px;" 
  + "padding:2px;background-color:silver'>" 
  +  (i+1).toString() + ".</span>" );
 });
});
</script>

See the demo page with numbered comments here.

WOW jQuery is really great. Definitely the page doesn't looks great ..but the goal is achieved. I leave this creativity to readers. Please do post links of your creativity here.

Blogger Trick - Make sidebar column height equal to the main content using jQuery

With CSS based layouts it is a common problem that columns can not be made of equal height. By Googling you may find may ways to solve this. Here I am going to show you an easy solution to achieve this comparing to the solution given by "Amanda" in her article "How to make columns of equal height in Blogger".

Approach here is also the same but I am using jQuery to cut-short Javascript code.

Assuming we have two columns "main-wrapper" and "sidebar-wrapper" . Below line will simply assign the height of main-wrapper to sidebar-wrapper .. which simply we want.

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/> 
<script type='text/javascript'>
$().ready(function() {
   $('#sidebar-wrapper').height($('#main-wrapper').height());
});
</script >

To add this script fist identify the column-ids and paste just above </title> tag in html editor. If you are not sure how to check for id's you can use Firebug a very popular add-in for Firefox for the same. By just hovering specific HTML gets selected in it. See the image below:

See the live sample here

Related Posts:
Blogger Trick : Applying Zebra Striping in Comments after each post.
Blogger Trick : Displaying post titles as summary on index pages
Blogger Trick : Adding numbering to comments after each post using jQuery