Blog Tricks

Stylish CSS Slider Demo and Download Button for Blogger 2020

Demo and Download Button for Blogger 2020

Stylish CSS Slider Demo and Download Button for Blogger Posts 2020.

Hello friends! How is everyone? Hope everybody is doing well, welcome back to your own blog SDewery Official Blog.
So today in this article we are going to talk about stylish slider demo and download button for blog and how to add Stylish CSS Slider Demo and Download Button.
And how to add this slider demo and download button on blogger website. So we need to know all about this very well in this article.
Because these types of buttons make the CSS of blogger sites more beautiful to download.
Which is why when the buttons are clicked, it looks very stylish.
Let’s take a look at how today’s detailed article works…..

What is Stylish CSS Slider Demo and Download Button?

If you are a blogger and your weblog is hosted on Blogger.com.
So this article is for you.
Because I’ve defined about two extraordinary buttons in this article. Because you’ve got likely viewed these buttons on many different blogs as well.
As many down load web sites as there are on Blogger, you will locate two buttons on them.
The first is the demo button and the 2nd is the download button.
However, you get a lot of code. You can without difficulty add these buttons to your Blogger posts.
But the code I gave in this article is HTML and CSS script.
This permits us to effortlessly add a can to your post Stylish CSS Slider Demo and Download Button Add. This ability that on every occasion you pass the mouse cursor over the button, your button will slide.

Stylish slider features CSS demo and download buttons

  • Authentic CSS
  • Light weight.
  • Font font icons are used.
  • A simple combo of HTML and CSS.
  • Cool hover effect.
  • The text also changes to hover.
  • Easy to customize.

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

So guys, now I have informed you step with the aid of step right here how you can effortlessly add slider demo and down load button to your weblog post?
If you choose to show this button in your post, follow the steps given under and use HTML and CSS.
Hopefully in a very excellent way you can make these two buttons seen to your audience. And they can without problems download demos and files of any of your uploaded files by clicking.

Step 1: Adding Font Awesome To Blogger.

So friends, now you have to open your Blogger Dashboard first.
And then also you have to go to your Theme section > Edit HTML.
Click (CTRL+F) after you got a find option..
And </head> to search.
Also, paste the below given code above this </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 Buttons.

So guys, in the second step you have to add CSS for both these buttons to your blogger template. 
For this also you have to click on Theme> Edit Theme. 
 
And First Click (CTRL+F) And You will got a search option. now below the code copy and find.
 
Now you ]]> </ B: Skin> Tag is Search in your Template | And the below given CSS has to be saved by pasting this ]]> </ b: skin> tag.
 

 

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

 

So friends, Here is almost done. 
 
Now you can easily add your any downloading content or demo files section easily by code, when you publish your blogs post.
 

Step 3: Code to add HTML parts to Blogger posts.

So here is all the code, I have provided below your stylish slider live demo and html script of download button
 
Now you can also use them easily.
 

For Download and 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>
<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>

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

2.For Download Button.

<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 about this post..

Finally, I have tried to share with you how to use Stylish CSS Slider Demo and Download Button.
So friends, share with us how you like today’s registration and you can share with friends.
This will allow you and your friends to add a nice Stylish CSS Slider Demo and Download Button on their Blogger site.
So you must comment below to let us know how you like today’s post or you can comment if there is any problem. I will try to solve your problem.

 

Visit my Bangla Blog: Tips2Hub

Sabyasachi Dewery

Author | Blogger | Digital Marketing Influencer | Tech Researcher At www.sdewery.me

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button