Add Read More or make post summary with image thumbnail on blogger.

 

 

With this method,the image thumbnail as well as the Read More button will automatically add to the blog posts.There is also a conventional method for doing this but if we want that each post automatically have Read More button and on the Home page of blog it will show the image thumbnail.

The image thumbnail comes from the first image which we use in our post no matter at what position.Even if we have use only one image and which is at the last of the post.

So here are the steps to be followed:

1.   Go to the dashboard of your blogger account > Design > Edit Html.Now back up your template  before making any changes.

2.    Now Check the expand widget  template which is on the top right side of HTML window.

3.    In the code window look for the line </head> by using ctrt+f .

4.   Now copy the code from http://www.pastebin.com/Dbpkkrdq and paste just after that.


5. Now find this line <data:post.body/> and replace this with the code from http://pastebin.com/pUH9gkci

6.  Now check if it works by clicking preview then click save template and you are done.

Note: If you want to customize the Read More button i.e. its size,color or the text name then edit the line 

<a class='more' expr:href='data:post.url'>Read more ...</a>

If i want the sky blue color and a big size for the read more button my code would be :

<a class='more' expr:href='data:post.url' style='float:left;font-family:arial;font-size:21px;color:skyblue;'>Read more ...</a>.

Moreover we can also customize the snippet by changing value of varibles like thumbnail_mode,summary_img,summary_noimg,img_thumb_height,img_thumb_width.

Its done enjoy. Any doubt feel free to ask in the comments or through mail.