Auto Read More Button With Thumbnails For Blogger

By default on blogger you have the option to add a jump break to your blog post, Using this option blogger displayed only a part of your posts on index pages and the link to read the full post will be below. This is a conventional read more option provided by blogger in post editor. In this conventional read more hack, every time you need to insert code in post.

In today's post we will share auto read more hack with thumbnail for blogger blog, This script will automatically create post summaries with thumbnail. You don't need to add any extra code in every blogger post and if you insert image, it appears thumbnail.

Applying Auto Read More

• Go to Design > edit HTML
• Backup your template
• Tick on "Expand Widget Templates"
• In the code window Find this code..
•  
  <data:post.body/>
•  Replace with this code below,

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<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/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read more...</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

  Now, search for </head> and paste the following section of code immediately before it:

 

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
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 = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Now save your template and see...thank you.