Instructions to Automatically add Read More connection to Blogger

Have you seen numerous blogger utilizing small portrayals of the posts appeared on the fundamental blog page, seek pages, mark pages and chronicle pages. An expanding number of bloggers are posting their article by including "bounce interface", which permits clients to tap on a connection that says "Read More" with a specific end goal to keep perusing the post.

In my past article Auto Read More Javascript for Blogger yet it has numerous drawbacks like you can't expand character length however in this article, I will demonstrate to you best practices to consequently include a read more connection in Blogger which part more alternative than past one simply utilizing straightforward JavaScript work, so are you prepared for that simply take after these simple strides:-

Add Read More connection to Blogger

Step 1: Go to Blogger Dashboard >> Template >> Edit HTML and inside the proofreader Find (CTRL + F or CMD + F) <data:post.body/> and supplant 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 -->

you may also love to read: step by step instruction to add facebook fanpage to blogger

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 --> 

                                              Alteration/Option 

• Change default Read More content to another on supplant this <data:post.jumpText/> with your content 
• 
  
• Change the quantity of characters indicated when there is no thumbnail, alter the (no_thumb_sum = 300;) esteem 300 to your esteem 
• 
  
• Change the quantity of characters demonstrated when a post has a thumbnail, alter the (no_thumb_sum = 200;) esteem 200 to your esteem 
• 
  
• Change picture/thumbnail tallness, alter the (thumb_h = 220;) esteem 160 to your picture stature 
• 
  
• Change picture/thumbnail width, alter the (thumb_h = 300;) esteem 180 to your picture width 
• 
  
• Step 3: Click on the Save and Go to your Blog to see the impact

Credits: Mr Flicks the Codex king a webmaster and script developer READMORE

Share Share Tweet Share Share Share

Home

Thanks For You Reading The Post We are very happy for you to come to our site. Our Website Domain name http://codedforum.blogspot.com/?m=0.