Home » Blogger Tutorials, Tricks and Hacks » blogger graphics » Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment.

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment.

Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment.

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

48,713 views


Hi dear friend,

I promised you in a previous tutorial, here ” Blogger Now officially Supports “Read more” links. ” that i’ll add a tutorial about customizing your read more links in blogspot.

So you have to check out the previous tutorial if you are not familiar with the new blogger jump breaks addition.

Now is the time for this tutorial,

after reading this tutorial you’ll be able to Customize you read more links in those ways:

  • Change the text ” read more ” to another words.
  • Add An Image / Button To Your “Read More / Jump Breaks ” In Blogger Links Instead Of Plain Text
  • choose your read more link / button to be displayed on left side, right side or center it.

so lets start,

 Please download a copy of your template before applying any changes.  
First Step, You Must Do This Step

this code should be included in your blogger template,

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More </a>
</div>
</b:if >

i’ll tell you where to add it, but before you add it, make sure that it’s not already included in your template.
Go to you blogger dashboard >> Layout >> Edit HTML and Check on Expand Widget Templates use your internet browser to search for the code,

if you found the code in your template, ok you have to skip this step
but before you skip it,
make sure that the third line in the code looks like this

<a expr:href='data:post.url + "#more"'>Read More </a>

And not

<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>

if you found it like the second one, please replace it with the first one

if it’s not in your template you’ll have to add it, and i’ll tell you where you should add it.

Go to you blogger dashboard >> Layout >> Edit HTML and Check on Expand Widget Templates use your internet browser to search for this code,

<data:post.body/>

and just after it, add the next code,

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More </a>
</div>
</b:if >

Now we finished adding the require code for customizing this trick.

Lets start customizing
1.Change the text ” read more ” to another words.

this is the easiest on ever,
after applying the first step to your template, you should have this code added to your template :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >

This code will display your read more link in this format : Read More

and to change it to another word, simply, change the word Read More in the code in your template to what ever you want, Example? Keep reading, continue reading, read the rest, and more.

After changing it, click Save template and check out your blog.

2.Add An Image / Button Instead Of Plain Text

Ok, now again, after applying the first step to your template,
you must have this code added to your template

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >

This code will display your read more link in this format : Read More

and to change the text to image / button , we should replace the word Read More in the code with the following

<img border="0" src="Paste here the button Image URL"/>

so you should have some thing like this

<img border="0" src="http://www.allblogtools.com/image-url.jpg"/>

After changing it, click Save template and check out your blog.

And here is some good samples for read more buttons :

Read More

Read More

Read More

Read More

Read More

Read More

And you can find more buttons by searching in google for “read more button”.

3. Control the read more link or button alignment, left, right Or center.

lets back again for the first step, after applying the first step to your template,
you must have this code added to your template after applying first step.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >

this code will display read more link in default format, and your template may display it at left or right, but if you want to control where it’ll be displayed, you should add small tag for the code, and the new added tag in blue color.

<b:if cond='data:post.hasJumpLink'><div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="xxxx">Read More</p></a></div></b:if >

and you can replace the xxxx with Left, right, or center.

any in this way you can control the position for your link or button.

and here is some examples to help you

Example 1
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="Left">Read More</p></a>
</div>
</b:if >

This will display read more in pain text aligned to left

Example 2
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="right"><img border="0" src="http://www.allblogtools.com/image-url.jpg"/></p></a>
</div>
</b:if >

This will display read more in image button aligned to right

i wish this can help you, you comments are welcome, and please share it if you found it useful

Liked It ? Please Share

Comments

67 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Aswani says:

    Thank you so much for this valuable tip. I will try to add it to my blog too.

  2. Alexandra says:

    Hi! Thanks for the post, it is very useful. I got a problem though.. Now, I have my «read more» duplicate…

  3. Alexandra says:

    My bad!! Forget my other post.. I had the code twice ;) Thank you so much again!!

  4. Lia says:

    can you help me to remove the tab at the header, please?

  5. Max says:

    hi lia, sure i’ll, but when i visited your blog, blogger says that it’s not existed, what tab you are talking about?

  6. Lia says:

    i just change it to liawijaya.blogspot.com :)

    i want to remove “home, features, edit,…..” at the header… know how?

  7. Mohammad Mustafa Ahmedzai says:

    Hi Max,

    I am glad that blogger made two important changes the read more functionality and the comment avatar one.

    For high quality read more buttons may be your readers will like some of these,

    http://www.mybloggertricks.com/2009/09/blinking-read-more-buttons-for.html

    http://www.mybloggertricks.com/2009/09/attractive-animated-read-more-buttons.html

    http://www.mybloggertricks.com/2009/09/attractive-read-more-button-images-for.html

    Regards,
    MOHD__

    • Max says:

      hi Mohammad Mustafa Ahmedzai. ok, Mohammad , thanks for the links, i like your blog and i visit it usually.
      soon i’ll add some buttons here on allblogtools.com to download.

  8. lia says:

    is that on the top?
    cant find

  9. i was searching for this….thanks…great post.. thanks

    • Max says:

      @ Techie inspire, thanks for you comment, if you have any suggestion for our upcoming tutorials please let me know.

  10. deelight says:

    hi thanks 4 the great article….i added the read more button but cant set it at Right side….how can i do it??????? thanks

  11. Max says:

    hi deelight
    every thing is explained here.

  12. Malayali says:

    Hi Max,
    I added the Read More button but my left sidebar totaly goto bottom! how can fix it? can u hlp me?

  13. Hello Max, I need help! I downloaded the “Cosmetic Girl” template, and it comes with a jump link. since i am an online fashion which post pictures all the time, I dont want to have the jump link. I want my readers to be able to see all the pictures on one page without having to click read more. Can I know how to do that? Or can you help me to edit the html of the template so that I can upload it? thanks Max!

    • Max says:

      hi weng yee, it’s easy task, i’m not the author for this template but i can tell you how to do it,
      go to your blogger account, >> layout >> edit html, then find next code,
      expr:id=’"summary" + data:post.id’ and delete it, than click save template.
      i hope it’ll help.

      max

  14. deelight says:

    Hi Max sir,,,, where can i get more “Read More” button? i searched but found nothing…..kindly guide me and give me some site’s address . Thanks

  15. Mark says:

    Thanks!! all your tricks are working for my blog. So far so good!! Keep it up!

  16. Hi Max, thanks for your advuce. But I could not find the code. I could only find

    createSummaryAndThumb("summary");
    Continue reading…


    after i expand widget. If I delete the code, my blog caould open.

    But somewhere above this cde, I found another code, which is this:

    function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = “”;
    var img = div.getElementsByTagName(“img”);
    var summ = summary_noimg;
    if(img.length>=1) {
    imgtag = ”;
    summ = summary_img;
    }

    var summary = imgtag + ” + removeHtmlTag(div.innerHTML,summ) + ”;
    div.innerHTML = summary;
    }

    May I know which should I delete?

  17. Sorry, I dont know why when I paste the code there, it turned out to be a link

    let me paste it again
    div expr:id=’"summary" + data:post.id’>
    createSummaryAndThumb("summary");
    Continue reading…</span

  18. Max says:

    @ Weng Yee Khoo, sorry but i don’t understand what are you talking about.

  19. sarlyn says:

    Somebody help me? I can not find : or even the I need help pls. I am using a customized template. Any help there is thank you.. I aprreciate. thanks.

    • Max says:

      hi sarlyn, please explain more and try to tell us what you need with out including codes symbols.
      and please note that this hack is not working with all templates.

  20. sarlyn says:

    () or ()

  21. sarlyn says:

    Why the code couldn’t see on my comment? anyway i am talking about the post body. i can not find it.

  22. Weng Yee says:

    Sorry Max, I sound very confusing I know. But I am referring to the problem I ask you on the 13 of October. I went on following the advice you gave me, but there are some problems to that. All I mean is that there are two codes that I have found .

    Below is the first code I found:

    ..function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = “”;
    var img = div.getElementsByTagName(“img”);
    var summ = summary_noimg;
    if(img.length>=1) {
    imgtag = ”;
    summ = summary_img;
    }

    var summary = imgtag + ” + removeHtmlTag(div.innerHTML,summ) + ”;
    div.innerHTML = summary;..

    Another one I have found after I click >> expand widget. and i paste it below:

    ….div expr:id=’"summary" + data:post.id’>
    createSummaryAndThumb("summary");
    Continue reading…


    <!– clear for photos floats –…

    In other words, I went to look for expr:summary. post ID as you told me, but in the second code I pasted above, the "expr" is linked with something else. So i am not sure what to do and which to delete

    Hope you understand what I mean, Max. Thanks!

    • Max says:

      hi Weng Yee, i think this is not the right place to post this comment, please check your mail and do exactly what i’ll tell you to do, i tried it and it worked for me.

  23. Nesha says:

    When I try to insert a “jump break” it alters my side bar and makes the side bar slide under all the posts. This happens both before and after I edit my HTML. Is there any way to fix this?

  24. BbisbosS says:

    Thank you very much !!!!

  25. Max says:

    you are welcome BbisbosS

  26. alexa says:

    Hello, How can I change the readmore text link becomes read more permalink.. ?

    the example is this blogspot : newsalls.blogspot.com

    Please help me … Thanks…

  27. Max says:

    @ alexa, if you mean adding the title after read more, ok, instead of adding the read more only in step one, add after it the following code,

    <data:post.title/>

    see demo here : http://max123123.blogspot.com/

  28. I added in your code exactly–I copied and pasted. Everything was fine till I hit save and it did not like the > and < signs (in this part of the code: Read More) when I changed the READ MORE to add a button. I removed the < before the a expr:href… and then had to remove the . It posted the button this time but it is showing some text before the button. How do I get rid of that text?

    Cheri

  29. rock052 says:

    hi it didn’t work for me would you help me plz
    this is my blog
    http://healthyweightlosstips-free.blogspot.com/would you help me plz
    thanks any way

  30. gagaukon says:

    After a few trial and error, the hack is now officially a juicy addon here in my blog. http://www.timugon.com i even use a suggested button from this blog. Thanks for sharing.

  31. ellyali says:

    Hello there , eversince I came across your blog I have been so addicted. Tweaking becomes fun when it is your tutorial. So precise and easy to understand. Your clarity is superb. From favicons to this I tried almost everything that caught my eye. please take a look, http://ellyali.blogspot.com. I know everything seems mediocre, but the main point is to let you know that your tutorial 100% workable! Love all this…

  32. Max says:

    hi ellyali and gagaukon, thanks very much for your amazing comments, my best regards for you.

    @ rock052, can you give me some details about your problem.

    @ Cheri Peoples, sorry but i don’t understand.

  33. jennymiranda says:

    Your Comment Here …. *very helpful. thank you!!!!

  34. psycore says:

    yeah thanks bro!!! but i still have a problem… well i have the READ MORE… but i can´t the button… maybe i keep trying another day.. nice web very helpful…
    http://psy-vision.blogspot.com/

  35. III.5 says:

    Hey Max! can U share the “Share it!” widget (this is on your site) for us(blogger users) ?

  36. Bibiw says:

    nice…this is what i need to make my blog more cute :P

  37. I have a small probelm. As I’ve addicionated a post img css style in my blog, the keep reading icon comes with the style as well. Is there any way to fix this. Thanks

  38. Max says:

    the best solution for this problem is to add a css style for the “keep reading” image it self too in your template code.

  39. totoantonio says:

    Thank You very much. It works well in my Blog. Its very helpful.

  40. Max says:

    @ totoantonio, looks great in your blog. Always keep your blog updated with latest allbogtools.com tricks.

  41. Anup says:

    Hey Max!

    We can delete + “#more” tag from this code. This is not important. Isn’t it? It just add #more to each blogger post URL. Really not important!

  42. This is fantastic, thanks so much!! Exactly what I needed. The default (left aligned) put the text too close to my twitter chicklet (didn’t really see it there). Thank you!

  43. m2s says:

    awe!
    how did you have learned like that bro?
    thanks thats great!

    *download movie for free movie2satu.blogspot.com

  44. pragathish says:

    hey there..very very useful..but i have a problem and I need u’r help..go see my blog
    http://football-raillery.blogspot.com/

    the image has borders (an ugly kinda whilte border) eventhough the image is a .gif
    i tried .png but that also didnt help.
    pls help me :)

  45. Manuel says:

    Boy, this is all I need. Thanks a million :-)

  46. Caster says:

    Hi Max,I’m glad to meet u here as no pple ard me are expert in blog matter..How could i remove the read more/continue reading from my post as i wan to show the post in full page.This is my blog: fixandstyle-gallery.blogspot.com

  47. I glad if is there any way to adjust the alignment of read more button as per post alignment, means if i set post align to right then it will adjust automatically because i am writing in two language English and Urdu (Right Side) so please advice.

  48. mamalkay says:

    hi max.
    Thanks,Thanks,Thanks
    Thanks ten million

  49. Hi, i’ve try the code and it didn’t work for me…

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here