How to Customize Read More Button in Blogger

How to Customize Read More Button in Blogger

Blogger gives a simple read more button/link by default. If you don’t like that, then you can change it with CSS. I think that everyone knows how the read more button works and for what purpose it is used, so I will skip the details and jump directly to the steps.

Note:Before you continue, make sure you have added the simple read more link/text that Blogger gives by default.

Change Read More Text With Button

1. Go to Blogger > Design > Edit HTML.

2. Now click on the box of expand widget template.

3. Now find this code ]]></b:skin> by pressing Ctrl + F.

4. Now just before this code, paste the following code.

 .jump-link { background:url(http://www.tricksdrive.com/fb/images/readmore.png) no-repeat scroll 0 0 transparent;  height:32px;  left:1px;  margin-bottom:-11px;  margin-top:18px;  padding-top:4px;  position:relative;  width:100px;  float:right;  }  .jump-link a {  color:#FFFFFF;  font-size:11px;  margin-bottom:10px;  padding-left:18px;  text-shadow:1px 1px 0 #B56F2B;  font-weight:normal;  }  .jump-link a:hover {  text-decoration:underline;  }

Enjoy