Add Cool CSS Style Demo and Download Button to Your Blogger

Add Cool CSS Style Demo and Download Button to Your Blogger

Posted by Nitin Maheta

How To Add Cool CSS Style Demo And Download Button To Your Blogger / V2

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'>
.mdbutton {
   border-top: 1px solid #adadad;
   background: #4dd417;
   background: -webkit-gradient(linear, left top, left bottom, from(#133466), to(#4dd417));
   background: -moz-linear-gradient(top, #133466, #4dd417);
   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;
   }
.mdbutton:hover {
   border-top-color: #11a800;
   background: #11a800;
   color: #ffffff;
   }
.mdbutton: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="mdbutton" href="YOUR DEMO URL HERE" rel="nofollow" target="_blank">Demo</a>&nbsp;&nbsp;<a class="mdbutton" 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.

View Demo

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

If You Enjoyed This Post Please Take 5 Seconds To Share It