Showing posts from November 6, 2016

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

<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;'/>

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>

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

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

CDF

Showing posts from November 6, 2016

Instructions to Automatically add Read More connection to Blogger

Trending Post

Instructions to Automatically add Read More connection to Blogger

Archive