Friday, 2 August 2013

Add read more button to blogger

read more button
Bismillah Hir-Rahman Nir-Rahim.
Start with the name of Allah the most merciful and the most beneficent. Add read more button to blogger is a very common tutorial in blogger. Read more helps in showing a post in a short way to homepage. When you click to jump break icon in blogger than read more text automatically added, but I don't like only read more text, do you? If your answer is no, so don't worry. I am going to tell you that how can you add read more button to your blog. There is a variety of read more buttons, but I'm providing you the unique and simple read more button.

Add read more button to blogger.

  • Go to blogger dashboard,
  • paste the below code just above the </head> tag:
<script type='text/javascript'> summary_noimg = 40; summary_img = 40; img_thumb_height = 120; 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>

 Customization:

  1. summary_noimg = 40; change the value of post summary if no image is in the post.
  2. summary_img = 40; change the value of post summary if image is in the post.
  3. img_thumb_height = 120; change the value of read more thumbnail height.
  4. img_thumb_width = 120; change the value of read more thumbnail width.
  • Now find <data:post.body/> and replace the code with below code:
 <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'>
<style>
.jump-link {
    font-size: 0px;
   
}

.jump-link a {
    font-size: 0px;
    color: #ffffff;
   
}
          </style>
 <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div style='float:right;margin-right:10px;margin-top:5px;'> <a expr:href='data:post.url'><img class="readmoreimg" height="35" src="http://4.bp.blogspot.com/-MViH8QRVmhI/UfrhRsS_3LI/AAAAAAAAAa8/VNavHQgXoug/s200/Read+more+by+obt.jpeg" width="90" /></a> </div> </b:if> </b:if>
Note: 
If you have more than one <data:post.body/> tag so try to replace the code with first <data:post.body/> tag, if its not work than press CTRL+Z and find second <data:post.body/> tag and replace it with the above code. Do the same with every <data:post.body/> tag, until its not work.

  • Click to save template and its done.

Last Words:

I know that add read more button is a difficult tutorial and if you faced any problem regarding this tutorial so feel free to tell us by your comments. I'll reply to you as soon as possible. If you want to change the image of read more button, than find  http://4.bp.blogspot.com/-MViH8QRVmhI/UfrhRsS_3LI/AAAAAAAAAa8/VNavHQgXoug/s200/Read+more+by+obt.jpeg and replace this link with your image URL.

Do you Like this Article?

rss twitter facebook
Subscribe us and get daily updates directly to your email inbox.
We will not share you email with anyone so you don't have to worry.

1 comment:

Post a Comment

Subscribe this blog and get daily this blog articles to your email.