How To Create Post Magazine Style in Blogger Blog

Click any where an your template html section and press CTR+F to find the below code

 <data:post.body/>

• Step #2 Now Replace this line with below code  <data:post.body/>

<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<span class=’post-comment-link’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:post.allowComments’>
<a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><data:post.numComments/></a></b:if></b:if></span>
<div expr:id=’&quot;summary&quot; + data:post.id’><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumbundefined&quot;summary<data:post.id/>&quot;);</script>
<span class=’readmorebutton’ style=’float:right’><a expr:href=’data:post.url’>Continue Read &#187;</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>

You can change Continue Read with your own text

• Step #3 Now Find the below code to find it press CTR+F

 <b:include data=’post’ name=’post’/>

• Step #4  Copy the below code and replace it with above lane

<b:if cond=’data:post.isFirstPost’>
<b:if cond=’data:blog.homepageUrl == data:blog.url’>
<div id=’first’>
<b:if cond=’data:post.title’>
<h3 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class=’first-body’>

<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<div expr:id=’&quot;summary1&quot; + data:post.id’><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumb1undefined&quot;summary1<data:post.id/>&quot;);</script>
<span class=’post-comment-link’><b:if cond=’data:blog.pageType != &quot;item&quot;’><b:if cond=’data:post.allowComments’><a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><data:post.numComments/></a></b:if></b:if></span>
<span class=’readmorebutton’ style=’float:right’><a expr:href=’data:post.url’>Continue Read &#187;</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>

</div>
</div>
<b:else/>
<b:include data=’post’ name=’post’/>
</b:if>
<b:else/>
<b:include data=’post’ name=’post’/>
</b:if>

You can change Continue Read with your own text

• Step #6 Now Find  </head> tag to find it press CTR+F and copy the below code and past before/above the </head> tag

<script type=’text/javascript’>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 600;
first_thumb_sum = 540;
img_thumb_height1 = 145;
img_thumb_width1 = 165;
</script>

<script type=’text/javascript’>
//<![CDATA[
function removeHtmlTagundefinedstrx,chop){
ifundefinedstrx.indexOfundefined”<“)!=-1)
{
var s = strx.splitundefined”<“);
forundefinedvar i=0;i<s.length;i++){
ifundefineds[i].indexOfundefined”>”)!=-1){
s[i] = s[i].substringundefineds[i].indexOfundefined”>”)+1,s[i].length);
}
}
strx = s.joinundefined””);
}
chop = undefinedchop < strx.length-1) ? chop : strx.length-2;
whileundefinedstrx.charAtundefinedchop-1)!=’ ‘ && strx.indexOfundefined’ ‘,chop)!=-1) chop++;
strx = strx.substringundefined0,chop-1);
return strx+’…’;
}

function createSummaryAndThumbundefinedpID){
var div = document.getElementByIdundefinedpID);
var imgtag = “”;
var img = div.getElementsByTagNameundefined”img”);
var summ = posts_no_thumb_sum;
ifundefinedimg.length>=1) {
imgtag = ‘<span class=”posts-thumb” style=”float:left;”><img src=”‘+img[0].src+'” width=”‘+img_thumb_width+’px” height=”‘+img_thumb_height+’px”/></span>’;
summ = posts_thumb_sum;
}

var summary = imgtag + ‘<div>’ + removeHtmlTagundefineddiv.innerHTML,summ) + ‘</div>’;
div.innerHTML = summary;
}

function createSummaryAndThumb1undefinedpID){
var div = document.getElementByIdundefinedpID);
var imgtag = “”;
var img = div.getElementsByTagNameundefined”img”);
var summ = first_no_thumb_sum;
ifundefinedimg.length>=1) {
imgtag = ‘<span class=”first-post-thumb” style=”float:left;”><img src=”‘+img[0].src+'” width=”‘+img_thumb_width1+’px” height=”‘+img_thumb_height1+’px”/></span>’;
summ = first_thumb_sum;
}

var summary1 = imgtag + ‘<div>’ + removeHtmlTagundefineddiv.innerHTML,summ) + ‘</div>’;
div.innerHTML = summary1;
}

//]]>
</script>

<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<style type=’text/css’>
.first-post-thumb {
margin-right: 10px;
border: 1px solid #fff;
-webkit-box-shadow: 2px 2px 5px rgbaundefined0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgbaundefined0,0,0,0.3);
box-shadow: 2px 2px 5px rgbaundefined0,0,0,0.3);
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
background: none;
border: none;
box-shadow: none;
padding: 0;
}
#first { /* Styles for the First Post Container */
width: auto;
height: 250px;
float: left;
margin-bottom:10px;
background-color: #F4F4F4; /* background color for the first post */
border: 1px solid #E5E5E5; /* border for the first post */
}
.first-body { /* Style for the First Post summary */
color: #545454;
font-size: 13px;
text-align: justify;
padding: 5px 10px;
line-height:1.5em;
}
#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/
border-bottom: 2px solid #DFDFDF;
color: #515151;
font-size: 20px;
display:block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-weight: bold;
text-align:left;
line-height: 1.4em;
background: none;
}
#first h3 a:hover { /* Color on mouseover for the First Post Title */
color: #1061A1;
}
.post { /* Styles for the small posts container */
float:left;
margin-right: 10px;
width: 290px;
height: 210px;
padding: 0px 5px 5px 5px;
background: #FCFCFC; /* background color for the small posts */
border: 1px solid #E5E5E5; /* border for the small posts */
overflow: hidden;
}
.posts-thumb { /* Style for the small posts thumbnails */
margin-right: 5px;
background: #ddd;
padding: 3px 3px 0px;
border: 1px solid #C4C4C4;
border-radius: 4px;
}
h3.post-title a{ /* Style for the small posts titles */
font-size: 14px;
color: #747474;
background-color: #F4F4F4; /* Background color for the small posts titles */
width: 95%;
font-weight: bold;
font-family: ‘Arial Narrow’, sans-serif;
padding: 5px;
}
h3.post-title a:hover { /* Color on mouseover for the Small Posts Title */
color: #005B77;
}
h2.date-header { /* Hide the post date */
display:none;
}
.post-footer { display: none;}
h3.post-title {margin: 0px;}
.readmorebutton { margin-top: 5px;}

.readmorebutton a { /* Styles for the Read More link */
color: #767676;
border: 1px solid #E1E1E1;
background: #EAEAEA; /* Background color for the Read More link */
text-decoration:none;
padding: 3px 5px;
font-weight: bold;
font-size: 11px;
}
.post-comment-link { /* Style for the comment bubble of posts below */
float: right;
display: inline;
margin: -35px 0px;
border: 1px solid #E1E1E1; /* border for the comment bubble */
background: #EAEAEA; /* background color for the comment bubble */
font-size: 11px;
position: relative;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
#first .post-comment-link { /* Style for the comment bubble of first post */
margin: -200px 10px;
}
.post-comment-link a{ /* Link color for the comments bubble*/
padding: 10px;
color: #6A6A6A;
text-decoration:none;
font-weight: bold;
}
#blog-pager {clear:both;}
</style>
</b:if>
</b:if>

Now Save your template and refresh your home page to see the result