How to add read more button in blogger

Learn how to add read more button in blogger. Generally almost all blogger templates automatically show read more button in homepage except some templates and blogger default templates show full post in homepage. If you are using any default blogger template, your full posts will be show in homepage. To short your post length on homepage, you have to add manually jump break for each posts. This is really time spending work. Today I share some piece of code; you have to add this code into your blog template for one time to get automatic read more buttons for every post. See this below tutorial how to add read more button in blogger.

Read More – How to add meta description in every post in blogger

Log  into your blogger Account

Go Dashboard >> Template >> restore/backup (Highly recommended first backup your blog template )

Now go  Edit HTML

Pressing CTRL+F find this code </head>

Paste below code before above code.

[xml] <!– Auto read more script Start –>
<script type=’text/javascript’>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
<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(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;

Now again find <data:post:body/> code using CTRL+F

After find that code replace that code with below code.

[xml] <!– Auto read more Start –>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<b:if cond=’data:blog.pageType == &quot;static_page&quot;’>
<div expr:id=’&quot;summary&quot; +’><data:post.body/></div>
<script type=’text/javascript’> createSummaryAndThumb(&quot;summary<>&quot;);
<a class=’more’ expr:href=’data:post.url’>Read more …</a>
<!– Auto read more End –>
  • If your blog template have more than one <data:post.body/> code. Change all of them accordingly.
  • click on Save changes.
  • Now you successfully add read more button in your blog.

 how to backup/restore blogger template.
10 best Free Responsive Blogger template

Customization –

 Thumbnail on/off – In blue color  script specify whether you want to show thumbnail or not. Write yes to with thumbnail, no to no thumbnail.

Thumbnail Image size change – In green color script specify your image size, just change that image size as you want.

Summary length with image – In pink color script specify number of characters you want to show with thumbnail

Summary length without image – In Red color script specify number of characters you want to show without thumbnail

Read more button change – if you want to show something expect read more. Just change highlighted read more word with your own words.

I hope this post really help you to add read more button in your blog. if you face any issue leave a comment below. if this post help you to add read more button please share this post with your friends. Happy Blogging 🙂


Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.