HOW TO ADD DOWNLOAD AND DEMO BUTTON IN BLOGGER

 
  In this post we are going to show you how to add stylish demo and download buttons to your blog. You can use these CSS buttons instead of demo and download links.

You can find the demo HERE ..

FOLLOW THESE STEPS:

1. Go To Blogger Dashboard > Template > Edit HTML
2. Backup your template before editing.
3. Search for this, ]]></b:skin> . before it paste the following CSS Code

"   
.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:url("http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:150px;
}
.demobutton:hover {
background-color:#00A0EE;
}
.downloadbutton {
background-color:#91BD09;
text-align:center;
width:150px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}
                                          "

NOTE : When coping codes, copy without the quote and unquote ("")

4. Save your template.
Now whenever you want to add the demo or download button you only need to add the following code in the "EDIT HTML" section of your Blogger Editor

FOR DEMO BUTTON

"                                             <a class="demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Live Demo</span></a>
                                               "
FOR DOWNLOAD BUTTON
 
"                                              <a class="button downloadbutton" href="YOUR DOWNLOAD LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a>
                                              "
5.FINISH..
.
..Kindly leave your complains and comments.

Share this