How to Create Automatic Thumbnail and Read More Function for Blogger

There is the simple way to customize your blog with automatic thumbnail and read more on the content. The steps are as below:

1. Login to blogger.com dashboard.
2. Go to Edit HTML and Expand Widget Templates
3. Find below code

    <data:post.body/>
    

4. Replace <data:post.body/> with below code.

    <p><script type='text/javascript'>
    summary_noimg = 430;
    summary_img = 340;
    img_thumb_height = 100;
    img_thumb_width = 120;
    </script>
    <script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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>
    <span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more</a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>
    

5. Click Save.

Leave a Reply

Your email address will not be published. Required fields are marked *