Auto Read More for Blogger

Insert a read-more link within blog post not only makes things organized and well managed but also loads your blog faster. Your blog readers can go through different posts at a glance, while they are actually browsing start-up page. Moreover it optimizes your blog to be found over search engine very easily. Although it may be (little) irritating to insert jump break or read more link for each post individually. Sometimes it may happen that you accidently forget to insert jump break link. In that case your entire post will be displayed in your home page, which is a bit of annoying. That why bloggers often go for auto read more link generator. This tutorial is about how to insert read more link, both manually and automatically, with an added bonus of how to customize it and replace it with an image. So, stay tuned.

Before you attempt to make any changes, it is recommended to backup your blogger template. Bloganalyzer is not responsible for any type losses, if occurs.

Ready ? let's proceed then.

Insert Read More Links Manually

If you are familiar with HTML, write down <!--more--> where you want to insert read more link. Alternately, you can click on Insert jump break button if you are not so HTML freak.
However if you find these processes of inserting read more links manually for every post is annoying, you can go for auto read more links.

Insert Read More Links Automatically

1. Go to Template (or Theme) after successfully login into your account and click on Edit HTML.
   
2. Search for (Ctrl+F) </head> and paste the following code before it.

<script type='text/javascript'>
  //<![CDATA[
  function createSummaryAndThumb(eId) {
    var config = {
      noimgChars  : 320,
      imgChars    : 300,
      thumbWidth  : 100,
      thumbHeight : 100
    };
      
    var elem = document.getElementById(eId);
    var imgtag = '';
    var img = elem.getElementsByTagName('img');
    
    var charNums = config.noimgChars;
    if(img.length > 0) {
      imgtag = '<img src="'+img[0].src+'" width="' + config.thumbWidth + 'px" height="' + config.thumbHeight + 'px"/>';
      charNums = config.imgChars;
    }
    
    var chars = elem.innerHTML.trim();
    var re = /<(.|\n)*?>/g;
    chars = chars.replace(re, '');
    if(chars.length > charNums) {
      chars = chars.substr(0, charNums);
      chars = chars.substr(0, chars.lastIndexOf(' '));
    }  
    chars += ' ...';
    var summary = imgtag + chars;
    elem.innerHTML = summary;
  }
  //]]>
</script>

Configurations

noimgChars (Default: 320)

Number of characters to display if there is no image within your blog post.

imgChars (Default: 300)

Number of characters to display when an image is present in your blog post.

thumbHeight (Default: 100)

Height of post thumbnails.

thumbWidth (Default: 100)

Width of post thumbnails.

3. Search for (Ctrl+F) <data:post.body/>. If you find several matches, take that one which exactly matches with the following.

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->

4. Replace that <data:post.body/> with the following code.

<b:if cond='data:blog.pageType != "static_page"'>
  <b:if cond='data:blog.pageType != "item"'>
    <div expr:id='data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb("<data:post.id/>");</script>
    <div class='JumpLink'>
      <a expr:href='data:post.url' expr:title='data:post.title'>
        <data:post.jumpText/>
      </a>
    </div>
  </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>

Stylize Read More Button

Change Read More Text

Search for (Ctrl+F)JumpLink. You'll find a code like,

<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
  <data:post.jumpText/>
</a>

or

<a expr:href='data:post.url' expr:title='data:post.title'>
  <data:post.jumpText/>
</a>

That <data:post.jumpText/> is responsible for Read more text. Replace that with your favorite word.

Replace Read More Text with an Image

Replace that <data:post.jumpText/> with the following snippet. The dimensions (height and width) and size (bytes) of your image should not be too big. You can change the values of width and height attributes of your own.

<img alt="Read More" width="120px" height="32px" src="---URL OF YOUR IMAGE---" />

5. Save your template.

If you face any problem regarding implementation of this in you blog, write down in comment section. Also do share this post if you find it informative. Stay awesome and keep on blogging.