After release of how to apply Jump break or Read more Feature many visitor contacted me how to customize the Jump break.Therefore,The tutorials is mainly created for them.You can customize that jump break text read more as your wish.For example you want to make read more to see more or any other else like replacing with image etc.Or You may want to align it from left or center or right.In this tutorials I will guide you how to style the jump break.

Customizing the Read more Feature.

Changing the text of Jump Break or Read More Feature.

  1. Go to Blogger.com(Dashboard)>Design or Layout.
  2. Click on edit icon of “Blog Post”
  3. Your Screen May look like this
    Editing the text Read more in Blogger
  4. In post page link text replace Read more >> as your wish.

Aligning the Read more /Jump Break Feature.

You may align from left to center or right using CSS.By default it is aligned left.If you want align it to right or center  do this.

  1. Go to Dashboard>Design or Template>Edit HTML
  2. Find ]]></b:skin> in your Template code.
  3. Add this code Just above it.
    .jump-link {
    text-align: center;
    }
  4. In line 2 you can change center to right for aligning it to right.

Replacing the Jump Text or Read more text with Image.

If you want to show image instead of Jump like then its easy.For that try this.

  1. Be sure that We are still in editing the template HTMl.
  2. Tick on expand widget.
  3. Find these codes
    <b:if cond='data:post.hasJumpLink'>
          <div class='jump-link'>
            <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
          </div>
        </b:if>
    
  4. Look at  Line 3 you can find  <data:post.jumptext/> replace that code with this .
    <img border="0" src="Read more link here"/>
  5. Replace Read more link here with the direct link of Image.

Styling The Jump Break or Read more.

  1. You may wish to style it with your wish.Then just add these following codes before ]]></b:skin>
  2. .jump-link {
    /* Styling code here */
    }
  3. Style as your wish.

If you have any problem or question then you can comment us.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder's by RSS feed or email updates.

0 comments on "Customizing Blogger Jump break or Read More Feature.":

Post a Comment

We Love To Hear Comments from You.Comments are Welcome.You can comment here regarding this Post.If it is not related with the post you can ask a question by Contacting Us.Before Comment Please Subscribe To our RSS or email updates.Publishing Spam Comment is Not allowed.If you want to Add Code then Please Encode it.
Simple Tags like <a> ,<strong>,<b>,<em> and <i> are allowed for preventing spam

Newer page Older Pager Home Pager

Pls share this page

Get this
Copyright © 2012 Blogger Rounder .Designed by Shirshak.
back to top