Make your own magazine style blogger template

Magazine style templates or magazine-type samples are those templates that cover entries in summary form stacked in columns

There are several ways to make entries to be displayed in summarized form,this option will use the script to read more and a conditional that will make post with a smaller size on the front page of the blog.

Navigate through  Layout | Edit HTML, check the box Expand Widget Templates and find this line:

<data:post.body/>

Delete it and instead put it:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot;   data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read More...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Now paste before </ head> the following:

<script type='text/javascript'>
summary_noimg = 200;
summary_img = 180;
img_thumb_height = 60;
img_thumb_width = 60;
</script>

<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i  ){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">") 1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop  ;
strx = strx.substring(0,chop-1);
return strx '...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="' img[0].src '" width="' img_thumb_width 'px" height="' img_thumb_height 'px"/></span>';
summ = summary_img;
}

var summary = imgtag   '<div>'   removeHtmlTag(div.innerHTML,summ)   '</div>';
div.innerHTML = summary;
}

//]]>
</script>

 And below it paste this also:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>

.post {
border: 1px solid #2E2E2E;
float:left;
height: 210px;
width: 290px;
margin: 5px;
padding: 0px 5px 5px 5px;
overflow: hidden;
background: #D8D8D8;
}
.post h3 a {
padding-left: 5px;
color: #5A606D;
}
.rmlink a {
color: #39ADCE;
text-decoration:none;
}
h2.date-header {
height:0px;
visibility:hidden;
display:none
}
.post-footer {
text-transform: uppercase;
font: normal normal 68% &#39;Trebuchet MS&#39;, Trebuchet, Arial;
line-height: 1.4em;
}
#blog-pager {
clear:both;
}
</style>
</b:if>
</b:if>