Written explanation
1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)
1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)
]]></b:skin>
3) Now Paste the Code Shown Below just Before it.
a.button-facebook,a.button-googleplus,a.button-linkedin,a.button-pinterest,a.button-rss,a.button-twitter { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; box-shadow: 0 1px 1px #999; color: #fff; display: inline-block; font-size: 16px; margin: 0 20px 20px 0; padding: 10px 15px; text-align: center; width: 130px; text-decoration:none;}a.button-facebook { background-color: #2b4170; /* fallback color */ background: -moz-linear-gradient(top, #3b5998, #2b4170); background: -ms-linear-gradient(top, #3b5998, #2b4170); background: -webkit-linear-gradient(top, #3b5998, #2b4170); border: 1px solid #2b4170; text-shadow: 0 -1px -1px #1f2f52;}a.button-facebook:hover { background: -moz-linear-gradient(top, #2b4170, #3b5998); background: -ms-linear-gradient(top, #2b4170, #3b5998); background: -webkit-linear-gradient(top, #2b4170, #3b5998);}a.button-googleplus { background-color: #c33219; /* fallback color */ background: -moz-linear-gradient(top, #e64522, #c33219); background: -ms-linear-gradient(top, #e64522, #c33219); background: -webkit-linear-gradient(top, #e64522, #c33219); border: 1px solid #c33219; text-shadow: 0 -1px -1px #972412;}a.button-googleplus:hover { background: -moz-linear-gradient(top, #c33219, #e64522); background: -webkit-linear-gradient(top, #c33219, #e64522);}a.button-linkedin { background-color: #0073b2; /* fallback color */ background: -moz-linear-gradient(top, #009cda, #0073b2); background: -webkit-linear-gradient(top, #009cda, #0073b2); border: 1px solid #0073b2; text-shadow: 0 -1px -1px #005486;}a.button-linkedin:hover { background: -moz-linear-gradient(top, #0073b2, #009cda); background: -ms-linear-gradient(top, #0073b2, #009cda); background: -webkit-linear-gradient(top, #0073b2, #009cda);}a.button-pinterest { background-color: #a0171c; /* fallback color */ background: -moz-linear-gradient(top, #cb2027, #a0171c); background: -ms-linear-gradient(top, #cb2027, #a0171c); background: -webkit-linear-gradient(top, #cb2027, #a0171c); border: 1px solid #a0171c; text-shadow: 0 -1px -1px #761114;}a.button-pinterest:hover { background: -moz-linear-gradient(top, #a0171c, #cb2027); background: -ms-linear-gradient(top, #a0171c, #cb2027); background: -webkit-linear-gradient(top, #a0171c, #cb2027);}a.button-rss { background-color: #e2733d; /* fallback color */ background: -moz-linear-gradient(top, #e88845, #e2733d); background: -ms-linear-gradient(top, #e88845, #e2733d); background: -webkit-linear-gradient(top, #e88845, #e2733d); border: 1px solid #e2733d; text-shadow: 0 -1px -1px #9a4824;}a.button-rss:hover { background: -moz-linear-gradient(top, #e2733d, #e88845); background: -ms-linear-gradient(top, #e2733d, #e88845); background: -webkit-linear-gradient(top, #e2733d, #e88845);}a.button-twitter { background-color: #0081ce; /* fallback color */ background: -moz-linear-gradient(top, #00aced, #0081ce); background: -ms-linear-gradient(top, #00aced, #0081ce); background: -webkit-linear-gradient(top, #00aced, #0081ce); border: 1px solid #0081ce; text-shadow: 0 -1px -1px #005ea3;}a.button-twitter:hover { background: -moz-linear-gradient(top, #0081ce, #00aced); background: -ms-linear-gradient(top, #0081ce, #00aced); background: -webkit-linear-gradient(top, #0081ce, #00aced);}
Using It in Your Posts
Use any 1 of the codes
Quote:
<a class="button-facebook" href="#">Cool World</a></div>
Quote:
<a class="button-googleplus" href="#">Cool World</a></div>
Quote:
<a class="button-twitter" href="#">Cool World</a></div>
Quote:
<a class="button-linkedin" href="#">Cool World</a></div>
Quote:
<a class="button-rss" href="#">Cool World</a></div>
Quote:
<a class="button-pinterest" href="#">Cool World</a></div>
Customize
Replace Cool World with your own text.
Change # to the desired link.
