Add Auto Read More with thumbnail for Blogspot/Blogger Posts

Add Auto Read More with thumbnail for Blogspot/Blogger Posts - Hi Brother Are You Blogger, In the article you read this time with the title Add Auto Read More with thumbnail for Blogspot/Blogger Posts, We have prepared this article well for you to read and take the information in it. Hopefully the contents of the post Article BLOGGER TRICKS, Article Random Posts, Which we write you can understand. Okay, happy reading.

Title : Add Auto Read More with thumbnail for Blogspot/Blogger Posts
link : Add Auto Read More with thumbnail for Blogspot/Blogger Posts

Read too


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
<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;,&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 &#187;</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>

Step 4 : Search for </head> and just above it Paste this code


<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 != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 https://areyoublogger.blogspot.com/2015/08/add-auto-read-more-with-thumbnail-for.html

Share this

Related Posts

Previous
Next Post »