How To Add Sliding Demo And Download Button In Blogger

Ariana Haziran 22, 2022

How to Embed Sliding Demo And Download Button On Blogger Template

How To Add Sliding Demo And Download Button In Blogger

Button Demo

Login to Blogger And go to Blogger Dashboard.
Now Click On ==>Template ==> Edit Html.
Now Search ==> ]]></b:skin> or </style> By Preassing Ctrl + F Keys.
Copy the Below CSS Code And Paste it Just Before The ==> ]]></b:skin> or </style> Tag.

/* Demo and Download Buttons by www.BloggersStanD.com */#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;}

Now Search For <head> By Preassing Ctrl + F Keys.
Copy the Below Code 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'/>

Whenever You Create New Post Just Click On Html Tab In Your Post Editor. And Chose Your Plase Where You want To Display Demo Download Button in Your Post. Just Copy The Below Code And Paste in Your Post.

<div id="wrap">
<a href="www.urdutaleem.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.urdutaleem.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>