Blogger template Designer tips-tricks

Make button of Read more in Blogger

When you insert Jumb break to any post in blogger a value "Read more" appears bneath the jump break. Blogger defautlt Read more is not so visible or well designed. To design this value to a button i have found a code for this inside template. When you add css code to templated designer value changes to a button.
Go to templated designer and click on advance and then click to Add css at the end.
Add below code:

.jump-link a{
display:block;
width:150px;
Height:25px
text-align:center;
font-size:12px;
Border:1px solid red;
Background:red;
}
.jump-link a:hover{
display:block;
width:150px;
Height:25px
text-align:center;
font-size:12px;
Border:1px solid blue;
Background:blue;
}

tip: Any change that you will make in this code will appear in preview at your blog in tempate designer. You can change border and background colors to your choice.
To add background image as i used for this blog add this code.
background:url(url of image);
i have hosted some of button images at Photobucket.com you may like to add those. Click here.
To make rounded corner button add this css after border attribute in the above code.

border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

apply these changes to template to save.

Comments