How to add a "Read More" button to a blog post

If you use a template provided by Google,  when you publish a post it will display the full post in the home page. The problem is when you write a post which is little bit longer the reader may get upset because the reader has to scroll down the page to see the other posts, but when there are few long posts it will be hard to work with. And sometimes the page loading time also will increase.

So it's a important thing to add a read more button to the blog. But when you use a template like the template I use which I have downloaded from the internet, that problem will not occur because the html codes have been already included in the template. But we will have to edit the Google blogger templates to get the read more button. And this is how to do that.

1) First go to Google dashboard and click on "Templates' and again click on "Edit Template".

2) Now press CTRL+F and type this    ]]></b:skin>   in the box and press enter.

3) Now the code you entered will be highlighted in yellow colour. Now paste the code given below right after the code highlighet in yellow.

.readmore{ float:right; background:#a5ddf4; padding:4px 10px; margin:10px 0; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }

4) Now type </head> in the little search box again and press enter. Now again it will be highlighted in yellow.

5) Now paste the code given below before 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>

6) Now again type this   <data:post.body/>  in the little search box. Now it will be highlighted again.

7) Now replace the code given below with the highlighted code (  <data:post.body/> )

<b:if cond='data:blog.pageType == "static_page"'><br/> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='readmore' style='float:right;'><a expr:href='data:post.url'> Read More</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> </b:if>

Now check a blog post,you can see the "Read More" button.