10 Creative Ways To Stylize Read More Links In Blogger

To make web pages loading faster there is an awesome way that every blogger users adopt is summarizing post using Read More link. Read More link specially applies with <!--More--> tag when it terminates a line only to display on homepage but on clicking the link the entire post expands with other accessories that might be hidden on frontage. This tutorial is specially designated for new blogger users, those have little knowledge about CSS & Basic HTML and incapable to design buttons to over stylize Read More links. These days we will share some CSS and HTML tutorials related Blogger and this recipe will show you how to design Read More links with pure CSS style without any help of creative image.

Applying the new style to the Read More Link

1. Go to Blogger>Template
2. Backup Your Template
3. Now search for the following code

]]></b:skin>

4. Now add your selected Read More Style from below lists
5. Again search for the following code

<data:post.body/>

6. You should see a code of Read More below it like as

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

7. If you use button instead of text then your code should be like as

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

8. In both cases simply change the highlighted yellow colored script with this

class='readmore'

9. Finally hit save and you're done!

Ten "Read More" Link Styles

Now select one of these styles for step#4

Style: #1

.readmore{margin-top:-1px; float:right}
.readmore a {
color:#006B6B;
text-decoration:none;
}
.readmore a:hover {
text-decoration:none;
}
.readmore{color:#333;margin-top:20px}
.readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#009999;
margin:5px 0;
float:right;
border: 5px solid #029fff;
padding:5px;
font:bold 11px sans-serif;
}
.readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#006B6B;
border: 5px solid #02af00;
}
.readmore:active{
position:relative;
}

Style: #2

.readmore{margin-top:-1px; float:right}
.readmore a {
text-decoration:none;
}
.readmore{
color:#333;
margin-top:20px;
}
.readmore{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje26Kt7n28Zs_nz6yF5rQTm0UkdH7raJAa-WnAb5aRgBl-R_jo9T7zt3k8rtfr0XsRMXjP69WHk0QR1xeDKKu5Hp-IQVGdj4OT0MniNOi3NuMTZ8su-cSnYnaRBUaDlmBYlpEteEp-uVQ/s1600/xcatnav-bg.png.pagespeed.ic.jPcbuVopzb.png)repeat-x;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #EAEAEA;
display:inline-block;color:#666;
font-family: 'Verdana',arial !important;
font-size:12px;
font-weight:400;
padding:6px 14px;
text-decoration:none;
text-shadow:0px 1px 0px #fff;
}
.readmore:hover{
background-color:#f6f6f6;
}
.readmore:active{
position:relative;
}

Style: #3 

.readmore{margin-top:-1px; float:right}
.readmore a {
color:#006B6B;
text-decoration:none;
}
.readmore a:hover {
text-decoration:none;
}
.readmore{color:#333;margin-top:20px}
.readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#009999;
margin:5px 0;
float:right;
border-top: 2px solid #ff6b6b;
border-bottom: 2px solid #ff6b6b;
padding:5px;
font:bold 11px sans-serif;
border-radius:7px;
}
.readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#006B6B;
border-top: 2px solid #029fff;
border-bottom: 2px solid #029fff;
}
.readmore:active{
position:relative;
}

Style: #4

.readmore{margin-top:-1px; float:right}
.readmore a {
color:#006B6B;
text-decoration:none;
}
.readmore a:hover {
text-decoration:none;
}
.readmore{color:#333;margin-top:20px}
.readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#009999;
margin:5px 0;
float:right;
border: 2px solid #ff6b6b;
border-left: 8px solid #ff6b6b;
padding:5px;
font:bold 11px sans-serif;
}
.readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#006B6B;
border: 2px dotted #ff016b;
border-left: 8px solid #ff016b;
}
.readmore:active{
position:relative;
}

Style: #5

.readmore{margin-top:-1px; float:right}
.readmore a {
color:#fff;
text-decoration:none;
}
.readmore a:hover {
text-decoration:none;
}
.readmore{color:#333;margin-top:20px}
.readmore{
background:#44b8ff;
text-align:right;
cursor:pointer;
color:#009999;
margin:5px 0;
float:right;
border: 2px solid #f7f7f7;
padding:6px;
font:bold 11px sans-serif;
border-radius:5px;
box-shadow: 0px 1px 2px #BBB;
}
.readmore:hover{
background:#009eff;
font:bold 11px sans-serif;
color:#006B6B;
}
.readmore:active{
position:relative;
}

Style: #6

.readmore{margin-top:-1px; float:right}
.readmore a {
color:#fff;
text-decoration:none;
}
.readmore a:hover {
text-decoration:none;
}
.readmore{color:#333;margin-top:20px}
.readmore {
background:#54a04e;
text-align:right;
cursor:pointer;
color:#009999;
margin:5px 0;
float:right;
border: 2px solid #f7f7f7;
padding:6px;
font:bold 11px sans-serif;
border-radius:5px;
box-shadow: 0px 1px 2px #BBB;
}
.readmore:hover{
background:#0ba000;
font:bold 11px sans-serif;
color:#006B6B;
}
.readmore:active{
position:relative;
}

Style: #7

.readmore{margin-top:-1px; float:right}
.readmore a {
color:#fff;
text-decoration:none;
}
.readmore a:hover {
text-decoration:none;
}
.readmore{color:#333;margin-top:20px}
.readmore {
background:#ff6f6f;
text-align:right;
cursor:pointer;
color:#009999;
margin:5px 0;
float:right;
border: 2px solid #f7f7f7;
padding:6px;
font:bold 11px sans-serif;
border-radius:5px;
box-shadow: 0px 1px 2px #BBB;
}
.readmore:hover{
background:#ff0b0b;
font:bold 11px sans-serif;
color:#006B6B;
}
.readmore:active{
position:relative;
}

Style: #8

.readmore{margin-top:-1px; float:right}
.readmore a {
color:#fff;
text-decoration:none;
}
.readmore a:hover {
text-decoration:none;
}
.readmore{color:#333;margin-top:20px}
.readmore {
background:#666666;
text-align:right;
cursor:pointer;
color:#009999;
margin:5px 0;
float:right;
border: 2px solid #f7f7f7;
padding:6px;
font:bold 11px sans-serif;
border-radius:5px;
box-shadow: 0px 1px 2px #BBB;
}
.readmore:hover{
background:#333333;
font:bold 11px sans-serif;
color:#006B6B;
}
.readmore:active{
position:relative;
}

Style: #9

.readmore{margin-top:-1px; float:right}
.readmore a {
color:#029eff;
text-decoration:none;
}
.readmore a:hover {
text-decoration:none;
color:#00aa00;
}
.readmore{color:#333;margin-top:20px}
.readmore {
background:#fff;
text-align:right;
cursor:pointer;
color:#009999;
margin:5px 0;
float:right;
border-left: 2px solid #029eff;
border-right: 2px solid #029eff;
padding:6px;
font:bold 11px sans-serif;
border-radius:7px;
}
.readmore:hover{
font:bold 11px sans-serif;
color:#006B6B;
border-left: 2px solid #00aa00;
border-right: 2px solid #00aa00;
}
.readmore:active{
position:relative;
}

Style: #10

.readmore{margin-top:-1px; float:right}
.readmore a {
color:#555;
text-decoration:none;
}
.readmore a:hover {
text-decoration:none;
}
.readmore {color:#333;margin-top:20px}
.readmore {
background: -moz-linear-gradient(center top , rgb(255, 255, 255) 0px, rgb(238, 238, 238) 100%) repeat scroll 0% 0% transparent;
cursor:pointer;
color:#009999;
margin:5px 0;
float:right;
border: 1px solid #DDD;
padding:7px;
font:bold 11px sans-serif;
border-radius:5px;
}
.readmore:hover{
background:#f8f8f8;
color:#006B6B;
}
.readmore:active{
position:relative;
}

Customization & Basic Guidance

You can easily change the colors, shadows, background and other styles by making following changes

• Edit .readmore  To Change background, border, color, font styles in active mode of Read More button
• Edit .readmore:hover To Change background, border, color, font styles when a user hovers mouse cursor on that button
• Edit .readmore a To Change the link color
• Edit .readmore a:hover To change the link color on mouse hover

I hope you like it and if you faced any problems then don't feel embarrassed to ask :)