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

Magazine or newspaper-style templates display text summaries on the home page, stacking columns on top of each other. These types of templates are very popular these days and whether it's a news or tech blog, everyone needs a new magazine style layout for their blog.

There are several ways to display posts this way. One option is to use the More Info script to display a summary of posts and add a conditional tag to the first post to make it more complete than older posts. So, this tutorial will show you how to create a magazine style for the blogger template . By following this guide, you can give your boring and simple blogger template an attractive magazine-style layout .

Visit this demo blog to see what it looks like.

Add a magazine/newspaper style to your blogger template

Step 1 Save your current template to make sure you haven't lost anything important before continuing. Login to your Blogger Dashboard , go to the Templates section and click on the Backup/Restore button. Once you have a copy of the XML template, click on the " Edit HTML " button:

Step 2 Click anywhere in the code area and use CTRL + F to find that line.

Note. You will get this multiple times, but stop at the second one to see the changes.

Step 3 Remove this line and add this code instead:

Continue reading "

Note. You can replace the " More Info " text by changing it to red.

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

Step 5 Delete this too and replace with the following.

Continue reading "

Note. Here you can change the Read Also text, just change the code to the text you want to display in red.

Step 6. Find Check and paste the following entries in front/top.

Step 7. Add CSS styles below the script above:

Customize the magazine layout

1. At the beginning of step 6 of the script is this section:

messages_no_thumb_sum = 290;
entry_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_inchsum = 580;
first_inch_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;

• The first number is the number of characters for small text when there is no image.
• The second number is the number of characters that will be displayed if the image is lowercase.
• Rows 3 and 4 are the height and width (images) of the post thumbnails.
• The same goes for blue, but it only affects the first post. Since the first post is wide, it can contain many characters and we can enlarge the thumbnail.

2. And finally, we have CSS styles. The last thing we've added is the code that defines how the posts will be displayed on the home page - except for the first post, but on the archive pages.

To change the width or height of the envelope's original size, look for the following lines:

Width: Automatic ;
height: 250px ;

Under the first post are the values ​​of other posts, look in this section

Width: 46% ;
height: 230px ;

The width is 46% of the main column width and the height is set to 230px. You may need to check the measurements here to make sure they look correct.

Finally, set the number of posts to display on the home page so that there is no empty space. Go to Settings > Posts & Comments > Show More and select the number of posts to display.