Though you can find many templates online, which already have the option of “Auto Read More” with the Blog Posts, but if you have a template, in which the posts are displayed with full text and you want to add the “Auto Read More” option below each post, you will find it here in this post how to do that.
Following are the steps to add “Auto Read More” with each post in Blogger:
Step 1
Log in to your Blogger Account, Click on the Blog to which you want to add “Auto Read More”. Click on ‘Template’ option and then on ‘Edit HTML’ as shown in the below image:
Step 2
Now before making any changes to the template, the first thing which is always advisable to do, is to take a backup of your template, so first take a backup of your template.
Step3
Paste the following code in the HTML Code of your template after </head> tag and before <body> tag:
<script type='text/javascript'>var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnailsummary_noimg = 430;summary_img = 340;img_thumb_height = 200;img_thumb_width = 200;</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(thumbnail_mode == "yes") {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>
Step 4
Now find the following code in your Template HTML:
data:post.body
Replace this code with the following code:
<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>
Step 5
Save your Template. Now, you should see a “Read More…” text with each of your posts.
Keep Blogging !
Post a Comment