Automatic Read More With Thumbnails for Blogger

Blogger gives us an option to add jump break to posts. It enables us to display a a short summary of the post on the homepage of our blog with a link to the full post. Most of us add jump break to our posts, because displaying a short summary instead of the full post on the main page has many advantages. The main reason is that it increases page views and the visitors can easily get a selection of your posts.

Today I'll share with you a simple script that’ll automatically create a summary of posts and display it on your homepage without using the jump breaks. See the features of it below:

• Short summary with a read more link to the complete post.
• Automatically creates a thumbnail from the first image of the post.
• You can change the number of characters in the summary
• You can adjust the thumbnail size.
• Will work on you old posts too.

Adding Automatic Read More to your Blog

• Navigate to Blogger > Template

• Now in the Template editor search for </head>
• Copy the below code and paste just above or before </head>

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 120;
img_thumb_width = 120; </script>
<script type='text/javascript' src='https://dl.dropboxusercontent.com/s/yao8g2f0ue0z0tk/bloggslab-auto-readmore-for-blogger.js' ></script>

---

NOTE:

• summary_ noimg= 430; – No. of characters in the post summary if no thumbnail image is available.
• summary_img = 340;  - No. of characters in the post summary if there is an image in the post that’s to be used as the thumbnail.
• null_thumb_height = 120; – Thumbnail height in pixels.
• null_thumb_width = 120; – Thumbnail width in pixels.

NOTE 2: If the post has no image only the post summary would be displayed.

---

• Now search for <data:post.body/>
• Replace <data:post.body/> with the below 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>

NOTE: You can change Read more ...  with any text you’d like. For example you can use ‘Continue Reading; or ‘Read full Post".
That’s it. Now save the template.