How to add Slider Button in Blogger and Make Blogger Professional

 How to add Slider Button in Blogger and Make Blogger Professional

Step 1

 Adding Font to Blogger

Goto blogger dashboard and click on the theme Button.

 And click on edit HTML > then search in code </head> and Paste this code

Then copy this code and paste it above of </head>

 <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

Now click save and again search (]]></b:skin>) in blogger code and paste this code above ” ]]></b:skin>”

 /* CSS Demo & Download Buttons By (zsarwar.blogspot.com) */  
 .bie-slide,  
  .bie-slide2 {  
  position: relative;  
  display: inline-block;  
  height: 40px;  
  width: 170px;  
  line-height: 40px;  
  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: 28px;  
  }  
  .bie-slide span.circle,  
  .bie-slide2 span.circle2 {  
  display: block;  
  background-color: #f84f4f;  
  color: #fff;  
  position: absolute;  
  float: left;  
  margin: 5px;  
  line-height: 30px;  
  height: 30px;  
  width: 30px;  
  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: 65px;  
  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;  
  }  

For Post HTML both buttons

 <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>  

Demo button Code

 <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>  

Download Button Code

 <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>  

Now Download From Here

Download Click here