Creating 'After the jump' summaries using Read More Link makes your homepage load fast and keep things organized and well managed. Till now I shared many tutorials on free "Read More" Buttons and Continue Reading Links but today we will learn to create beautiful Read More buttons without using any image at all. We will use pure CSS to make this happen. I have styled a total of 10 buttons which I hope you will find interesting to further customize. Please see a demo first:
This link has different names. You can call it a "Full Story" Link, "Continue" Link, "Read rest of the story" link etc. If you have no idea what a read more link is or you have not added it as yet then please read this tutorial first:
- How To Show only Post Summary in Blogger?
Applying the new style to the Read More Link
I have shared many CSS codes below which will change the look of the post summary link on your blogger blogs but first you must know who to add the CSS to your templates and Read More link.
- Go to Blogger > Design > Edit HTML
- Backup your template
- Click the "Expand widget Templates" Box
- Search for this,
]]></b:skin>
5. And paste your selected Read More Link style code just above it.
6. Next search for this,
<data:post.body/>
7. Just below it you will find the read more link code similar to this one,
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'><div style="text-align: right;">Read More ->></div></a>
</b:if>
If you are using a read more link button then the code will look something like this,
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'><div style="text-align: right;">< img src=http://xyz.com border="0"/></div></a>
</b:if>
In both the cases, simply replace the highlighted code with this,
class="MBT-readmore"
8. Save your template and you are done!
Ten "Read More" Link Styles
Now select one of these styles for step#5
Style#1:
/*-------------------------- Narrow black Orange-------------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#EB7F17;
margin:5px 0;
border-left:400px dashed #474747;
border-right:2px solid #474747;
border-top:2px solid #474747;
border-bottom:2px solid #474747;
padding:2px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#EB7F17;
color:#fff;
border-left:400px dashed #474747;
border-right:2px solid #EB7F17;
border-top:2px solid #EB7F17;
border-bottom:2px solid #EB7F17;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#2:
/*------------Light Purple long----------------------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#6882C7;
margin:5px 0;
border-left:400px solid #6882C7;
border-right:2px solid #6882C7;
border-top:2px solid #6882C7;
border-bottom:2px solid #6882C7;
padding:1px 5px 1px 1px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
color:#000800;
border-left:50px solid #6882C7;
border-right:2px solid #6882C7;
border-top:2px solid #6882C7;
border-bottom:2px solid #6882C7;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#3:
/*---------------- Rectangle left border-----------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#009999;
margin:5px 0;
float:right;border-right:2px solid #009999;
border-left:10px solid #009999;
border-bottom:2px solid #009999;
border-top:2px solid #009999;padding:5px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#006B6B;border-right:2px dotted #009999;
border-left:10px solid #006B6B;
border-bottom:2px dotted #009999;
border-top:2px dotted #009999;
}.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#4:
/*-------------- Pink Left right -----------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#FE80DF;
margin:5px 0;
float:right;
border-right:2px solid #FE80DF;
border-left:2px solid #FE80DF;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#CC0099;
border-right:2px solid #CC0099;
border-left:2px solid #CC0099;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#5:
/*------------- Brown top Bottom----------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#B26B00;
margin:5px 0;
float:right;
border-top:2px solid #ddd;
border-bottom:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#B26B00;
border-top:2px solid #B26B00;
border-bottom:2px solid #B26B00;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#6:
/*-------------- Blue Blank-----------------*/.MBT-readmore{
background:#0080ff;
text-align:right;
cursor:pointer;
color:#Fff;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#FFf;
font:bold 11px sans-serif;
color:#0080ff;
border:3px dotted #ddd;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#7:
/*------------- Red + Dark Red------------*/
.MBT-readmore{
background:#fffff;
text-align:right;
cursor:pointer;
color:#FE8080;
margin:5px 0;
float:right;
border:2px solid #FE8080;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#FFf;
font:bold 12px sans-serif;
color:#FF0000;
border:2px solid #FF0000;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#8:
/*------------ White + Green -----------*/
.MBT-readmore{
background:#fffff;
text-align:right;
cursor:pointer;
color:#008000;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#008000;
font:bold 11px sans-serif;
color:#fff;
border:2px solid #ddd;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#9:
/*---------- Black --------------*/
.MBT-readmore{
background:#000800;
text-align:right;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#000800;
border:2px solid #000800;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#10:
/*----------Orange One 1 ----------------*/.MBT-readmore{
background:#EB7F17;
text-align:right;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:none;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#FFB93C;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Customization:
You can easily make changes to the colors and style by understanding this general guide.
- Edit .MBT-readmore To Change background, border and font colors in Active mode
- Edit .MBT-readmore:hover To Change background, border and font colors when a user hovers mouse cursor on the button
- Edit .MBT-readmore a To change the link color
- Edit .MBT-readmore a:hover To change the link color on mouse hover
You can use the Color Generator Tool For changing colors.
I hope you like it and if you faced any problems then don't feel shy to ask a brother. :>
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you
Subscribe to our regular Email Updates!
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
34 comments:
Superb post bro... Nice buttons...Look at some of css3 buttons that i designed here. review it...
@Amit
My Pleasure Amit. You are doing great. More power to you. :>
nice ..
- Mohd Rusydi Alias -
cant find read more instead of that i found thisundefinedsee below)
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Assalam-o-alikum
I just Applied this to my blog. its excellent and working. i've read some of your other posts too..you are doing really good job and its really very helping. thank u so much dear. Allah bless u. keep sharing . Keep it up.
@Sudhir
Buddy delete that code and replaced it with the one provided in this tutorial: Read More Link
Then come back and apply the styles above like 123..
@Sahil
W.salam brother,
My pleasure buddy. Feels great that it worked for you. :)
nice post...
i have also found same code
and i did in this way
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div class="MBT-readmore">
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div></div>
</b:if>
still working nicely...
Thank you so much MBT, I really enjoy your tutorial, and now I had just applied this thing to my blog, and you can see its perfectly working, and I change MBT-readmore to SB-readmore but I wrote there like this
/*------------this is a credit to www.mybloggertricks.com----------------------*/
SimplifiedBlogging.com
THANK YOU SO MUCH SIR!
Nice one bro , how to do this in word press!
Hi. Thank you so much for providing this great tutorial. I have a few question that I wanted to ask. How do I position the button to a different location? I have 'linkwithin' widget placed on my blog and when I put this 'read more' code on 'edit HTML', the 'read more' button appear on the bottom right hand side of the post below the 'linkwithin' widget. I want it to appear above the 'linkwithin' widget on the lefthand side. Any idea how I can do so?
My blog design has broke after posting a post . I could not understand where is the problem. I tried a lot to solve by using page element and page design. but can not solve the problem.
my blog address is
http://xtest350.blogspot.com
Anyone help me ,................Please please please
i cant find this part <div style="text-align: right;" in my html what can i do?
It is really a great tutor, my blog is now awesome with your work. Thanks alot buddy (MBT!)
@angeloukos
Please find this code instead <a expr:href='data:post.url'>
you must see a Read More text just below the code.
Then follow the instructions as told.
@christian
My pleasure buddy. Glad that it worked for you. :)
great post:) Thanks, my results - e-komunikacja.blogspot.com
Hi Mohammad,
Ever since I found your site last week, I've been on it several times. You have so many great tricks & tips. Plus you make them easy to understand. Thank you for that!!
I have a question though, Is it possible to add one of your "read more" buttons even if I already have the "jump break" through blogger set up? I tried adding the code & following your tutorial but it didnt change anything. So I was wondering if that could be the reason?
Do you think I have to go back and undo the jump breaks in all my posts?
Thanks so much!!
Kelly
Hi Brother, i've got the 'read more' link on my posts. the trouble is that it appears in the next line, like this:
concludes that the problem is
... read >>
i want the link to be in line, right after the text, like this:
concludes that the problem is... read >>
I would be grateful if you could help me out.
it does'nt work on my blog.. :(
It is showing at the end of posts.How to make show button after summery.
Thanks
Robin
anymore style??
I like this button..
Asalamu alaikum brother.
It worked for me on my home page my posts are fully shown and thenread more link. How can i make my posts not to show fully on my homepage?
--iepc.blogspot.in--
It doesn't work in my blog. I tried looking for <a expr:href='data:post.url'> the result is 3 but none of them has Read More below it.
How can I fix this? Thanks..
BTW I tried this code from 1 of the comments
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div class="MBT-readmore">
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div></div>
</b:if>
But it only appears when I put my mouse over the location of Read More...
i cant find the code
I CANT FIND THE CODE
I CANT FIND THE CODE <data:post.body/
Well blue and white is best of all them.thnks mashable tricks
YOU ARE THE BEST, EVERYTHING IS CLEAR AND UNDERSTANDABLE, GREAT THANKS... :-)
thankssss working perfectlyyy
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.
Regards,
Mohammad