How to add Auto Read More in Blogger?

How to add Auto Read More in Blogger?

The steps involve in adding a automatic jump break to your Blog post is simple if you follow the instruction carefully, jump break makes your blog look neater and make ease for reader to read summery of your post, the posts will be displayed with just a short summery on the home page and a link to read the full post will be below. the advantages of break jump was that, it will reduce the content on your blog and speed up your browser to load your blog much faster, Also applying jump break to your blog, allow visitors to click on your summary before having access to the full post, it increases page views.

Features:

  • Your posts will automatically be displayed as short summary’s with a read more link.
  • An image from the post will be re sized into a thumbnail and displayed beside the summery.
  • You can choose how much text is displayed in the summery.
  • The Read more will also apply to all your previous post
  • Your thumbnail size can also be adjust to your preferred size.

How to add Auto Read More in Blogger?

To get this apply to your site, follow the few steps below;

#1: Login to your blogger dashboard

#2: Click on Template

#3: Remember to Back up your template (not compulsory)

#4: Click on Edit HTML

#5: Press CTRL + F on your keyboard, the find </head>

#6: Copy and paste the code below, before </head>

<script type="text/javascript">
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type="text/javascript">
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('j m(a,b){6(a.5("<")!=-1){3 s=a.J("<");I(3 i=0;i<s.4;i++){6(s[i].5(">")!=-1){s[i]=s[i].7(s[i].5(">")+1,s[i].4)}}a=s.E("")}b=(b<a.4-1)?b:a.4-2;z(a.u(b-1)!=\' \'&&a.5(\' \',b)!=-1)b++;a=a.7(0,b-1);r a+\'...\'}j q(a){3 b=A.o(a);3 c="";3 d=b.p("k");3 e=t;6(d.4>=1){c=\'<h v="w:x; y:g K B g;"><k 9="\'+d[0].9+\'" C="\'+D+\'8" F="\'+G+\'8"/></h>\';e=H}3 f=c+\'<l>\'+m(b.n,e)+\'</l>\';b.n=f}',47,47,'|||var|length|indexOf|if|substring|px|src|||||||0px|span||function|img|div|removeHtmlTag|innerHTML|getElementById|getElementsByTagName|createSummaryAndThumb|return||summary_noimg|charAt|style|float|left|padding|while|document|5px|width|img_thumb_width|join|height|img_thumb_height|summary_img|for|split|10px'.split('|'),0,{}))
</script>

#7: Find this next code again <data:post.body/>

#8: Replace it with below codes

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
</b:if>
</b:if>

#9: Now click Save Template.

Then you are done, if your post contain an image, it will be automatically use as your thumbnail.


Leave a Reply

Your email address will not be published. Required fields are marked *