Create Read more With Background Color.

read more and its variations to be more attractive. Today’s post is about Create Read more With Background Color.
Commonly, the text “read more” is only the link text, but from its appearance, it’s rather unattractive. If you want to modify it in order to become more attractive, you can add the background, as first alternative.




Note: to practice the following tutorial, you are suggested to use a trial blog. Read about trial blog here at Create Multiple Blog In One Blogger Account.
The following is how to create read more with background color.

1. Login to blogger with your ID.
2. Click Design.
   
3. Click Edit HTML.
   
4. Backup your full template by clicking on the Download Full Template.
   
5. Find the code ]]></b:skin>
6. Copy and paste the code below exactly above the code ]]></b:skin>

   .jump-link a{
     -moz-border-radius:5px;
     -khtml-border-radius: 5px;
     -webkit-border-radius: 5px;
     padding:2px 12px;
     font-style: italic;
     border:1px solid #b7b7b6;
     margin:10px 0px;
     text-decoration:none;
     color:#000;
     background:#ccc;
     text-align:right;
     float:right;
   }
   .jump-link a:hover{
     border:1px solid #545353;
     color:#fff;
     background:#797878;
   }

7. Click SAVE TEMPLATE.
8. Done.

The code above is an example. You can still change the CSS code as you desire, based on your blog design. The color given is gray, but you can change with other colors, e.g.
background:#ccc;
Replace the color code with your favorite color code, as:
background:# 1881f7;
If you have edited the code, don’t forget to Save Template.
Happy trying!