Hello everyone, sorry for not posting for a while. Actually i’m working on a really cool template for blogger with really amazing never before seen features in blogger which include cropping thumbnail for post, infinite scroll like facebook, and more. So overall the next theme is going to be really cool and full of striking features.
So now getting back to this post as the name suggests, this tutorials explains how to create a simple zebra type alternative colored comments in just three steps.
First go to your template code and check the box “Expand widgets template”. Then follow the steps below to get a zebra look.
1. After doing the above steps find(CTRL+F) this code:-
<b:loop values='data:post.comments' var='comment'>below it paste this code
<div class='zebra'>2. The code you found in step one is the staring tag of a loop, So for every starting tag in HTML there is an ending tag. For step one code the ending tag is like this
</b:loop>This code you have to find by scrolling a bit down approximately 30-35 (I‘m taking my template as example) lines below. Remember you have to find first occurrence of this code. After finding place this code just above it.
</div>3. Now search for </head> tag and place this code above it.
<script src='http://code.jquery.com/jquery-1.6.4.min.js' type='text/javascript'/>The code marked bold are color codes which you can change likewise to get your own zebra look.
<script type='text/javascript'><!--//--><![CDATA[//><!--
$(document).ready(function(){
$("#comments-block .zebra:even").css({
'background':'#eeeeee',
'padding':'1px 10px'
});
$("#comments-block .zebra:odd").css({
'background':'#dddddd',
'padding':'1px 10px'
});
});
//--><!]]></script>
Remember I am supposing that Jquery is not installed on your template, if it is installed then you don’t need to include the script with a link in the above code.
Save the template and you’re done. In blog, How-to Guides