Try Advanced Blogger Templates Search >> 
Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.
Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment.
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.
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.
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.
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 :
And you can find more buttons by searching in google for “read more button”.
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
<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
<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
Related Tricks & Tutorials
About The Author
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
Thank you so much for this valuable tip. I will try to add it to my blog too.
Hi! Thanks for the post, it is very useful. I got a problem though.. Now, I have my «read more» duplicate…
My bad!! Forget my other post.. I had the code twice
Thank you so much again!!
hi Alexandra, you are always welcome here.
can you help me to remove the tab at the header, please?
hi lia, sure i’ll, but when i visited your blog, blogger says that it’s not existed, what tab you are talking about?
i just change it to liawijaya.blogspot.com
i want to remove “home, features, edit,…..” at the header… know how?
hi lia, it’s very easy to remove this links and the bar it self.
go to your blogger dashboard >> layout >> edit html >> and find the next code then delete it.
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__
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.
is that on the top?
cant find
hi lia, please send me your blog url so i can help you.
I hv added this image..
see my blog : http://dailypocketmoneyfinder.blogspot.com
@ vishwanath , thanks , this is good example.
i was searching for this….thanks…great post.. thanks
@ Techie inspire, thanks for you comment, if you have any suggestion for our upcoming tutorials please let me know.
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
hi deelight
every thing is explained here.
Hi Max,
I added the Read More button but my left sidebar totaly goto bottom! how can fix it? can u hlp me?
hi malayali, please check out this tutorial
3 Issues / Problems With new Blogger Read Me / Jump Breaks And How To Fix It i wish it’ll help.
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!
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
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
@ deelight, i’ll add soon post with alot of free buttons,
Thanks!! all your tricks are working for my blog. So far so good!! Keep it up!
thanks mark for encouraging me.
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?
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
@ Weng Yee Khoo, sorry but i don’t understand what are you talking about.
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.
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.
() or ()
Why the code couldn’t see on my comment? anyway i am talking about the post body. i can not find it.
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!
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.
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?
@ Nesha, please check this tutorial : 3 Issues / Problems With new Blogger Read Me / Jump Breaks And How To Fix It
Thank you very much !!!!
you are welcome BbisbosS
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…
@ 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,
see demo here : http://max123123.blogspot.com/
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
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
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.
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…
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.
Your Comment Here …. *very helpful. thank you!!!!
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/
Hey Max! can U share the “Share it!” widget (this is on your site) for us(blogger users) ?
nice…this is what i need to make my blog more cute
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
the best solution for this problem is to add a css style for the “keep reading” image it self too in your template code.
Thank You very much. It works well in my Blog. Its very helpful.
@ totoantonio, looks great in your blog. Always keep your blog updated with latest allbogtools.com tricks.
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!
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!
awe!
how did you have learned like that bro?
thanks thats great!
*download movie for free movie2satu.blogspot.com
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
you can fix it at here: http://bloggeruniversity.blogspot.com/2007/01/how-to-remove-or-change-image-borders.html
visit my blog:http://softfull4down.blogspot.com/
Boy, this is all I need. Thanks a million
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
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.
this is shown in the tutorial.
hi max.
Thanks,Thanks,Thanks
Thanks ten million
you are welcome.
Hi, i’ve try the code and it didn’t work for me…