Sunday, July 27, 2014

Customize read more link on blog

If you want to customize Read More >> link or if you want your Read More >> look like this.
then follow the following simple steps:
1) At first, login to your blog and go to the template section and click Edit HTML button.

2) After clicking on Edit Html button, press Ctrl + F and type ]]>
in search button.3) Above ]]>

, paste the following code:
/* Read more button css */
.jump-link {text-align: left;}
.jump-link {font-size: 14px; font-family: "calibri", regular;}
.jump-link a {background:#5b5a54; color: #ffffff ; padding: 2px;}
.jump-link a:hover {background: #ff9901; color: #ffffff; padding: 2px;}


As shown below:




4) After then, press Ctrl + F and type jump-link in the search box. You will see the code as below:

                          

5)Edit your code and your code now should look like this:


           
i.e.



6) Now save your template and reload your blog.

7) Now you are done!

Also,
Instead of this, if you want an image button to appear as Read More. In step 4,

             
The above code should look this:

               
Save your template and you are done!




No comments:

Post a Comment