How to Automatically add Read More link to Blogger
Posted by Sudhansu Nayak Labels: blogger, blogger codex, javascript Last Updated: 9/13/2015
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.
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 == "index"'>
<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='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 == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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
Also Read
Auto Read More with Large/Big thumbnail without Javascript for Blogger
Auto Read More with Small thumbnail without Javascript for Blogger
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.
Note: If will work on all default template but if you have customize blogger template send me your template file or comment here with your url
No comments:
Post a Comment