Add A CSS Read More Button In Blogger/Blogspot Blog

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjFAnTLXpEQWf8pZipbLcNZsvM7gf52FIGu2QJ6D9DiFgFmHNwVXcnKtFYQM0-nNAGMXYjPiB_Gm5SAHh2bCVDWlJfstSvMxhVLpm2FBIt9UlBUl9eDN_p3XEu8A_xwKjxToSe53EQ50ie/) 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;

}

.jump-link {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjFAnTLXpEQWf8pZipbLcNZsvM7gf52FIGu2QJ6D9DiFgFmHNwVXcnKtFYQM0-nNAGMXYjPiB_Gm5SAHh2bCVDWlJfstSvMxhVLpm2FBIt9UlBUl9eDN_p3XEu8A_xwKjxToSe53EQ50ie/) 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;
}

5. Now save your template and you see a stylish read more button hanging on your page.

Posted in: Blogger,Blogging,Tricks amp; Tips