Monday, December 12, 2011

Changing the Read More Link to a Cool Animated Button.


Before
After  

Steps to be followed:
1. Create a Button and assign a class to it.
2. Modify the JumpLink codes

For Creating a Button, Open Blogger Template HTML, and Add the following Code.
a.button {
    height: 20px;  margin-bottom: 20px; padding-bottom: 20px; text-decoration: none;
}
a.button span {
    background: transparent url('http://i.imgur.com/GiO9V.gif') no-repeat;
    display: block; line-height: 20px; padding: 16px 120px 16px 20px; 
}
a.button:active span {
    background-position: bottom left;
}
Change the image Gio9V.gif to your choice. And save the template.
Now for Modifying the Jump-Link, click on Expand Widgets, and search for jump-link using browser search option.
   
      
    
Now add a Class Button to the Anchor tag <a class='button' ... And Replace <data:post.jumpText/> to <span/>. The final code will look like below:
   
      
    

Now, we are ready to save the template and see the effect. And, we should never forget to create a Backup of the Template before editing that. ;)

No comments:

Post a Comment