August 13, 2011

How To Add Cool CSS Style Demo and Download Button to Your Blogger

How To Add Cool CSS Style Demo and Download Button to Your Blogger



1.Login to your blogger dashboard--> Design- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag .

3.Copy below code and paste it just After ]]></b:skin> tag


<style type='text/css'>
.button {
   border-top: 1px solid #97b9de;
   background: #c417d4;
   background: -webkit-gradient(linear, left top, left bottom, from(#133466), to(#c417d4));
   background: -moz-linear-gradient(top, #133466, #c417d4);
   padding: 7px 14px;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 20px;
   font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #8d00d4;
   background: #8d00d4;
   color: #ffffff;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }
</style>

4.Click on Save Template,

5.Now click on 'Add a Gadget' on the sidebar.

6.Select 'HTML/Javascript' and add the one of code given below

<a class="button" href="YOUR DEMO URL HERE" rel="nofollow" target="_blank">Demo</a>&nbsp;&nbsp;<a class="button" href="YOUR DOWNLOAD URL HERE" rel="nofollow" target="_blank">Download</a></div>

Note: Replace YOUR DEMO URL HERE, Demo, YOUR DOWNLOAD URL HERE , Download , with your content.

7. Now Click on Save "Html Java Script" and You are done..

No comments:

Post a Comment