We Know The Rudiments Of Success

  • Blogging
    • Blogging tutorial
    • blogging tips
  • SEO
  • Social Media
  • Mobile internet
  • How to
  • make money
  • More
    • Design
    • Reviews
    • Gadgets
    • Mobile
      • Apple
      • Android
      • Windows Phone
      • Iphone

How to Add Automatic Read more to Your Blogger Homepage

automatic-read-more


Am actually very excited to write this post, probably maybe because I was fulfilled today. However, this is just by the way. I actually noticed a blog when I was researching for a material, that it wasn’t having automatic read more, I now thought within me that how on earth will a blog won’t have a read more.

 And just the main thing that struck me to bring up this article was that the guy’s blog was so disjointed and very long in length, so you have to scroll down down to get some information. Probably you are in that kind of a situation, thank your star because you are in the right place.

 Today, I will be sharing and explaining how to summarize content and show only summary of your post with a read more thumbnail in your home page and other pages like Archive page and label page by using an automatic Read More simple script in your template. One of the advantages of using this automatic read more is that it will make your blog load very faster by showing just fewer post instead of showing the whole lot of the posts , and also when we talk about professionalism… you understand now, it’s added.

Read-more

 

There is no too much story on how to input the automatic read more, as long as you follow the directives and the steps given to you. And below you will a snapshot of  how it will look like after installation 

HOW TO INPUT THE CODES

 

Note: before you make any changes on your templates, always make a backup of it.
 1. Login in to your blogger account
 2. Then navigate to Template section of your blog and
 3. Then move to Edit HTML and use your mouse to mark expand widget template box.
4. Then search for this tag: </head>, Use Ctrl F on your keyboard to search for it.
5. Now place the code below above </head> the tag in your templates

 

<script type='text/javascript'>
summary_noimg = 300;
summary_img = 300;
img_thumb_height = 120;
img_thumb_width = 120; 
</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){
var div = document.getElementById(pID);
var imgtag = “”;
var img = div.getElementsByTagName(“img”);
var summ = summary_noimg;
if(img.length>=1) {
imgtag = ‘<span style=”float:left; padding:0px 10px 5px 0px;”><img src=”‘+img[0].src+'” width=”‘+img_thumb_width+’px” height=”‘+img_thumb_height+’px”/></span>’;
summ = summary_img;
}

var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;
div.innerHTML = summary;
}

//]]>
</script>


Note in above codes you can change the numeric numbers according to how you wish it appears on your blog.
summary_noimg = 430; this code will decide how much characters must be shown in the post if that post doesn’t contain any images. I have selected 430 characters.

 

You can customize it to suit your template
summary_img = 340; If the post contains image, then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template
img_thumb_height = 100; this tag decides the height of the thumbnail to be shown in the post. Vary the number 100 to suit your template.

img_thumb_width = 120; This tag decides the width of the Thumbnail image to be shown.


Now find <data:post.body/> in your template and replace it with the codes below:

 

 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&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;);</script>
<div class='readmore-wrap'>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Read More</a></span>
</div>
</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>

 

You can now preview your template after youv’ve follow all these steps, and if the codes are well place.. then save. Your homepage is now good to go as it will now look like this:

preview-of-read-more



Enter your email address:


Delivered by FeedBurner

Recent Articles

  • SerpRobot: Crush Competition in Search Results
  • How to Get Backlinks from Facebook: Boost Your Website’s SEO
  • REVEALED: How to Make Money Writing With Your Smartphone or Laptop
  • How to start a blogging career
  • How To Make Money Online for Newbies – 5 Proven Strategies You Would Not Want To Miss!
  • THE BENEFITS OF A BLOG
  • 5 Characteristics an Entrepreneur Must Have
  • 7 Side Hustles from Home during Covid-19 Outbreak
  • 5 Free and easy Ways to make Money Online in Canada
  • How to Make Money Blogging – the Biggest Secret
  • About Us
  • Advertise
  • Sponsor
  • Contact Us
  • Privacy Policy
  • Disclaimer