Add to Blogger Home Page Post Auto Read More with Thumbnail

This post is very important for every blogger template. Because the default blogger template does not have any more options to add or add Read More. As a result, the full post of the blog post shows on the home page and the posts look very distant. Also, if you have only 05 post shows on your blog's home page on the default system, then the blog page will be very large. To get rid of this problem you need to add the Auto Read More option. As a result, the first page of the post and some text will be displayed on your blog's home page and the remaining part will be hidden. To read the remaining part, click the Read More option. You can also show many posters at the same time, as well as the many great features of the home page of this system.

In the above picture, you can see that in this method, first post heading will then read the Read More button for the posting, some parts of the blog post and the rest. It has been created with XML, Css3 and JavaScript.
This will not slow down or slow your blog post.

How to add:

First log in to your Blogger account.

Then click on Template > Edit HTML from the Blogger

Dashboard.

Then press Ctrl + F to search the <data: post.body/> section. This code may be found in more than one place on your blogger template. You can try what you get last. If you do not have the latest, then try to be in the second must be done.

Now copy the code below and replace it with <data: post.body /> .

<b: if cond = 'data: blog.pageType! = & quot; static_page & quot;'>
<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; <data: post.url /> & quot;, & quot; <data: post.title /> & quot; ;); </ script>
<span class = 'readmore' style = 'float: right;'> <a expr:href='data:post.url'> Read More & quot; </a> </ span> </ b: if> </ b: if>
<b: if cond = 'data: blog.pageType == & quot; item & quot;'> <data: post.body /> </ b: if>
<b: if cond = 'data: blog.pageType == & quot; static_page & quot;'> <data: post.body /> </ b: if>

Again press Ctrl + F to hide the </ head> section.

Now copy and paste the JavaScript below on the top of the </head> section.

<script type = 'text / javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 130;
img_thumb_width = 240;
</ 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! = & quot; static_page & quot;'>
<b: if cond = 'data: blog.pageType! = & quot; item & quot;'>
<style type = 'text / css'>
.post-footer {display: none;}
.post {margin-bottom: 15px; padding: 5px; border: 1px solid # 93DAF8; border-radius: 3px}
.readmore a {text-decoration: none;}
</ style>
</ b: if>
</ b: if>

Finally, click Save Template . That's All

CUSTOMIZATION:

When there is no image thumbnail in the post, then how many characters you want to show in the post_no_thumb_sum = 490

Enter the post_thumb_sum = 400 when you want the image to show the image when the image is thumbnail.

You can change the height and width of Thumbnail Image through the blue color option.