How To Add Demo And Download Button To Blogger Posts

In This Tutorial we will be adding demo and download buttons to our blogger posts.  Below is the demo Demo Click here ...

In This Tutorial we will be adding demo and download buttons to our blogger posts. 

Below is the demo

Demo Click here Download Click here

1. Login in to blogger.com
2. Goto Theme Tab and click on edit html.
3. Than search for </b:skin> 
4. Paste the below code right above ]]></b:skin>

#wrap {
    margin: 20px auto;
    text-align: center;
}
#wrap br {
    display: none;
}
.bsd-btn-slide, .bsd-btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #00CC00;
    margin: 10px;
    transition: .5s;
}
.bsd-btn-slide2 {
    border: 2px solid #FF3300;
}
.bsd-btn-slide:hover {
    background-color: #00CC00;
}
.bsd-btn-slide2:hover {
    background-color: #FF3300;
}
.bsd-btn-slide:hover span.circle, .bsd-btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #00CC00;
}
.bsd-btn-slide2:hover span.circle2 {
    color: #FF3300;
}
.bsd-btn-slide:hover span.title, .bsd-btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}
.bsd-btn-slide:hover span.title-hover, .bsd-btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}
.bsd-btn-slide span.circle, .bsd-btn-slide2 span.circle2 {
    display: block;
    background-color: #00CC00;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}
.bsd-btn-slide2 span.circle2 {
    background-color: #FF3300;
}
.bsd-btn-slide span.title,
  .bsd-btn-slide span.title-hover, .bsd-btn-slide2 span.title2,
  .bsd-btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #FF3300;
    transition: .5s;
}
.bsd-btn-slide2 span.title2,
  .bsd-btn-slide2 span.title-hover2 {
    color: #00CC00;
    left: 80px;
}
.bsd-btn-slide span.title-hover, .bsd-btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}
.bsd-btn-slide span.title-hover, .bsd-btn-slide2 span.title-hover2 {
    color: #fff;
}

5.Save Template

6.Now goto settings and select Posts,Comments and sharing

7.Paste the below code in "Post Template" Section

<div id="wrap">
<a href="www.templatechief.blogspot.com" class="bsd-btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="www.templatechief.blogspot.com" class="bsd-btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

and save settings

Note : Replace www.templatechief.blogspot.com with your link that you want users visit after clicking on any of the button.