How to add READ MORE button in Blogger or Blogspot | After Every Post | Blog2Life16 Helpers

How to show Blogger Homepage with READ MORE button and a Thumbnail.

To be more topic specific, This post will tell you about " HOW TO ADD READ MORE LINK in BLOGGER or BLOGSPOT Homepage ".

Image from Flickr

The READ MORE LINK will be seen only in the Homepage of Your Blog and if the visitor clicks on the Read More button the the visitor will be redirected to actual post.

How to Add Read More link in Blogger or Blogspot :
Follow the Steps below :

[1] Go to Blogger Dashboard -----> Template ------> Edit HTML.

[2] After clicking on Edit HTML, Press Ctrl + F to find.
Find the text given Below in the Textbox.


<data:post.body/>
[3] Find this Text in the HTML editor of the Template.

[4] Press enter, you will find this more than one time. Stop at the third one.

[5] Replace, that above code with this One below :


<b:if cond='data:blog.pageType != "static_page"'> <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/>","<data:post.url/>","<data:post.title/>");</script> <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></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>
[6] If, You can't find any changes After adding this Code,
Try to replace the second  <data:post.body/>  with this code above. 

[7] Now, search for </head> tag in HTML Template Editor.Now add the code given below, just above the </head> tag.



<script type='text/javascript'> posts_no_thumb_sum = 490; posts_thumb_sum = 400; img_thumb_height = 160; img_thumb_width = 180; </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, pURL, pTITLE){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = posts_no_thumb_sum; if(img.length>=1) { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>'; summ = posts_thumb_sum; } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> '; div.innerHTML = summary; } //]]> </script> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <style type='text/css'> .post-footer {display: none;} .post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;} .readmore a {text-decoration: none; } </style> </b:if> </b:if>
[8] Now, click on Save Template to Save the Template and It works.

Post by Blog2Life16 Author © 2016