Previously i shared Add Automatic Read More Button in blogger blog ,Replace Newer Older Home Text with image but I’m now with new thing which is stylish css3 Read More Button, so toady we are going to change simple read more text with stylish hover effect read more button ,this is beautiful stylish css3 read more button, we know that every blogger want to give his blog or website look professional so you can increase beauty of your blog i have seen many pro blogger they are use image for this but it’s not good because each image take a separate https request so to day we will add css3 stylish read more button
Stylish Read More CSS Button
To add this stylish read more button in your blogger blog follow theses steps
- Go Blogger Dashboard >> Edit html
- Now find the below code
]]></b:skin>
- Now Copy the below code and past it before the above code
/*——Readmore CSS By nafisflahi——*/
.readmore{
background:#000800;
text-align:right;
cursor:pointer;
color:#fff;
margin:0px 0;
float:right;
border:2px solid #dddz;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.readmore:hover{
background:#0080ff;
font:bold 11px sans-serif;
color:#fff;
}
.readmore a {
color:#fff;
text-decoration:none;
}
.readmore a:hover {
color:#fff;
text-decoration:none;
}
/*——Readmore CSS By nafisflahi——*/
- Now Find the below code
<a expr:href=’data:post.url >Read More </a>
- Now copy the below code and replace the above code
<a class=’readmore’ expr:href=’data:post.url’> Continue reading → </a>
- You can change Continue reading with your own text
Now Save the your template
this is coll design read more css button thank you for sharing
You are most welcome
Bloggers must not be viewed simply as an extension of the traditional media while it may seem like a fairly easy exercise, there are a few important rules that will be followed as a way to talk to them efficiently. Read More Button for Blogger