This topic was actually created based on the request of a fan of this blog, but I’ve decided to publish it to the front page so that everyone can learn from it and also be a beneficiary at large.
Sometimes ago, i talked about how to put a read more attribution link to any text copied from your site , but today we're talking about adding a read more tag to each topic of ur blog post.
As a blogger you might have been seeing so many websites with this jump-break (read-more tag) of a thing and you keep wondering how it was configured or programmed on that particular blog. But whenever you try to understand how it’s been done so that you can do the same thing on your blog; you always don’t just understand or even get confused at times.
When it comes to technology, we at Damytechs blog have it as our utmost priority to make sure that we feed you with a useful, comprehensive and self-explanatory articles.
Today, I’m assuring you that you gonna learn it fully and you’ll be able do it yourself on your blog. So, just sit back and enjoy learning with us the step by step process of automatic adding of read-more tag to all posts on your blog.
Question1: What Is A Read more Tag?
A read more tag is one that summarizes a blog post by displaying the topic and a little part of the post and preceded by a “Read More” tag(link) in its front. When the “read more” link is clicked it will show the full post of that particular topic.
Question2: Why Do I Need It On My Blog?
· It makes your blog neat and well arranged(users friendly).
· You will be able to display lots of topics at the front page.
· It makes your blog load faster.
· It increases time spent by readers on your blog/site,
· Finally, it will Increases your page views.
Question3: How Do I Install It On My Blog?
To install it on your blog follow me up from the first step to the last step. Now, lets go…
STEP1: Log on to your Blogger Dashboard click on Theme , then Edit HTML.
STEP2: Click anywhere in the code area and press ctrl+ F ,then search for this tag (Hit enter)
<data:post.body/>
Note: After hitting on enter you will find this code more than once, stop at the third one!
STEP3: Replace
the code above with this one:
<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>
See this also: Reasons why search engines might have ignore your website.
STEP4: Now, search for the following tag:
</head>
STEP5: Just
above the </head> tag, add the following script and css code:
<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>
Further customization:
*To change the number of characters shown when no thumbnail(image), change the 490 value in blue.
*To change the number of characters shown when there is a thumbnail(image), change the 400 value in blue.
*If you want larger thumbnails change the 160( height) and 180(width) values in red.
STEP6: Click on save theme, then you’re done!.
If this post was useful to you please do not hesitate to drop your comment. Also, if you are not able to do it successfully, we are interested in helping you through so please let us know by using the comment box below!
THANKS FOR VISITING DAMYTECHS BLOG!!!.
Enjoy!
