How To Change Simple Read more Text with Stylish css Buttons

simple read more button

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 &#8594; </a>

 

  •  You can change Continue reading with your own text

Now Save the your template

3 thoughts on “How To Change Simple Read more Text with Stylish css Buttons

Leave a Reply

Your email address will not be published. Required fields are marked *