Add Read More widget in Blogger With Thumbnail

Blogger is one of the most used blog platforms around the world and every person knows the reason behind its success. The reason of blogger can be describe in one word i.e. Google. Yes, Google the king of search engines owns Blogger that's why blogger is the most flexible and famous blog platform.It is very easy to add Read more widget in blogger. First of all backup your template then follow the steps given below.

Steps: to add Automatic Read More



  • Go to Blogger Dashboard >> Template >> Edit HTML.

  • Find  </head>  in the template and replace it with the code given below.
  • <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://mobi2android.com/readmore.js' ></script>
    </head>

  • Now find <data:post.body/> in template and replace it with the 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>
    </b:if>
    </b:if>

  • Finally save your template and that's all.

  • NOTE: if you find more than one <data:post.body/> then replace all <data:post.body/> with the given code