This tutorial will help you to make posts in the homepage and index to be displayed with
automatic "Read more" button and thumbnail. An another custom way of make your blog look beautiful and fast navigation. by adding this feature to your
blogspot blog you will be enabled to show your posts in the homepage and index pages with the title, a short summary with the number of characters and a thumbnail, thumbnail in the post will be generated automatically through JavaScript from the
first image uploaded inside the post. Right after the
title, summary and thumbnail, there will be a "Read more" link button which when you click on it, it will redirect the user to read the full/actual post.
Well, This
Automatic Read More script will be displayed in the main blog page (
Homepage), Label/Category page, and archive pages. also we can say "Index pages".
Also see : Related Posts Widget with Thumbnails and Summary for Blogger
Preview : Adding Automatic Read More feature in Blogger Posts
Log-in with your blogger account and from the blogger dashboard navigate to
blogger template > Edit HTML.
Click anywhere inside the HTML area and press CTRL + F to enable search box and then type or copy paste below code inside the input box and HIT enter.
<data:post.body/>
Note : after hitting Enter, you'll find this code more than once but you need to stop at the third one.
Now, Replace above code with below code :
<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>
Note:if you don't see any changes after going through all the steps, please try to replace the second <data:post.body/> as well.
Next search for
</head> tag, then copy paste below code just above it.
<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>
Important : - To change the number of characters shown when there is no thumbnail, modify the 490 value in blue. For the number of characters shown when a post has a thumbnail, modify the 400 value.
- If you want larger thumbnails, modify the 160 (height) and 180 (width) values in red.
Finally, Save the changes by clicking on "Save Changes" button. and you're done !
If you have any questions about this tutorial, Feel free to ask by commenting below. :)