Saturday, July 21, 2012

Only Post Title and Short Text in Blogger's Blog Homepage

By default Blogger shows your whole posts on your blog's homepage and archive pages. If you write long posts this can be a real pain because your blog's homepage will grow in height a lot and your readers will have to wait a lot for it to load and finally if they are patient enough to wait your homepage load fully they will have to scroll a lot to view your blog's content.

There are many tutorials over the Internet that advices you to deal with this problem by modifying your blog template's HTML code in order to show only the post titles on the homepage, but editing your blog's template can be a dangerous task, especially if you are not a web developer. It would be better if you could make blogger show only the titles and a short text for each blog post on your homepage and a "Read More" link that will expand the blog post when clicked. As a result your homepage will become smaller and more readable, it will need less scrolling and generally it will become more appealing to your readers. Fortunately, there's an easy way to do this now and you even don't have to edit your blog's template! All you have to do is to use the Jump Break button when editing your post to determine the place where Blogger should split your post and insert a "Read More" link.

Clicking this button will insert a gray line in your post but don't worry, it won't be visible in the post when published. It's shown only in the editor window to inform you where the "Read More" link will be inserted.

If you prefer editing your posts in HTML mode, you should insert the text  <!--more--> in the place where you want the "Read More" link to appear.

22 comments:

  1. Thank you so much for this... I was looking all over the internet and found the HTML thing only... thank you thank you thank you :-)

    ReplyDelete
  2. Thank you Thank you so much! I had no idea that , that is what that button was for. Thank you!

    ReplyDelete
  3. Great stuff! The button was right under my nose and I didn't know how to use it. This makes a Blogging life so much easier. Thanks!

    ReplyDelete
  4. should i use this button to edit my every post which i have already published or is there any alternate.

    ReplyDelete
    Replies
    1. You should use this button or the "<-- more -->" text if in HTML post edit mode to insert a "Read More" link for each of your posts.

      Delete
  5. How to enlarge the "read more" link

    ReplyDelete
    Replies
    1. You can add custom CSS to your blog to enlarge the "Read More" link. Blogger currently places it in a div with class "jump-link", so you can add CSS for this class that increases its font, for example the following CSS will make the font size of the "Read More" link 2 times larger than the current font size:

      .jump-link { font-size: 2em }

      Delete
  6. This should be the best recommended way to do this. Very easy and straight forward. No risk of tempering with the template base code. Exactly what i was looking for.
    Thanks very much.

    ReplyDelete
  7. thank you
    by reading other blogs i added HTML codes, changed template for these and messed up my blog, but you just explain it simply without adding any code or changing template. its very very helpful thanks man and keep uploading these kind of post. thank you.

    ReplyDelete
  8. thanks a lot sir............really travelled through a lot of sites for a lot of days.....finally got thanks

    ReplyDelete
  9. Thank You so much. It was right in my face! lol thank you

    ReplyDelete
  10. Thank you so so so so much bro. I was looking for this easy trick for 2 weaks. But all i did found only html tricks. Thank you so much brother!!!!!!!!

    ReplyDelete
  11. Thanks man. It was super helpful

    ReplyDelete
  12. thanks a million times for this post. you've really helped us. thanks

    ReplyDelete
  13. Thanks for this! How very useful. Shame it is quite so small.

    ReplyDelete
  14. Thanks a lot. It helped me a lot. I use to write very long posts and the home looked very lengthy. But thanks to you its looking very good now. I appreciate your work.

    ReplyDelete
  15. Your post is 6 years old but it still helped us a lot! Thank you for sharing

    ReplyDelete
  16. Eight-year-old post, and it helped me today. :)

    ReplyDelete
  17. OMFG thank you so so so much! I have been spending almost an hour for the answer, tried a bunch of different HTML codes, and I could not believe that all it took was just a simple line like that! Thank you very much.

    ReplyDelete