how to show post like revolution template in blogger

Note : I changed link for Javascript file in this tip .So could you try it again ?


in this style , you can see it show latest posts in each category . How could we make blogger show posts in each category like revolution template above ?

here is demo of revolution template : Revolution City
and here is demo of what we will do with blogger : LIVE DEMO

To do this hack ,we go through two steps .

Step 1: Hide the posts in homepage . Posts in homepage is showed base on time order ,so we have to hide them and find another way to show them base on category .
in general , posts in blogger is showed by a widget called blog1 ,you can check in layout --> edit HTML for accuracy name of widget which show posts .

add this css code after ]]></b:skin> :

<style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

#Blog1 {
display:none;
visibility:hidden;
}

</b:if>
</style>


save template . Now we move on step 2.

Step 2.

Create a HTML/Javascript widget in main section in homepage and paste the code below in this widget :
<style type="text/css">
.featured {
background: #FFFFFF;
float: left;
width: 250px;
margin: 0px 10px 20px 0px;
padding: 10px 10px 10px 10px;
border: 1px dotted #94B1DF;

}

.featured img {
border: none;
margin: 0px 10px 0px 0px;
float: left;
width:70px;
height:70px;
}

#content {
width: 600px;
margin: 0px auto 0px;
padding: 10px 0px 0px 0px;
line-height: 18px;
}

#content h3 {
background: #FFFFFF url(http://farm3.static.flickr.com/2656/3807676662_397525ba0b_o.gif);
color: #FFFFFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
text-align: center;
text-transform: uppercase;
margin: 0px 0px 10px 0px;
padding: 7px 0px 5px 0px;
}

.botline {
border-bottom: 1px dotted rgb(148, 177, 223);
padding: 0px 0px 10px;
margin-bottom: 10px;
clear: both;
}
</style>

<div id="content">

<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = true;

summaryPost = 70; // number character showed in blog post
summaryTitle = 25; // number of character showed in post title

numposts = 3; // number of post showed in each category
home_page = "http://simplexdesign.blogspot.com/"; // your homepage

label1 = "Design";
tLabel1 = "Design";
Title1 = "Design";

label2 = "Showcase";
tLabel2 = "Showcase";
Title2 = "Showcase";

label3 = "Blogger";
tLabel3 = "Blogger";
Title3 = "Blogger";

label4 = "CSS";
tLabel4 = "CSS";
Title4 = "CSS";

</script>

<script src="http://dinhquanghuy.110mb.com/4col-final.js" type="text/javascript"></script>
</div>

in the code above ,change homepage to yours ,change the number of character showed in post title and post summary as you want . Change label1 ,tLabel1 ,Title1 ;label2 ,tLabel2,Title2 ; label3 ,tLabel3 ,Title13 label4 ,tLabel4 ,Title4 in the code to yours .

label is label in which you want to show posts in .
tLabel are showed in More ....
title are showed in title bar of each content block .
Save template . Ok ,done .Check your own result .