Don't Miss

Today, we've another interesting blogger trick and using this trick you can change your blog's simple posts view to a magazine style view. This trick will change your blog posts simple appearance i.e. List style to a beautiful magazine style. There are several ways for creating a magazine style and today we are going to learn one of them. How a magazine style looks like ? Here's a preview of magazine style template. -->

Creating a Magazine Style with Post Summaries and Thumbnails

Step 1. Log in to your Blogger Dashboard
Step 2. Select a Blog >> Go to Template and Backup your template
Step 3. After the Backup click on Edit HTML Button
Step 4. Search (CTRL + F) for the following Tag

<data:post.body/>

Note : You'll find the above tag many times but you've stop at the second one
Step 5. And Replace the above code ( <data:post.body/> ) with the following one (Remove <data:post.body/> and paste the following code instead of it)

<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'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Continue Reading &#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>

Note: You can replace the text Continue Reading with another you like
Step 6. Now search (CTRL + F) for the following tag

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

Step 7. And replace it with the following code

<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'>createSummaryAndThumb1(&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 Reading &#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>

Note: You can replace the text Continue Reading with another you like
Step 8. After that search (CTRL + F) for </head> tag
Step 9. And paste the following code just before/above it

<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 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 = posts_no_thumb_sum;
if(img.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>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.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>' + removeHtmlTag(div.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 rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,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 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; /* color and size of first post border */
}
.first-body { /* first post summary styles */
color: #545454;
font-size: 13px;
text-align: justify;
padding: 5px 10px;
line-height:1.5em;
}
#first h3 a, #first h3 a:visited { /* First Post title styles*/
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 { /* mouseover color for the First Post title */
color: #1061A1;
}
.post { /* small posts container styles */
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; /* color and size for small posts border */
overflow: hidden;
}
.posts-thumb { /* small posts thumbnails styles */
margin-right: 5px;
background: #ddd;
padding: 3px 3px 0px;
border: 1px solid #C4C4C4;
border-radius: 4px;
}
h3.post-title a{ /* small posts titles styles */
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 { /* mouseover color for the Small Posts Ttitle */
color: #005B77;
}
h2.date-header { /* Post date */
display:none;
}
.post-footer { display: none;}
h3.post-title {margin: 0px;}
.readmorebutton { margin-top: 5px;}

.readmorebutton a { /* Read More link styles */
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 {
float: right;
display: inline;
margin: -35px 0px;
border: 1px solid #E1E1E1; /* border for the comment bubble */
background: #EAEAEA; /* background color for 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{
padding: 10px;
color: #6A6A6A;
text-decoration:none;
font-weight: bold;
}
#blog-pager {clear:both;}
</style>
</b:if>
</b:if> 

Customization :
  • In posts_no_thumb_sum = 290; Replace 290 with the number of characters you want to show for the small posts when there is no image available in the post
  • In posts_thumb_sum = 240; Replace 240 with the number of characters you want to show for the small posts when the image is available in the post 
  • In img_thumb_height = 80; Replace 80 with the height of small posts thumbnails
  • In img_thumb_width = 80; Replace 80 with the width of small posts thumbnails
  • In first_no_thumb_sum = 600; Replace 600 with the number of characters you want to show for the first post when there is no image available in the post 
  • In first_thumb_sum = 540; Replace 540 with the number of characters you want to show for the first post when the image is available in the post 
  • In img_thumb_height1 = 145; Replace 145 with the height of first post thumbnail
  • and At last in img_thumb_width1 = 165; Replace 165 with the width of first post thumbnail
To change the height and width for the first post container edit the below codes

width: auto;
height: 250px;

To change the width and height for the small posts container edit the below codes 

width: 290px;
height: 210px;

Step 10. Hit the Save Template button
Now take a  deep breath and check your blog

20 comments to ''How to Create a Magazine Style with Post Summaries and Thumbnails in Blogger"

ADD COMMENT
  1. hi i have implemented slightly different code
    for second post on home page there is unwanted space between post title and post content please check my dummy blog http://webtestcsp.blogspot.in/

    please help

    ReplyDelete
    Replies
    1. Search for the below tag in your template
      padding-top: 35px;
      padding-bottom: 65px;
      and try by changing the values 35 and 65

      Delete
  2. Can we make first post like the small ones??

    ReplyDelete
    Replies
    1. Check this article :
      http://www.blogolect.blogspot.com/2013/12/change-your-blogger-posts-list-to-grid-view.html

      Delete
  3. http://cutefeature.blogspot.com/
    see my blog... Small Post are not working... :(
    plz help

    ReplyDelete
  4. Hello,
    I ve done it but it shows thumbnail only for the first post!

    ReplyDelete
  5. Hi,
    I’m not a code writing person, and I would like to know how to change the post image size bigger and not to distort the portion of the image for all the posts.
    Please see my dummy blog to see what I meant. Thank you so much!
    http://partybashcreations.blogspot.com/

    ReplyDelete
    Replies
    1. Hey Sophie,
      Search for the below code in your template:
      img_thumb_height = 200;
      img_thumb_width = 150;

      Search each line one by one and change the values 200 and 150. Increase or decrease 200 to change the height of the image. Increase or decrease 150 to change the width of the image.

      Delete
  6. hello. I tried it but it refused to save. it was giving me an error problem. what should i do??

    ReplyDelete
  7. Hi, any way to show also the date for every post? :)

    ReplyDelete
  8. http://4metricks.blogspot.in/ view my blog
    i dont want to show comments i,e (0)
    and i want some gap between 1st and second post
    plz tell me how to....

    ReplyDelete
  9. Hi !

    how can i have a line of three column instead of two ? i mean three posts (thumbnails) per line.

    thanks

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. That's very genuine blog post shared.

    ReplyDelete
  12. my post tittle can not show like the demo, how to show like demo , thank you my friends !
    http://www.balitriphavefun.com/

    ReplyDelete
  13. Please it worked on my home page but post lebel link is zero, any help ?

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. Very Good Post, Keep Sending Us Such Informative Articles I Visit Your Website On a Regular Basis.
    rojgarexpress

    ReplyDelete