Show post summary with thumbnail

So here is the code you always wanted to have. Now you can show blog post summary irrespective of whatever theme you have. 

Why show blog post summary?

This question has many answer and all are true like:

To show more posts on home page.

To make home page more attractive.

To let reader to that specific page to read the rest of the post.

And there are many other reasons.

So now whatever theme you have you can make it happen. Here is the instructional video because this is a little tricky for the newbies so I thought to make a video to make it clearer.

How to show post summary on home page:

Go to blogger

 

Edit HTML and save your template first.

Find

 

You might find 2 of those so select the first one.

Replace this code with this


         
         
             

               
             

         
           
   
     

       
     

   
         
           
         
     
     
     

You will see the summary is showing up. Yippee

 It will show up like this:

Customization:

Now if you want to align your featured image left or right you may change it through this code:

To align to left:

Find

 

Just above it paste

 .thumb img {
  float: left;
  margin: 0 10px 10px 0;
}

To align right:

Find

 

Just above it paste this:

 .thumb img {
  float: right;
  margin: 0 10px 10px 0;
}

I hope you enjoyed the tutorial. Share this to the world and subscribe for daily blogger tips.