10 Ways To Style and Create "Read More" Links In Blogger

readmore-buttonsCreating '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:

 

Live Demo

 

 

 

 

 

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:

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.

  1. Go to Blogger > Design > Edit HTML
  2. Backup your template
  3. Click the "Expand widget Templates" Box
  4. 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:

Read More Button

 

/*-------------------------- 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:

Read More Button


/*------------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:

Read More Button


/*---------------- 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:

Read More Button

 


/*-------------- 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:

Read More Button

 


/*------------- 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:

Read More Link


/*-------------- 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:

Read More Link

/*------------- 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:

Read More Link

 

/*------------ 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:

Read More Link


/*---------- 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:

Read More Link


/*----------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 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 »

72 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. @Amit

    My Pleasure Amit. You are doing great. More power to you. :>

    ReplyDelete
  2. 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 + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
    </b:if>

    ReplyDelete
  3. 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.

    ReplyDelete
  4. @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. :)

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Nice one bro , how to do this in word press!

    ReplyDelete
  7. 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?

    ReplyDelete
  8. 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

    ReplyDelete
  9. i cant find this part <div style="text-align: right;" in my html what can i do?

    ReplyDelete
  10. It is really a great tutor, my blog is now awesome with your work. Thanks alot buddy (MBT!)

    ReplyDelete
  11. @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. :)

    ReplyDelete
  12. 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

    ReplyDelete
  13. 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.

    ReplyDelete
  14. it does'nt work on my blog.. :(

    ReplyDelete
  15. It is showing at the end of posts.How to make show button after summery.

    Thanks
    Robin

    ReplyDelete
  16. anymore style??
    I like this button..

    ReplyDelete
  17. 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--

    ReplyDelete
  18. 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..

    ReplyDelete
  19. 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 + &quot;#more&quot;' 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...

    ReplyDelete
  20. i cant find the code

    ReplyDelete
  21. I CANT FIND THE CODE

    ReplyDelete
  22. I CANT FIND THE CODE <data:post.body/

    ReplyDelete
  23. YOU ARE THE BEST, EVERYTHING IS CLEAR AND UNDERSTANDABLE, GREAT THANKS... :-)

    ReplyDelete
  24. Read more option is out of the button. Am getting read more in the button can you plz help me

    ReplyDelete
  25. enter the Ctrl+F then u can find you may need any code..

    ReplyDelete
  26. ok fixed it....
    but I'm getting a problem now..
    At the end of the whole post it's being getting shown up ...
    so wat wud be its benifit in that case.
    Cant i get it somewhere in the middle of the post... So that one cud expand it to get the full view..

    ReplyDelete
  27. Hi there, my blog's template www.ptmaroct.blogspot.in is not having the code :
    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'>

    <div style="text-align: right;">Read More ->></div></a>
    </b:if>


    So where to now replace the code with class="MBT-readmore"

    ReplyDelete
  28. how to post with read more button i am getting all full posts on the home page of my blog

    ReplyDelete
  29. its not working for me..actually i added some code like span class = fullpost.. something like this for my articles...means when ever i want to break my post i used this code snippet in the html mode of my article..so it worked..but after seeing your article i tried your example and applied the same but its not working..i am able to see my same old Read more link..if you want to see this you can see my "phphunger dot com"

    ReplyDelete
  30. @Kuljit kaur
    Search for <data:post.jumpText/> and replace it by <div class='MBT-readmore'><data:post.jumpText/></div>

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. Hi, I'm having problems, script on my blog template as follows:

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

    Can you help me ?

    ReplyDelete
  33. tooooo good bro it just simply awesome !
    i have used it in my blog http://ymandge.blogspot.in/ pls see my blog and suggest me new tips

    ReplyDelete
  34. i'v done bt m still havin' prob in "read more" button process. http://estilomoldar.blogspot.in/ dis z maah blog... plzzz help

    ReplyDelete
  35. The first code I HAVE TO LOOK FOR: ]]>, this I found in mobile, you know how it goes after regular a mobile version codes, for the regular i found this: <![CDATA[/*
    Is this the right one? I am confused


    ReplyDelete
  36. done everything you said but it dont change anything :/

    ReplyDelete
  37. great but the button is showing in the contact us page and the about page...how can i delete them from there?

    ReplyDelete
  38. You are really a professional content writer. Very much interesting post. You solved my READ MORE problem.
    Thanks man!

    ReplyDelete
  39. I have added the code in my blog and the read more Button is appearing but i's appearing after the Full Post,means still the whole post is appearing on the Homepage How to resolve the problem??

    ReplyDelete
  40. Thanks I created Read More link in my own style.Keep Posting Like these.
    Visit my blog to see the read more link

    ReplyDelete
  41. hi sir,i didn't find the item: <data:post.body/>in my blog's templates,then how can I add and do for "Read more" ? I find the items as below but not exactly as below:
    <data:post.body/>

    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
    <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
    </b:section>

    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
    <meta expr:content='data:blog.title' itemprop='name'/>
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' itemprop='description'/>
    </b:if>
    </div>
    </b:if>
    I'm really tired of searching and arranging for my blog for days.I'll be waiting for your kindly help.

    ReplyDelete
  42. Works amaizing! Thanks a lot

    ReplyDelete
  43. If you don't find the above mentioned code by the author so just find jump-link and replace class code with the author code.

    ReplyDelete
    Replies
    1. Dude. Thank you so much for saying that! You just saved me tons of frustration.

      Delete
  44. can't find below code. plz help My web - softwaresuneeds.blogspot.in

    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'>
    <div style="text-align: right;">Read More ->></div></a>
    </b:if>

    ReplyDelete
  45. hey i did as u said,how do you add the read more in the post

    ReplyDelete
  46. @TravEx
    I'm sorry that the author doesn't seem to be responding to the questions on his blog... but you can make it not disappear by deleting this part in the provided codes:
    .MBT-readmore:hover{
    background:#FFf;
    font:bold 11px sans-serif;
    color:#0080ff;
    border:3px dotted #ddd;
    }

    ReplyDelete
  47. Please how do i add, ''how many people commenting'' and ''say something?

    ReplyDelete
  48. I am a Fan of Myblogger tricks

    ReplyDelete
  49. Much Thank for this info....Its Great Article, useful for me.

    ReplyDelete
  50. This comment has been removed by the author.

    ReplyDelete
  51. i am not getting expand widget templates in my template please help me

    ReplyDelete
  52. sir agr hm article likhain gay to article kay mid may readmore dalna ho to kaisay dalay gay

    ReplyDelete
  53. I cant find the code

    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'>
    <div style="text-align: right;">Read More ->></div></a>
    </b:if>

    from my site, http://techylove.blogspot.com

    ReplyDelete
  54. I'm having trouble finding anything of that in the EDIT HTML area. I don't know if blogger changed things around again...

    ReplyDelete
  55. please tell me how add this read more
    I cant find the code


    i also has same issue

    ReplyDelete
  56. Please i need exactly your (readmore) button

    ReplyDelete
  57. hello brother i want to buy custom domain for my blog.....so i need your help from where i should buy............

    ReplyDelete
  58. JAZAKALLAH KYAIAR Bro I am using your widgets to prepare a really nice islamic Blog can you please help me?

    I want to chage the "Read more" text how can I do that please let me know?

    I want to write something else instead of readmore?

    ReplyDelete
  59. Salam alaik~
    its working! thanks a lot~ :)
    n diz website is really cool!
    XD

    ReplyDelete
  60. hi,
    i want to ask you that how can i modify the link of jump break, let me explain, jump break link is of the post's link with #more, i want to ad my adf.ly in it, so how can i modify it, please help.

    ReplyDelete
  61. readmore is too long for my post, admin help me.
    My blog: http://www.netvietplus.net/
    Thank you so much!

    ReplyDelete
  62. I cant find the code

    b:if cond='data:blog.pageType != "item"'>
    a expr:href='data:post.url'>
    div style="text-align: right;">Read More ->>


    from my site
    Plz help me. Thanks so much!

    ReplyDelete
  63. This Post Is Very Useful For Me, Thanks Brother

    ReplyDelete
  64. There are many present in my template, please help me !

    ReplyDelete
  65. Sir i don't understand all the html jargon. Any easier way to get this thing Done? i need this for my blog posts urgently. Thanks

    ReplyDelete