Saturday, March 4, 2017
Auto Read More Button With Thumbnails For Blogger
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 todays post we will share auto read more hack with thumbnail for blogger blog, This script will automatically create post summaries with thumbnail. You dont 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>
<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>
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>
Customizing the code above :
You can customize the Read more option by changing the value of the variables below:
- If you want to change image thumbnail size then find these numbers 100 and 120
- To change post cut height without image find these line of code - summary_noimg = 430;
- To change post cut height with image find these line of code - summary_img = 340;
Available link for download
