How To Add Stylish CSS Slider Demo and Download Button for Blogger Posts

Hello friends! Welcome to Nishan blog. So in today’s article we are going to talk about Stylish Slider Demo and Download Button for Blogger. And this Slider Demo and Download Button Blogger can add me. So we will know all these things in this article. So stay tuned in this article and know in full details.

What is stylish css and demo and Download Buttons?


Stylish CSS Slider Demo and Download Button
If you are a blogger and your blog is hosted on Blogger.com. Then this article is for you. Because in this article I have told about two buttons. Perhaps you must have seen these buttons in many other blogs as well.

As there are many downloading websites on Blogger, you get two buttons in them. First is Demo Button and second is Download Button. By the way, you get a lot of codes. With the help of which you can easily add these buttons to your Blogger post.

But the code I have given in this article is HTML and CSS Script. With the help of this, we can easily add Slider Demo and Download Button to our Blog Post. That is, whenever you move the Mouse Cursor over the button, your button will slide.

How to add CSS based Slider demo and download buttons in blogger?


So friends, now I have told you step by step below that how you can easily add Slider Demo and Download Button to your blog post? So if you want to show this button in your post, then follow the steps given below and use HTML and CSS.

Step 1: Adding Font Awesome To Blogger


So friends, now you have to open your Blogger Dashboard first. Also you have to go to Theme>Edit HTML. And </head> has to be searched. Also, paste the code given below on </head> tag and click on Save Button.

<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 ButtonsSo friends, in the second step, you have to add CSS to your blogger template for both these buttons. For this also you have to click on Theme>Edit Theme. Now you have to search ]]></b:skin> tag in your template. And the following CSS has to be saved by pasting this ]]></b:skin> tag.

/* CSS Demo & Download Buttons By (www.Techly360.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;  }

Step 3: Adding HTML portion to blogger posts
So friends, now the code I have provided below is the HTML script of your Stylish Slider Live Demo and Download Button. You can also use them easily.

<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

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

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

Conclusion

How did you like this article of How To Add Stylish CSS Slider Demo and Download Button for Blogger Posts. You must tell by commenting in the comment box below. Or if you want to give any kind of suggestion, then you can give your opinion in the comment box below. Can share with.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

close