Title : Add Auto Read More with thumbnail for Blogspot/Blogger Posts
link : Add Auto Read More with thumbnail for Blogspot/Blogger Posts
Add Auto Read More with thumbnail for Blogspot/Blogger Posts
The most effective method to make posts in the online journal landing page to be shown with a programmed "read more" catch and a thumbnail.
To be more particular, this will demonstrate the title of the post, then a short outline with various characters and a thumbnail, that will be the thumbnail of the first picture transferred inside the post. After the thumbnail and the post outline, there will be a "Read More" connection, which when you tap on it, will take you to the genuine post.
This Automatic Read More script will compress substance and a post rundown will be indicated just on the primary online journal page (landing page), classification pages, and chronicle pages.
Adding the Automatic Read more Button on Blogger
- Step 1 : Go to Blogger Dashboard and Select Template and then select Edit HTML to open your Template code.
- Step 2 : Now on your Blogger Template search for this code , Note that this code appears three times on blogger, you got to find the third one.
<data:post.body/>
- Step 3 : Replace the third <data:post.body/> code with this code
Step 4 : Search for </head> and just above it Paste this 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>
<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>
Step 5 : Save your Template and from there you will see it work
Suppose you have any questions on the this tutorial, please feel free to leave them in the comments box below.
Such is the article Add Auto Read More with thumbnail for Blogspot/Blogger Posts
That's an article Add Auto Read More with thumbnail for Blogspot/Blogger Posts This time, hopefully can benefit for you all. Well, see you in other article postings.
You are now reading the article Add Auto Read More with thumbnail for Blogspot/Blogger Posts With link address http://areyoublogger.blogspot.com/2015/08/add-auto-read-more-with-thumbnail-for.html?m=0