Stylish CSS3 Read More Button With Hover Effect For Blogger

Every blogger always try to make his blog look professional, so today i am going to tell how you can use animated css3 buttons for your blogger blog. It will give your blog a pro look. I have seen many expert bloggers advising Images for Read More button but it does not look good and it increases the load time of your blog because each image takes separate http request. So lets start:-

Demo

1) Open blogger dashboard >> Design >> Edit HTML


2) Find the following code

]]></b:skin>

3) Replace it by

.button {
    font-family: sans-serif;
    font-weight:bold;
    color: #fff;
    padding:5px 10px 6px 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
    cursor: pointer;
    }
.black {
    background:#7F7F7F;
    background-image: -moz-linear-gradient(top,#7F7F7F,#2B2A2A);
    background-image: -webkit-gradient(linear,left top,
left bottom,from(#7F7F7F),to(#2B2A2A)   );
    }
.black:hover{background:#2B2A2A; }
.size {font-size:12px;}
]]></b:skin>

4) Now find

<a expr:href='data:post.url + "#more"'>Read More </a>

5) Replace Read More with 

<a class='button size black' expr:href='data:post.url'>Read More</a>

Thats it.you have done!!!!


In case you are not able to find the above code than find READ MORE or CONTINUE READING  whatever the link is there on post excerpts.


I find this code on a simple template

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

Replace it with

<b:if cond='data:post.hasJumpLink'><div class='jump-link'><a expr:href='data:post.url + &quot;#more&quot;'><a class='button size black' expr:href='data:post.url'>Read More</a></a></div></b:if>

If you face any problem leave comment below , i will try to solve your problem as early as possible.