Auto Read More with Large/Big thumbnail without Javascript for Blogger Posts
Updated on July 10, 2016
Read More in Blogger simply know as "jump break" in blogger. I have seen 80% blogger using JavaScript to visible some part of the post but the content is still downloading in browser. If you want to check go to any blogger theme, disable the JavaScript and refresh the page, you can see all the content in the browser.
Source:technohalfAuthor: technohalf
Before we get started your first thing need to make sure that you have backup your blogger template.
Step 1: Login to your blog >> Go to Template Section >> Click "Edit HTML" Button
Step 2: Click on Template Box to Find <data:post.body/> and it may occurs 2 to 3 times, replace all if you find around 2 times <data:post.body/> or if you find around 3 times <data:post.body/> replace second and third one, by one of these below provided code
Code 1: Auto read more with thumbnail:
<b:if cond='data:blog.pageType != "item"'>Code 2: Auto read more with thumbnail and display default images if there is no images in that posts
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img class='thumbnail' expr:alt='data:post.title' itemprop='image' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></a>
</b:if>
<div class="snippet">
<data:post.snippet/>
</div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType != "item"'>Step 3: Now its time to Customize thumbnail.
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img class='thumbnail' expr:alt='data:post.title' itemprop='image' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></a>
<b:else/>
<a expr:href='data:post.url'>
<img alt='no image' class='post-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4A_Yph6sZC_ku3RAcnKH_jQH-JIvaIEqIi-gixrDgFPXwN74zTWjLMMKb4wLFTQVtcnH-eyc_L7eh7OQLcQaucqH7PnJgRWrzMhZtCR3wBqJRfU_WgyNaPxWkr2k0MRmcwKq7GT4N3HY/s1600/No-image-available-technohalf.png'/>
</a>
</b:if>
<div class="snippet">
<data:post.snippet/>
</div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
- Display image on left add this before ]]></b:skin> or </style>
.thumbnail {float: left; margin-right: 12px}
- Display the image on right add this before ]]></b:skin> or </style>
.thumbnail {float: right; margin-left: 12px}
How to Increase Snippet/Word Count
Here the JavaScript play the role replace upper highlighted text with this:<div expr:id='"summary" + data:post.id'><data:post.body/></div>Now find </head> and paste this script above this tag:
<script type='text/javascript'>createSnippet("summary<data:post.id/>");</script>
<script type='text/javascript'>Replace snippet_count = 500; 500 to 300 or may 200 as per requirement
snippet_count = 500;
//<![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 createSnippet(pID){
var div = document.getElementById(pID);
var summ = snippet_count;
var summary = '<div class="snippets">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>