Thursday, June 17, 2010

Read More link to blogger posts without HTML changes

This is really a very helpful post I believe. Most of the times I write long posts and explain each and every part in the solution I found. So, I really need to show only specific length of each post and add a link called Read More at the end of the post on the blog home page. So, that users get chance to see more posts and look more posts. And the loading of the main page will be faster as the content is less. So, there are lot of advantages by placing the read more link on the home page for each post.

I have tried so many solutions and didn't impress by any of them. Some of them are disturbing my HTML as after specific characters add the read more link. Another option is, strip the HTML from the post and add the read more link after specific characters, but that also removes the blog styles for P tag, div Tag or any other custom styles we have applied. Sp, to get this working either we need to change the Blog HTML or add bunch of Javascript code to do that. This is not very easy to maintain and useful. So, what to do, can't I do it? So, after a very long research and read so much I want to give better user experience to my users to read what they want on my blog. Finally came up with a nice and simple solution which do not need much HTML changes or customization.

What is Jump Break and what it will do?
This is the option which is available in blogger by default and not known to most of the people. Lot of people are doing lot of customization to add read more links to their blogs. With this feature we don't need to do anything as it provides everything for us.

Solution:
  1. Go to create post or edit post and place the cursor in the content where you need to add the read more link. Once set the mouse cursor, from the editor toolbar find the option "Insert Jump Break" as shown below, this option will be visible in new blogger template editors and in editor Compose mode only. In "Edit HTML" mode all these option will go off. So, make sure you are in "Compose" mode to insert jump break.

    Note: If you did not find the jump break as shown below then add the text <--more--> in the Edit HTML mode of the editor wherever you want.
  2. Now, it will insert a bar which represents the Jump Break [see below image how it looks like]. This can be dragged to the place wherever you need it. First set the position of it. You are half done by doing this.
  3. Now, publish the post and go to Edit HTML option from the blog navigation links Layout or Design[Tab name changed recently].
  4. Take the backup of the full template before do any changes.
  5. Now, check the option "Expand Widget Templates".
  6. Search for the tag in your HTML <data:post.body />.
  7. Add this simple HTML text, just below the above tag.
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
Here, it just finds whether the data in the post has the jump link set, if yes, then it will insert the anchor text for read more, otherwise it skips the line. You can place whatever text or image or any other HTML tag instead of anchor tag in the above example code for read more.
Now, save your template and just go to your home page for testing the functionality.

The great advantage is very simple. People like it to use it or maintain it. Very simple and easy right? The only thing you need to do is, just follow the same for each post where you want to place the read more. Don't think like, if your blog already had 100's of posts then the first question in mind will be "Do I need to apply the same for all those posts?". Not needed. Read more is only useful most of the times for only home page posts. So, add to the current home page posts and to new upcoming posts.
Hope this gives you good idea on how to add read more link for your blog posts. Like it? then please share it.

18 comments:

  1. I don't have a "Insert Jump Break" button before or after adding the html to my blogger template. Where do I find this?

    ReplyDelete
  2. If you don't have any button like that, then please insert the text in the HTML mode <!--- more --> wherever you want to show the read more link.
    Let me know, if you need any more help....

    ReplyDelete
  3. Thanx for the tips. I was searching for how to do the Read More hack and came across this.

    ReplyDelete
  4. i do not have the jumpbreak symbol either & hv to insert the code in the post itself then go to template-> edit html to check if the jumpbreak code is inserted. If i don't do the checking , the doesn't seem to work...oh ya! 1 more, how do i choose to close the middle paragraph & leaving the top n bottom seen? is it by inserting at the end of the paragraph i wanna close?

    ReplyDelete
  5. Hi KBU SC,
    If you don't have option for jump break then please insert the line <!--- more --> in the HTML mode of the editor wherever you want to show the read more link. And about the template -> edit html is one time code change. We have to add that html only once. From next time onwards no need of any changes in the HTML template.

    About where to insert in the paragraph, why can't you just separate the single paragraph into two? Just put </p><!--- more --><p> in the paragraph wherever you want the read more link. The above code will split the single paragraph into two and place the read more link.
    Did these answer your question? Please let me know if you have any issues still.

    -Praveen

    ReplyDelete
  6. This info is very useful. Thank you very much. I used this on my blog :D

    http://pampy-whatsnew.blogspot.com/

    ReplyDelete
  7. This info is very useful. Thank you very much. I used this on my blog :D

    (What's new:movies, sports)

    ReplyDelete
  8. I was looking for a long time for this, hoped I found the (your) solution, however ... doesn't work in SharePoint :-(

    ReplyDelete
  9. It should not be the solution for the SharePoint sites. It is applicable only for the Blogger blogspot blogs. If you need in SharePoint then it's not very difficult to implement. Add some sort of string [like ] where you need to appear the readmore link in post and while rendering the post, just replace that string with read more link[anchor tag]. If url contains the post url then just replace the string with empty.

    But, because it is sharepoint, it needs custom logic to be implemented.

    -Praveen.

    ReplyDelete
  10. It worked.
    But the problem is that it shows two Read More signs.
    Not a big problem though but still

    ReplyDelete
  11. Ditto ZeeHunter, mine shows "Read More" twice...kinda annoying....anyone have any idea's on how to get rid of the second "Read More"?

    Love the help though, good tutorial.

    ReplyDelete
  12. Please check your post once for the html code <!--- more -->

    That html tag is what it generates the read more link. Remove one if you find two and let me know, if problem still exists.

    ReplyDelete
  13. Thanks alot, this really helped. I tried the HTML way and also I saw a way of double posting to get the Read more but I couldn't believe the solution was right infront my face the whole time.

    ReplyDelete
  14. It works great without changing the html. When I do that, I get 2 "read more" messages. Makes life easier :-)

    ReplyDelete
  15. Thanks a ton Praveen. I was breaking my head to work it out. Nice share.Continue the good work.

    ReplyDelete
  16. thanx a lot it worked for me ,is their any idea to view the read more link in the right side..

    ReplyDelete
  17. Hi, thanks for the info, it really helped! For some reason, it shows two "read more" links. How can I delete one?

    ReplyDelete