https://www.howtofact.xyz/2018/08/demo-and-download-button-in-blogger.html
Adding demo and download button in blogger is very simple. Any newbie with zero coding knowledge can add these piece of codes to their blog. Since blogger doesn’t support any plugins we have to add this piece of codes manually in our blogger template by editing HTML and CSS. Don’t be scared of playing with codes in your template, you will be provided with step by step guide with detailed screenshots to add these HTML/CSS code for demo and download button in your blogger template.
STEP 1: Login to your blogger dashboard and select your blog on which you want to add demo and download button.
STEP 2: Then go to Template > Edit HTML.
[NOTE: It is highly recommended you to keep a backup of your template before changing any code]
STEP 3: Then press anywhere inside your code area and press CTRL+F a search box will pop up in the top right corner inside your code area then type ]]></b:skin> and press enter.
STEP 4: Now among the 7 styles of Demo and Download Button choose the style which you like to add in your blog and paste that code above ]]></b:skin>.
Demo and Download Button Style 1
CSS CODES FOR STYLE 1
body {
margin: 50px;
font-family: helvetica, sans-serif;
background: #e9f0f4;
}
#wrap {
margin: 20px auto;
text-align: center;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #ooo000;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}
Demo and Download Button Style 2
CSS CODES FOR STYLE 2
.post-body ul.button {
list-style: none;
text-align: center;
margin: 20px auto;
padding: 2px;
font-size: 14px;
clear: both;
z-index: 2;
}
.post-body ul {
position: relative;
display: block;
padding: 0;
margin: .5em 0 .5em 1.5em;
text-decoration: none;
}
.button {
list-style: none;
text-align: center;
width: 95%;
margin: 10px;
padding: 2px;
font-size: 14px;
clear: both;
}
Demo and Download Button Style 3
CSS CODES FOR STYLE 3
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
Demo and Download Button Style 4
CSS CODES FOR STYLE 4
/* Demo Download Button By Howtofact.xyz
—————————————————— */
.howtofact {text-align:center;color:#fff !important;list-style:none;margin:10px !important;padding:10px !important;font-size:14px;display:inline-block;text-decoration:none !important;clear:both;}
.howtofact ul {padding:0;margin:0;}
.howtofact li {list-style:none;display:inline;padding:0;margin:5px;}
.demo,.download{color:#fff !important;padding:12px 15px !important;font-size:13px;font-weight:700;font-family:oswald;text-transform:uppercase;text-align:center;border-radius:3px;border:0;letter-spacing:1px;transition: all 0.2s ease-out;text-decoration:none !important;}
.demo {background-color: #3498db;}
.download {background-color: #34d968}
.demo:hover {background-color: #2980b9;color: #fff;}
.download:hover {background-color: #2fbd5a;color: #fff;}
Demo and Download Button Style 5
CSS CODES FOR STYLE 5
/* Starting Css To DEMO &amp;amp; Download Button */
#m-wrap {
margin: 10px auto;
text-align: center;
}
#m-wrap br {
display: none;
}
.egg-btn-slide, .egg-btn-slide2, .egg-btn-slide3 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 0px;
background: #fdfdfd;
border: 2px solid #009688;
margin: 10px;
transition: .5s;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
}
.egg-btn-slide2 {
border: 2px solid #8BC34A;
}
.egg-btn-slide3 {
border: 2px solid #f73d00;
}
.egg-btn-slide:hover {
background-color: #009688;
}
.egg-btn-slide2:hover {
background-color: #8BC34A;
}
.egg-btn-slide3:hover {
background-color: #f73d00;
}
.egg-btn-slide:hover span.circle, .egg-btn-slide2:hover span.circle2, .egg-btn-slide3:hover span.circle3 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
}
.egg-btn-slide:hover span.circle{
color: #009688;
}
.egg-btn-slide2:hover span.circle2 {
color: #8BC34A;
}
.egg-btn-slide3:hover span.circle3 {
color: #f73d00;
}
.egg-btn-slide:hover span.title, .egg-btn-slide2:hover span.title2, .egg-btn-slide3:hover span.title3 {
left: 40px;
opacity: 0;
}
.egg-btn-slide:hover span.title-hover, .egg-btn-slide2:hover span.title-hover2, .egg-btn-slide3:hover span.title-hover3 {
opacity: 1;
left: 40px;
}
.egg-btn-slide span.circle, .egg-btn-slide2 span.circle2, .egg-btn-slide3 span.circle3 {
display: block;
background-color: #009688;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.egg-btn-slide2 span.circle2 {
background-color: #8BC34A;
}
.egg-btn-slide3 span.circle3 {
background-color: #f73d00;
}
.egg-btn-slide span.title,
.egg-btn-slide span.title-hover, .egg-btn-slide2 span.title2,
.egg-btn-slide2 span.title-hover2,
.egg-btn-slide3 span.title3, .egg-btn-slide3 span.title-hover3 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #009688;
transition: .5s;
}
.egg-btn-slide2 span.title2,
.egg-btn-slide2 span.title-hover2 {
color: #8BC34A;
left: 80px;
}
.egg-btn-slide3 span.title3,
.egg-btn-slide3 span.title-hover3 {
color: #f73d00;
left: 80px;
}
.egg-btn-slide span.title-hover, .egg-btn-slide2 span.title-hover2, .egg-btn-slide3 span.title-hover3 {
left: 80px;
opacity: 0;
}
.egg-btn-slide span.title-hover, .egg-btn-slide2 span.title-hover2, .egg-btn-slide3 span.title-hover3 {
color: #fff;
}
/* Ending Css To DEMO &amp;amp; Download Button */
Demo and Download Button Style 6
CSS CODES FOR STYLE 6
.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:url(“https://www.zurb.com/images/overlay-button.png”) repeat-x scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:150px;
}
.demobutton:hover {
background-color:#00A0EE;
}
.downloadbutton {
background-color:#91BD09;
text-align:center;
width:150px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}
Demo and Download Button Style 7
CSS CODES FOR STYLE 7
.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)}}
After adding your desired Demo and Download Button CSS code in your blogger template make sure you add this code after <head> unless this demo and download button will not work in your blogger blog.
<script src=”https://s.codepen.io/assets/libs/modernizr.js” type=”text/javascript”></script> <link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css” rel=”stylesheet”></link>
How to Add Demo and Download Button in Blogger Post
After successfully adding CSS code in blogger template now its time to add HTML code in blogger post editor to display stylish demo and download button.
To display Demo and Download Button In Blogger Post follow these steps:
- Login to blogger dashboard and select your blog.
- Go to All Posts > HTML.
- Paste the Code in HTML mode on blogger post where you want to display Demo and Download Button.
For Style 1
<div id=”wrap”>
<a href=”URL” class=”btn-slide”>
<span class=”circle”><i class=”fa fa-rocket”></i></span>
<span class=”title”>Demo</span>
<span class=”title-hover”>Click here</span>
</a>
</div>
<a href=”URL” class=”btn-slide2″>
<span class=”circle2″><i class=”fa fa-download”></i></span>
<span class=”title2″>Download</span>
<span class=”title-hover2″>Click here</span>
</a>
</div>
For Style 2
<div style=”text-align: center;”><ul class=”button”><li><a class=”demo” href=”URL” target=”_blank”><b>DEMO</b></a></li><li><a class=”download” href=”URL” target=”_blank”><b>DOWNLOAD</b></a></li></ul></div>
For Style 3
<div style=”text-align: center;”><ul class=”btn”><li><a class=”demo” href=”YOUR-LINK-HERE” target=”_blank”>DEMO</a></li><li><a class=”download” href=” YOUR-LINK-HERE” target=”_blank”>DOWNLOAD</a></li></ul></div>
For Style 4
<div style=”text-align: center;”>
<ul class=”howtofact”>
<li><a class=”demo” href=”URL” rel=”nofollow” target=”_blank”>DEMO</a></li>
<li><a class=”download” href=”URL” rel=”nofollow” target=”_blank”>DOWNLOAD</a></li>
</ul>
</div>
For Style 5
<div id=”m-wrap”>
<a class=”egg-btn-slide” href=”URL” target=”_blank”>
<span class=”circle”><i class=”fa fa-eye”></i></span>
<span class=”title”>Demo</span>
<span class=”title-hover”>View Now</span>
</a>
<a class=”egg-btn-slide2″ href=”URL” target=”_blank”>
<span class=”circle2″><i class=”fa fa-chevron-circle-down”></i></span>
<span class=”title2″>Download</span>
<span class=”title-hover2″>Download Now</span>
</a>
<a class=”egg-btn-slide3″ href=”URL” target=”_blank”>
<span class=”circle3″><i class=”fa fa-shopping-cart”></i></span>
<span class=”title3″>Buy Now</span>
<span class=”title-hover3″>Purchase Now</span>
</a>
</div>
</div>
For Style 6
<a class=”demobutton button” href=”URL” rel=”nofollow” style=”float: left;” target=”_blank”><span style=”display: inline-block;”>Live Demo</span></a>
<a class=”button downloadbutton” href=”URL” rel=”nofollow” style=”float: left;” target=”_blank”><span style=”display: inline-block;”>Download</span></a>
For Style 7
<div style=”text-align: center;”> <ul class=”bsdbutton1″> <li><a class=”demo” href=”URL” target=”_blank”>Demo Link</a></li> <li><a class=”download” href=”URL” target=”_blank”>Download Link</a></li> </ul></div><div class=”clear”></div>
Click “Save“ and you are done!
[Make sure to Change with your URL demo or download link.]
