How to add 'read more' with thumbnail in blogger posts.

So,on this post i am gonna show you how we add Read more.... with thumbnail in bloggers post.

Installation Guide:

1. Login to blogger Dashboard.
2. Click on Template on left side and click on edit HTML tab.
3. Click on HTML code and Press CLT+F to open Search box,which will show up on top right.
4. Now type </head> 
5. and  add the below code after </head>        

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script type='text/javascript' src='http://widgets.way2blogging.org/blogger-widgets/w2b-auto-readmore-blogger.js' ></script>

NOTE: You Can change numeric value according to your needs in above code

 img Height   --- >          img_thumb_height = 100;

 img Width    --- >          img_thumb_width =120;

   Content Height   ---> summary_noimag - 430;

                             ---> summary_img      - 340;

                                            

6. Finally find <data:post.body/> and replace it with following code

<b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> <b:else/> <div expr:id='&quot;summary&quot; + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script> <div style='clear: both;'/> <span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>

7.Now Save your template , refresh & Check your Blog to see Read more...

SHARE

About JB