20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Add CSS Demo And Download Button In Blogger

Learn trick to show display css demo buttons and download button inside the blogger template,font awesome icons implemented in the buttons to look beautiful.
How To Add Demo And Download Buttons In Blogger template with fontawesome icon and css
Hello Folks,Today in this article we are going to explain you How to Add Demo and Download Button Using CSS and Font Awesome.These Demo and Download Button will Surely increase the look of your website or blog.However might be you guys are using different type of Demo and Download Buttons by using any kind of scripts or image link for display.But these Buttons are totally different it loads very fast because we have used pure CSS3 and Font awesome icons.Now Day every blog or website have font awesome feature in their website.
If you don't have fontawesome feature don't worry,you can add them anytime.To add font awesome read here:How to Add Font awesome icons in my template.Demo and download buttons come with font awesome icons and you can change the icon also if you want.So to add Buttons in your blogger template follow the steps mentioned below.
Demo
See the Pen GoPWym by BloggersStand (@bloggersstand) on CodePen.

How to add demo and download buttons with font awesome icon 

installation steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4.Copy the any style code from below and paste it just before the ]]></b:skin> or </style> tag.
#Style 1
/* CSS Button Style by www.BloggersStanD.com */
.bsdbutton{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.bsdbutton ul{margin:0;padding:0}
.bsdbutton li{display:inline;margin:5px;padding:0;list-style:none}
.bsdbutton li a.demo,.bsdbutton li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.bsdbutton li a.download{background:#3498db}
.bsdbutton li a.demo:hover,.bsdbutton li a.download:hover{background:#666}
.bsdbutton li a.demo:active,.bsdbutton li a.download:active{cursor:pointer}
.bsdbutton li a.demo:after,.bsdbutton li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.bsdbutton li a.download:after{content:'\f019'}
#Style 2 
/* CSS Button Style by www.BloggersStand.Com */
.bsdbutton1{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.bsdbutton1 ul{margin:0;padding:0}
.bsdbutton1 li{display:inline;margin:5px;padding:0;list-style:none}
.bsdbutton1 li a.demo,.bsdbutton1 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.bsdbutton1 li a.download{background:#3498db}
.bsdbutton1 li a.demo:hover,.bsdbutton1 li a.download:hover{background:#666}
.bsdbutton1 li a.demo:active,.bsdbutton1 li a.download:active{cursor:pointer}
.bsdbutton1 li a.demo:after,.bsdbutton1 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.bsdbutton1 li:hover a.demo:after,.bsdbutton1 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Customization:


Step 5. Now Search for <head> by Pressing Ctrl+F keys.
Step 6.Copy the below Font Awesome Icons script and paste it just before the <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Step 7. Now Save your template.

How To Add Demo and Download button inside the post editor

Whenever you create a new post and you want to add these buttons just click on HTML mode tab near compose mode inside your post editor and choose your place where you want to show these button just paste the any one of style to show the buttons inside the post.
#Style 1
<div style="text-align: center;">
  <ul class="bsdbutton">
    <li><a class="demo" href="http://www.bloggersstand.com" target="_blank">Demo Link</a></li>
    <li><a class="download" href="http://bloggersstand.com" target="_blank">Download Link</a></li>
  </ul>
</div>
<div class="clear"></div>
#Style 2 
<div style="text-align: center;">
  <ul class="bsdbutton1">
    <li><a class="demo" href="http://bloggersstand.com" target="_blank">Demo Link</a></li>
    <li><a class="download" href="http://bloggersstand.com target="_blank">Download Link</a></li>
  </ul>
</div>
<div class="clear"></div>
And Publish Your Post ! 

Post a Comment