Automatic Add Read More In Blogger With Thumbnail

If you also hide your full post or add read more option in your blog you can insert jump break means read more option in every page manually but if you want to add same thing with all post like us add this code in your blog after add this code in your blog its automatically add read more option in all post of your blog like in my blog . with thumbnail . after this just publish your post with image . if you do not add any image then only summary was show with read more option .

How To Add Automatic Add Read More In Blogger With Thumbnail ?

1. Go to Blogger > Template .

2. Backup your template .

3. Click on Edit HTML.

4. Find ( ctrl+f ) this :

</head>

5. Paste this code before it :

<script type='text/javascript'>
summary_noimg = 540;
summary_img = 350;
img_thumb_height = 100;
img_thumb_width = 100;
</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>

Change this code according to you  :

summary_noimg = 540; : summery length without image
summary_img = 350; summery length with image
img_thumb_height = 100; Thumbnail image height
img_thumb_width = 100; Thumbnail image width

 6. Now find this code :

<data:post.body/>

7. Replace this code with this :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
</b:if>
</b:if>

8. Save your template.

More : If You want to add read more link replace with image click here .

Done !!
If you have any question . please comment :]

Tag : how to , how to blogger , how to blogspot , add readmore option in blogger , add read more in blogspot , automatic add read more in blogger , add read more option with thumbnail , blogger , blogspot , add read more in blog .