How to add auto read more button in blogger

Add to button plays a great role in blogger.It shortens the post of the blogger and make more posts within a short space.But in default template it is not appeared.So,this tricks will be helpful for your blogger site.

Add auto read more button with thumbnails:

  • Go to your blogger dashboard>design>edit html
  • Click on "Expand widgets templates"
  • Find the code </head>
Paste the code before </head>

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
<script type='text/javascript'>
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
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;

  • Now find the code  <data:post.body/> 
Replace <data:post.body/> with the code below

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<div expr:id='"summary" +'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<>");
<a class='more' expr:href='data:post.url'>Read more ...</a>

Now save the template and see the above.
If you feel any problem, ask me.I will try to solve it.


1 comment:

  1. Well,this is really great.I appreciate you continue more post.
    Thank you