How to Automatically Add Read More Link on Blogger Have you seen many blogger using mini-descriptions of the posts shown on the main blog page, search pages, label pages and archive pages. A...
2018-07-31T07:44:57Z

How to Automatically Add Read More Link on Blogger

Have you seen many blogger using mini-descriptions of the posts shown on the main blog page, search pages, label pages and archive pages. An increasing number of bloggers are posting their article by adding "jump-link", which allows users to click on a link that says "Read More" in order to continue reading the post.

Read More link to Blogger

In my previous article Auto Read More Javascript for Blogger but it has many disadvantages like you cannot increase character length but in this article, I will show you how to automatically add a read more link in Blogger which lot more option than previous one just using simple JavaScript function, so are you ready for that just follow these easy steps:-

Add Read More link to Blogger


Step 1: Go to Blogger Dashboard >> Template >> Edit HTML and inside the editor Find (CTRL + F  or CMD + F) <data:post.body/> and replace with this one
<!-- Auto Read More Body Start -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class='jump-link' style='float:right;'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
<!-- Auto Read More in Body End -->
Step 2: Find </head> and paste this below code above </head>
<!-- Auto Read More Body Script Start -->
<script type='text/javascript'>
no_thumb_sum = 300;
thumb_sum = 200;
thumb_h = 220;
thumb_w = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(t,e){if(-1!=t.indexOf("<")){for(var n=t.split("<"),i=0;i<n.length;i++)-1!=n[i].indexOf(">")&&(n[i]=n[i].substring(n[i].indexOf(">")+1,n[i].length));t=n.join("")}for(e=e<t.length-1?e:t.length-2;" "!=t.charAt(e-1)&&-1!=t.indexOf(" ",e);)e++;return t=t.substring(0,e-1),t+"..."}function createSummaryAndThumb(t,e,n){var i=document.getElementById(t),m="",r=i.getElementsByTagName("img"),s=no_thumb_sum;r.length>=1&&(m='<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+e+'" title="'+n+'"><img src="'+r[0].src+'" width="'+thumb_w+'px" height="'+thumb_h+'px" /></a></span>',s=thumb_sum);var g=m+"<div>"+removeHtmlTag(i.innerHTML,s)+"</div>";i.innerHTML=g}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.jump-link  {float: right; }
.jump-link a {text-decoration: none; }
</style>
</b:if>
</b:if>
<!-- Auto Read More Body Script End -->

Modification/Option

  • Change default Read More text to another on replace this <data:post.jumpText/> with your text
  • Change the number of characters shown when there is no thumbnail, modify the (no_thumb_sum = 300;) value 300 to your value
  • Change the number of characters shown when a post has a thumbnail, modify the (no_thumb_sum = 200;) value 200 to your value
  • Change image/thumbnail height, modify the (thumb_h = 220;) value 160 to your image height 
  • Change image/thumbnail width, modify the (thumb_h = 300;) value 180 to your image width 
Step 3: Click on the Save and Go to your Blog to see the effect

Conclusion


Adding this extra enhancements blogger read more(jump-link) tag helps your users to more easily navigate your blog by keeping your blog post organized and summarized but there is certain cons using this technique, it will not work if your user disable javascript.
Share it:

Blogger

Blogging

How To

Tutorial

Post A Comment:

0 comments: