How To Add Demo And Download Button In Blogger Post

So Friends! Today In This Article We Are Going To Talk About Adding Stylish Demo And Download Slider Button In Blogger.

So We Will Know All These Things In This Article.  So Stay Here I'll Teach You With Full Details And Demo.

Step 1 : Adding HTML Code Of Demo And Download Button

So Now You Have To First Open Your Blogger Dashboard,

Then You Have To Go To Theme>Edit HTML, And Search For </head>,

Then Paste The Code Given Below Before </head> Tag And Click On Save Button.

Double Click To Copy This HTML :

<script type='text/javascript'>//<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"); //]]></script><noscript><link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/> </noscript>

Step 2 : Adding CSS Code Of Demo And Download Buttons

In The Second Step, You Have To Add CSS To Your Blogger Template For Both Buttons,

Again You Have To Click On Theme>Edit Theme And Search For ]]></b:skin>,

Then Paste The CSS Given Below Before

]]></b:skin> Tag.

Double Click To Copy This CSS :

/* CSS Demo And Download Buttons By Techno Krrish*/ .bie-slide, .bie-slide2 { position: relative; display: inline-block; height: 55px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #f84f4f; margin: 10px; transition: all 0.5s ease-in-out; } .bie-slide2 { border: 2px solid #36D7B7; } .bie-slide:hover { background-color: #f84f4f; } .bie-slide2:hover { background-color: #36D7B7; } .bie-slide:hover span.circle, .bie-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #f84f4f; } .bie-slide2:hover span.circle2 { color: #36D7B7; } .bie-slide:hover span.title, .bie-slide2:hover span.title2 { left: 40px; opacity: 0; } .bie-slide:hover span.title-hover, .bie-slide2:hover span.title-hover2 { opacity: 1; left: 40px; } .bie-slide span.circle, .bie-slide2 span.circle2 { display: block; background-color: #f84f4f; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%; } .bie-slide2 span.circle2 { background-color: #36D7B7; } .bie-slide span.title, .bie-slide span.title-hover, .bie-slide2 span.title2, .bie-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #f84f4f; transition: .5s; } .bie-slide2 span.title2, .bie-slide2 span.title-hover2 { color: #36D7B7; } .bie-slide span.title-hover, .bie-slide2 span.title-hover2 { left: 80px; opacity: 0; } .bie-slide span.title-hover, .bie-slide2 span.title-hover2 { color: #fff;

Step 3 : Adding HTML Portion To Blogger Posts

Now The Code Which I Have Provided Below Is Your Stylish Slider Live Demo And Download Button,
Add This HTML Script In Your Post Which You Can Easily Use.

Double Click To Copy This HTML :

<div id="wrap" style="text-align:center"><a class="bie-slide" href="#" rel="no-follow" target="_blank"><span class="circle"><i class="fa fa-laptop"></i></span><span class="title">Demo</span><span class="title-hover">Click here</span></a><a class="bie-slide2" href="#" rel="nofollow" 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>

For Demo Button

Double Click To Copy This HTML :

<div id="wrap" style="text-align:center"><a class="bie-slide" href="#" rel="no-follow" target="_blank"><span class="circle"><i class="fa fa-laptop"></i></span><span class="title">Demo</span><span class="title-hover">Click here</span></a> </div>

For Download Button

Double Click To Copy This HTML :

<div id="wrap" style="text-align:center"><a class="bie-slide2" href="#" rel="nofollow" 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>


If You Face Any Issues When Apply This Code Feel Free To Contact Me!
My Contact Details In The Contact Us Page.