Home » Blogger Platform Tips » How To Add Auto Read More and Post Thumbnails To Blogger | blogger auto read more.
How To Add Auto Read More and Post Thumbnails To Blogger | blogger auto read more.
September 25, 2012 by Joseph Adediji 2 Comments
inShare
By Default, blogger will display your full blog posts on the homepage which to me and to so many people it is absolutely not cool. Having full post on your blog homepage increases load time and makes your blog look “old schooled”. Adding Auto read more to blogger is quite easy, just use the blogger auto read more scripts below.
The blogger auto read more function I will be sharing with you will automatically create post excerpts for you and also add a thumbnail image when an image is present in the post. It will also improve your page speed and the thumbnail images will improve your blog posts CTR.
Adding the blogger auto read more is quite easy, you will only be adding two codes at two locations in your blog HTML template editor.
So, let’s add our Blogger Automatic Read More.
Note: Make sure you tick the Expand Widgets Template ate the Top of the HTML Editor.
How To Add Auto Read More With Thumbnails For Blogger?
Go to Your blogger Dashboard > Template/Design > Edit HTML
Now Find – </head> tag
Place the code below right above the </head> tag.
<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>
To change the image Thumbnail size, find these numbers 100 and 200 and change to your desire width and height.
Now Find <data:post.body/> and replace it with the code below.
<b:if cond=’data:blog.pageType == “item”‘>
<data:post.body/>
<b:else/>
<b:if cond=’data:blog.pageType == “static_page”‘>
<data:post.body/>
<b:else/>
<div expr:id='”summary” + data:post.id’><data:post.body/></div>
<script type=’text/javascript’> createSummaryAndThumb(“summary<data:post.id/>”);
</script>
<a class=’more’ expr:href=’data:post.url’>Read more …</a>
</b:if>
</b:if>
Now, save your template and you are good to go.
I hope this blogger auto read more tweak works for you, If it does work for you or doesn’t work for you, mention it in the comments. I will be glad to help you out.
No comments: