The auto read more with thumbnail for blogger blogs automatically creates post summaries or 'after jump break summaries' in blogger. Displaying the full post with all the images it contains only helps to increase the page load time of your homepage. Most people on visiting your blog, can leave immediately if it takes too long to load. With the use of jump breaks in your posts, instead of lengthy post being displayed on your homepage, a snippet of your recent blog posts is shown, making it easier for visitors to navigate through the blog.
Usually, to add jump breaks in blogger, one will have to manually add the read more tag <!--more-->, or use a template that has already included this feature. Instead of following the manual process, you can add an auto read more with thumbnail in your blogger blog. This will create uniformity in the number of characters displayed in all posts snippet and also make your blog load faster. Follow the steps below to automatically add read more with thumbnails in blogger.
*Go to your Template
*Click on 'Edit HTML'
*Click on 'Edit HTML'
*Using Ctrl+F keys, search for <data:post.body/>
*Replace the second <data:post.body/> you find in your template with the code below
*Replace the second <data:post.body/> you find in your template with the code below
*Also search for the tag </head> in your template<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
*Copy this code below and paste 'above' </head>
*In the first code, to change the text to be displayed, change the highlighted readmore to your desired text.
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
*To change the number of characters to be displayed when there is no image in the post, change the highlighted value 490 to your desired value.
*To change the number of characters displayed when there is an image in the post, change the value 400 in the code.
*To increase the sizes of the images in the post snippet, modify the values 160 for the height and 180 for the width.
Click on "Save"
