How to Create Magazine Style with Post Summaries and Thumbnails on Blogger

The magazine or newspaper style templates are those that display the posts summaries in the homepage by stacking the columns on top of each other. These kinds of templates are very popular nowadays, and whether it is a news or technology blog, everyone needs a fresh magazine style layout for their blogs.

There are several ways to make posts appear this way. An option would be to use the Read more script to display a summary of the posts and add a conditional tag to add a different style on the first post so that it will have a larger width than the older posts. So, this tutorial will show you how to create a magazine style for a Blogger Template. By following this tutorial, you can make your boring and simple Blogger template have an attractive magazine style layout.

To see how it looks, please visit this demo blog.

Adding the Magazine/Newspaper style to a Blogger Template

Step 1. Before proceeding further, please make a backup of your current template to make sure that you won't lose anything important - log into your Blogger Dashboard and go to Template, then click on the Backup/Restore button. After you've got a copy of the xml template, click on the Edit HTML button:

Step 2. Click anywhere inside the code area and search by using CTRL + F keys for this line:

Note: You'll find it more than one time, but stop at the second one in order to see the changes.

Step 3. Remove that line and instead of it add this code:

 

 
Read More »

Note: you can replace the Read More text, by changing the code in red.

Step 4. Now find (CTRL + F) this line:

Step 5. Remove this as well and instead of it add this:

 

Read More »

Note: you can change the Read More text here also, just replace the code in red with the text that you want to show.

Step 6. Find the tag and paste the following script before/above it:

 

Step 7. And below the script above add the CSS styles:

Customizing the Magazine Layout

1. At the beginning of the script from step 6, we have this section:

posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580;
first_thumb_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;

• the first number is the number of characters for the small posts when there will be no image available
• the 2nd number is the number of characters that will show when the small posts will have an image
• the 3rd and the 4th line is for the height and width of the small posts thumbnails (images).
• the same goes for what is in blue, but this affects only the first post. Since the first post is wider, it may contain a larger number of characters and we'll be able to make the thumbnail size larger.

2. And finally, we have the CSS styles. That last thing we added is a code that determines how the posts are going to look on the homepage - and archive pages as well, except for the first post.

To change the width and height, respectively the size for the first post container, look for these lines:

width: auto;
height: 250px;

Underneath the first post are the values for the other posts, just look for this part:

width: 46%;
height: 230px;

The width will ocuppy 46% of the main column width and height is set to 230px. Here you may need to experiment a bit with the sizes in order to make them appear correctly.

Finally, set the number of posts to show on the homepage, so that there won't be any empty space. Go to Settings > Posts and comments > Show at most and select the number of posts that you want to appear.