In this post I will show you how to replace your default read more link with stylish CSS3 button. Let's start.
Procedure to Add Stylish CSS3 button in Blogger:
(1) Go to Blogger Dashboard >> Template >> Edit HTML
[ Please backup your template before doing any changes, if you want restore the previous mode ]
(2) Then search for ]]></b:skin> with Ctrl+F.
(3) paste the following Code just Above
]]></b:skin>
.jump-link {
display: block;
font-size: 12px;
font-weight: bold;
text-align:right;
}
.jump-link a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
padding: 6px 15px;
background: -moz-linear-gradient(
top,
#42aaff 0%,
#003366);
background: -webkit-gradient(
linear, left top, left bottom,
from(#42aaff),
to(#003366));
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border: 1px solid #003366;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.5);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.5);
text-shadow:
0px -1px 0px rgba(000,000,000,0.7),
0px 1px 0px rgba(255,255,255,0.3);
}
Button Design
(4) Now Preview Template. If it works them Save Template & you are done.
Customization: The Above CSS3 Code is for Blue Color Button. If you want to use Gray Color Button then Paste the following code just above
]]></b:skin>
.jump-link {
display: block;
font-size: 12px;
font-weight: bold;
text-align:right;
}
.jump-link a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding: 6px 15px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#b5b5b5);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
to(#b5b5b5));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 3px solid #0088ff;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,1);
text-shadow:
0px 1px 2px rgba(000,000,000,0.5),
0px 1px 2px rgba(252,254,255,0.9);
}
Button Design
[
Do not forget to subscribe this blog & feel free to communicate in case of any problem]
Sign up here with your email
1 comments:
Write commentsAll really great and very informative.
ReplyConversionConversion EmoticonEmoticon