Saturday, September 19, 2009

How to make read more in blogspot

Creating 'After the jump' summaries

Interested to show a select amount of your text from the beginning of each post instead of displaying the entire post on the front page of your blog?

Now Blogger has supported ‘Read more’ function.

Blogger has added new button called “Read More” button or “Jump Break” button which has function to cut off the article on homepage (also known as ‘Read more’ function). When your readers want to read the rest of your post, they can click a “read more” link to see the full or entire post. The good news is that now you can do it without the need for any HTML changes.
The steps are simple and easy, here’s how:

Activate your Blogger new post editor:
  • On your dahsboard, click setting and you will be taken to Basic Settings page.
  • Scroll down until “Select post editor” option and select “updated editor” and click SAVE SETTING.
    How to activate new post editor in Blogger
Go and edit your post and decide where in the post you want tto create the jump break and place your cursor in that position after that simply click the Insert Jump Break toolbar icon.

Insert Jump Break Button in new post editorAfter you click the Insert Jump Break toolbar icon, a grey bar will appear to show where in the post your break is located (it can be dragged to make any re-position). You also can insert a jump break in Edit HTML mode by typing manually the code: <!-- more -->

How to make Read More in BlogspotWhen you’re done, publish your post and you will notice the Read More link appear in the place where you set the jump break. If you want to change the Read More text to your own custom phrase, just cimply click Layout from your dashboard, after that click Edit on the Blog Post widget and change the Post page link text to whatever you like.

How to change Read More text link in BloggerIf you dont use the original template from Blogger, the “Read More” might not appear. If that is the case you need to add a snippet of code to your template. These are the steps:
  1. On your dashboard, click Layout and click Edit HTML.
  2. Click the Expand Widget Templates checkbox.
  3. Find the code like this:
    <data:post.body/>
  4. Copy and paste the code below exactly below the above code:
    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
    </div>
    </b:if >
  5. Click SAVE TEMPLATE button and done!

4 comments:

  1. Hi, it's a very great blog.
    I could tell how much efforts you've taken on it.
    Keep doing!

    ReplyDelete
  2. In your blog I found answer how to find jump break toolbar icon.thanks

    ReplyDelete
  3. thanx..interesting tutorials and i found the answer that i've been seeking for such a long time. thanks !

    ReplyDelete
  4. Is there any way to add this in the email notifications?

    ReplyDelete