Customize and Style Read more (Jump Break) option in Blogger

Blogger has finally rolled out the Jump Break feature which will add a “Read more” link to every posts if every step is done correctly. That is a great news but if style matters then you have to put some more effort to edit, customize and style it.

There can be so many reasons for why you want to edit the Jump Break link. Within this post I will try to cover most of the reasons and solve most of the problems as far as possible, let us see those.

Blogger Read more style

Fix Auto Jump after clicking Read more Link

Blogger team has solved a great problem by enabling “Jump Break” feature but you may have seen that when the “Read more” link is clicked, it takes to the post of course, but the page jumps to the line after the jump-break has been applied. If you think that it disturbs you and your readers as well then edit the code and fix this by this simple step.

Go to Template tab of your Blogger blog, click “Edit HTML”, check the “Expand Widget Templates” check-box and find the below code:

    <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>

Within this find and delete this snippet:

+ &quot;#more&quot;

The full code will look like:

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

Change the “Read more” Text

If you have followed how to add Read more link in Blogger and create post summaries then you must have find out how to change the default text. But if you still prefer to do it manually then just replace <data:post.jumpText/> with your custom text, example:

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url' expr:title='data:post.title'>Continue reading!</a>
      </div>
    </b:if>

Add Image Instead of Read more Link

There can be so many ways to add image instead of the default “Read more” text of Jump Break, here I will explin the simple one. So same as above example again delete <data:post.jumpText/> and add your image here, example:

    <b:if cond='data:post.hasJumpLink'> 
      <div class='jump-link'> 
        <a expr:href='data:post.url' expr:title='data:post.title'><img src='http://image-URL.png'/></a> 
      </div> 
    </b:if >

Styling the Jump Break Link

If you want it to be simple but more prominent then you can add some styling codes to the Jump Break by using CSS properties without altering the orignal codes, for example, copy paste the below codes before ]]></b:skin> and see how it will looks:

.jump-link a {
 padding: 5px;
 background: #3399bb; /* Have a background colour otherwise delete it */
 color: #ffffff; /* Link colour */
}
.jump-link a:hover {
 background: #666; /* Background colour on hover otherwise delete it. */
 color: #fff; /* Changing the link colour on hover */
 text-decoration: none;
}

Try changing the highlighted colour hex codes and see if it matches with your template style. If you want, then check out the demo.

Demo

However, adding CSS with not change the auto jump. Any thing more you want to know about Jump Break?

Popular posts from this blog

How to Resize Blogger Header to Logo Size

Image
One of the drawbacks of Blogger is its header. When you are using text as your blog title, you will find that there is no problem but when you add an image or logo to the header portion instead of title and description or having description placed after the image from Layout tab, you will find that it’s not the logo but the whole header becomes clickable. So in this tutorial we will find out how to resize the Blogger header in new templates.
Read more

Create your own Contact Form with Kontactr for Blogger

Image
Kontactr is one of the simplest, fast, light weight and effective contact forms that I ever came across. It is not only easy to create but is also like a breeze to add it to Blogger. I have already told the main features but it does not end here. It has got CAPTCHA protection to stop all those spam massages and the best of all is it’s free. You need to follow some easy steps and you are ready to receive all those important emails. Step 1: Visit Kontactr and signup. Step 2: After confirmation, login and copy the codes given in “AJAX Widget”. Step 3: Login to Blogger and create a page form Pages tab (also known as “ static page ”) from your blog's dashboard . Give the page a title, like, “Contact me” or anything that you like. Step 4: Paste the copied code (as told in step 2) and Publish the page. That is it. However, you can also customize it so that it matches the background color of your blog. There are some other options too, for example, instead of a form, you can hav
Read more

Add Google Website Translator to Blogger

Image
Why use any other translate widgets with or without images of country flags when Google translator widget can translate texts of any webpage and is capable of translating to 64 different languages (and increasing) automatically and instantly to readers speaking language. Google translator for websites can be added to any website or CMS, like WordPress, Blogger, Tumblr, etc. with ease. While the steps of adding this widget is all same but here I will mainly write about how it can be added to Blogger blogs. Blogger has this widget, you just need to go to your blog’s Layout tab and click “Add a Gadget” link. A popup page will open, scroll down below and you will find the Google Translate gadget. But there aren’t much options to select from to customize it, that’s why let’s add it in a different way.
Read more