How to convert Blogger template to Magazine style with Post summaries and Thumbnails

Many times i thought of applying blogger default template to my blog but was not satisfies by the design offered by the templates so i always switched to other templates that are available for free download.. But soon i realized that it’s not a good idea to use those templates as they are not so easy to customize to match our need and are being used by other bloggers at the same time too.. Therefore my blog template will not be unique.,sooner or later you will understand this..

convert blogger template to magazine style

But soon i decided to stick to the template offered by blogger only and customizing them according to my needs..
In this article i will explain you how you can summaries your posts in the home page of your blog to make it look like Magazine or tech blog so to make it look more attractive.
The magazine or newspaper style layout for blogger post are those that displays the post summary with a thumbnail on the homepage .
However there are many ways to achieve this but i am listing the most efficient way to do it!
The tutorial is complied in very easy to understand way and i hope you will love it!
So lets get started,

Step 1.

Login to your blogger dashboard and firstly backup your existing template to make sure that you don’t loose anything important,now got to templates and click on Edit Html button:
Backup template


Step 2.

Click anywhere inside the code area and search below code by pressing CTRL+F keys of your keyword.


Note: You may find the above code more than once ,but you have to stop at the second one in order to see the effect.

Step 3.

Replace the above line of code with the code given below:

Note:You can replace the Read More &#187 text in the line 11 with anything you continue reading or know more etc etc

Step 4.

Now again place CTRL+F to find the below line:

Step 5.

Replace the above line as well and instead add this:

Note:You can replace the Read More &#187 text in line 47 with anything you continue reading or know more etc etc

Step 6.

Now you have to find </head> tag and paste the given script before </head>:

Recommended Reading:  A Complete Guide to help you Choose a WordPress Theme

Step 7.

Below the above script paste the given CSS style

Recommended Reading:  How to make WordPress Website User-friendly for the SmartPhone

Now you are done!

Customizing the Magazine style to suit your needs

1) Remember to change the number of post that you wants to display on the homepage ,just simply going to settings>>>Posts and comments>>>Show at most and type how many posts you want to display.
Number of posts to display
2) See the Step 7 line 25 and line 27,change it to desired number inorder to change the width and height of the post container.
3) You can also change the number of character that you want to be displayed in the summary of the post Just change the values in step 6 line 3,5,7,9,11,13,15,17
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;
  • Doing changes in line 3 will change the number of character in the summary when there will be no image or thumbnail.
  • Doing change in line 5 will change the number of character in the summary when there will be no image or thumbnail.
  • Line 7 will change the height of thumbnail.
  • Line 9 will change the width of the thumbnail.
  • Line 11,13,15,17 will reflect changes in the first thumbnail that is dispalyed
Recommended Reading:  eCommerce SEO Strategy Guide 2016 (Almost Double your Sale)
Subscribe For More Updates
Don’t forget to subscribe for free update in your inbox and if you have any queries or doubts then feel free to comment below or contact us..!!


  1. You are so cool! I don’t think I have read through a single thing like
    this before. So good to discover another person with genuine thoughts on this issue.

    Seriously.. thanks for starting this up. This site is
    one thing that’s needed on the web, someone with a little originality!


Please enter your comment!
Please enter your name here