How To Create Auto Read More On Home Page Blog
Monday, April 2, 2018
If you want to create Auto Read More in the homepage view your blog SEO you can follow the tutorial below, this tutorial I recommend for you blogspot platform users.
What is Auto Read More
Auto read more on the blog is a view on the homepage blog containing a row of posts, if the default template blogspot display in the homepage will be a post from the beginning to the end, but if you use auto read more view home page you will be a row of posts, in the form of title and description description.But it all depends on your needs, want to use auto read more or not. If according to BlogSeo better use the display home page like Auto Read More because your blog will look more SEO.
In BlogSeo we will create Auto Read More in 2 categories using javascript and without javascript.
Here are the steps to make Auto Read More
First, How to make Auto Read More using javascript#1. Find <data:post.body/> code.
If there are more than two <data:post.body/>, select the second one. If it fails, choose the third or the first one.
Try it one-one until it works.
Replace or replace the code <data:post.body/> with the code below:
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div expr:id='"summary" + data:post.id'><data:post.body/> </div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</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>#2. Find the code </head> and copy the following code right above it!
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</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){
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: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Done.Second, How to make Auto Read More without javascript
#1. Copy & Paste the following code above code ]]</b:skin>
.thumbnail-post {width:140px;height:80px;float:left;margin:0px 10px 0px 0px;padding-right:15px}
#2. Replace <data:post.body/> code with the following code:
<!-- Auto Readmore Start --> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.firstImageUrl'> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a> <b:else/> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrGbNa8VX0pp5mAfk_K_NcLEfiTeeCP-26hnjRus3S_2FQmmF1nI9z5h4R5PCI_8hECw1M2zpM4J_jKy0-SUtBJwx8Gk626UBr8XUuID-aN8lf9MJRqBbnMKFcG4ssyXNWOxmOkGT4xVon/s220-Ic42/noimage.png'/></a> </b:if> <div class='post-snippet'> <data:post.snippet/> </div> <div class='rm-button-wrap'> <a class='button' expr:href='data:post.url'>Read More</a> </div> </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> <!--Auto Readmore Codes End-->
This way I take from Contohblog.com if you want more details can see its url.
You can follow BlogSeo to get the latest post updates in the subcribe column below.