Sunday 6 December 2009

Blogger Finally Supports Read More Function

If you have visited my site before, you may have noticed that I have changed things around a bit. I have replaced my highly customised version of the default minima template, which has served me well for a long time, with something which is hopefully more modern, elegant and simple.

During the painful process of transferring all the custom code and widgets over I realised that Blogger had finally added a feature which I had to previously hack my template to enable. The feature I am talking about is the read more function.This allows you to cut or truncate part of your post on the front page allowing readers to click on a link to view the full post.



I haven't been actively Blogging for a while now so there were quite a few other surprises including a brand new post editing interface.

There is a 'Insert jump break' button at the top right corner of the post editor which inserts a line into your post at the point where you want the 'Read more' link to appear.




If you click on the 'Edit HTML' tab you will see that Blogger adds <!-- more --> to your post. This is the location of the 'Read more' link. You can manually add the code yourself if you want.



To enable this feature, you will need to log into Blogger and go to the 'Settings' tab. Under the 'Basic' settings scroll down to the 'Global Settings' part and select the 'Update editor'.



If you are using an original Blogger template the read more function should work just fine. However , if you obtained your template from somewhere else you may need to also follow the steps below to enable the feature.
  1. Go to the Layout tab and then click Edit HTML
  2. Before you do any editing to your template code you should always download a backup
  3. Expand your template

  
     4. Find this code: <data:post.body/>
5. Insert the following code below the above code

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>  
<a expr:href='data:post.url'>Continue Reading  
&gt;&gt;</a>
</div>
</b:if>

6. Click Save Template and you are done.

Notice that I have 'Continue Reading' instead or 'Read more' but you can change that to anything you like.

0 comments:

Post a Comment