Thursday, January 7, 2016

How to Customize the READ MORE Button in Blogger

How to Customize the READ MORE Button in Blogger

Does your Read More button too plain for your blog? This simple button can be styled to fit and match our blog's design. We can make it more noticeable to encourage clicks to different posts on our home page. Read on and learn how we can improve our little Read More button.

Step by Step: How to Make the READ MORE Button More Noticeable

1. On your Blogger dashboard, go to Template > Customize
2. On Blogger Template Designer, click Advanced (then scroll down) > select Add CSS
3. On the Text Box underneath the "Add Custom CSS", copy and paste the code below:

/* read more button */
.jump-link { 
margin: 15px 0px; 
.jump-link a {
background-color:#ffe066; color:#000;
padding:10px; text-transform: uppercase;
.jump-link a:hover { 
background-color:#f6a629; color:#fff; text-decoration:none; 

Now, for you to be able to match the colors to your design, you can change the following:
  • update the #ffe066 to change the button's color
  • update the #fff to change the text's color
  • update the #f6a629 to change the button's hover color
  • update the #fff to change the text's hover color
The text-transform: uppercase; is a CSS code use to make the letters into uppercase format while the text-decoration: none; is a CSS that disables the underline style of the link.

Any questions? Kindly type your queries below :)

No comments:

Post a Comment

Write your comment or message here.

Ads by Google