Archive Pages Design$type=blogging

How to add ' read more ' plugin to blogger templates

how to add a summary posts with thumbnails ( read more plugin ) , summarized automatically by adding a ' Read more ' or ' Continue reading ' link below each post , very easy

In this tutorial i will explain how to add a summary posts with thumbnails , summarized automatically by adding a ' Read more ' or ' Continue reading ' link below each post
read more blogger


DEMO :

1/ Go to blogger dashboard and choose your blog --> click on  ' Template ' --> click on ' Edit HTML' and then click on the ' Expand Widget Templates ' checkBox

2/ Search for <head/> ( Press Ctrl + f from your keyboard )

3/ Now add  before ( above ) </head> tag this code :

<script type='text/javascript'>
summary_noimg = 450;
summary_img = 400;
img_thumb_height = 128;
img_thumb_width = 128;
</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 0px 5px 5px;margin:0 5px 0 0;"><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>

Customize :

summary_noimg = 450; The number of characters that will be displayed when there is no image
summary_img = 400;  The number of characters that will be displayed when there is an image
img_thumb_height = 128; height of the post thumbnails
img_thumb_width = 128;  width of the post thumbnails

* Image floating :


LEFT :
float left

* if you want to add the post thumbnails on the left of the summary , do not change them , keep it

RIGHT :

float right


* if you want to add the post thumbnails on the right of the summary replace the above ( yellow )  code with :



imgtag = '<span 
style="float:right; padding:0px 0px 5px 5px;margin:0 0 0 5px;"><img
 src="'+img[0].src+'" width="'+img_thumb_width+'px" 
height="'+img_thumb_height+'px"/></span>'; 


CENTER :

center

* if you want to add the post thumbnails on the center of the summary replace the yellow code with :


imgtag = '<div style="clear:both; text-align:center;"><img 
src="'+img[0].src+'" width="'+img_thumb_width+'px" 
height="'+img_thumb_height+'px"/></div>';


4/ Now search for <data:post.body/> and replace it with :
( Important Note : If you find more than one , choose the first  )
replace the first <data:post.body/>  with :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <data:post.body/>
<b:else/>
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <div expr:id='&quot;summary&quot; + data:post.id'>
  <data:post.body/>
 </div>
 <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
 <span style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read more...</a></span>
 </b:if>
 <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</b:if>

Customize : 

Read more...  You can replace it with another word , such as ' Continu reading...' Or with image by replacing Read more... with : <img src="URL-OF-IMAGE"/>  change URL-OF-IMAGE with your image link .

Done , save your template .

COMMENTS

Name

2 columns 2columns 3 columns 3columns animals black blue books brown business education games green grey left-sidebar magazine mobile orange personal red right-left-sidebar right-sidebar science simple software Sport tech travel tutorials white yellow
false
ltr
item
The best blogger themes - templates: How to add ' read more ' plugin to blogger templates
How to add ' read more ' plugin to blogger templates
how to add a summary posts with thumbnails ( read more plugin ) , summarized automatically by adding a ' Read more ' or ' Continue reading ' link below each post , very easy
http://1.bp.blogspot.com/-kbNEa4w49Ko/UVYNB2R1niI/AAAAAAAADGY/2vEI9D9MozM/s1600/readmore.jpg
http://1.bp.blogspot.com/-kbNEa4w49Ko/UVYNB2R1niI/AAAAAAAADGY/2vEI9D9MozM/s72-c/readmore.jpg
The best blogger themes - templates
http://www.blog4temp.com/2013/03/read-more-plugin-for-blogger.html
http://www.blog4temp.com/
http://www.blog4temp.com/
http://www.blog4temp.com/2013/03/read-more-plugin-for-blogger.html
true
361818880417557007
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago