A few weeks ago, someone comment on a post ask me where i get my lovely blogspot template. Well, this post is not the answer of that question *grin*, but if this help, you can google them with specific keyword. Looking the right template for your blog is an easy – hard process. Some people want a clean white template, some people want colorful template.
If you have a minimalist white theme and want to modify it a little bit, maybe this blogspot tips and tricks will help. In this post I’m gonna show you how to add a code that can make background on your post automatically change. It kinda will look like windows 8 metro UI style.
1. Go to your template section, and click Edit HTML button. Find </head> tag.
2. Now place this Javascript code above/before </head> tag
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5′ type=’text/javascript’/>
<script type=’text/javascript’>
//<![CDATA[
function get_random_color() {
var letters = ‘0123456789ABCDEF’.split(”);
var color = ‘#’;
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 14)];
}
return color;
}
$(function() {
$(“.post”).each(function() {
$(this).css(“background-color”, get_random_color());
});
});
//]]>
</script>
If you want the color only change on homepage add the code below instead:
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5′ type=’text/javascript’/>
<script type=’text/javascript’>
//<![CDATA[
function get_random_color() {
var letters = ‘0123456789ABCDEF’.split(”);
var color = ‘#’;
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 14)];
}
return color;
}
$(function() {
$(“.post”).each(function() {
$(this).css(“background-color”, get_random_color());
});
});
//]]>
</script>
</b:if>
However, this conditional tag will look better on gallery blog, an not so much for blogger default template. I hope you enjoy this posting. Have a nice weekend, everyone!.