Add Demo And Download Button To Blogger Post - Hi guys!!! Ambo Nai, In the article that you are reading this time with the title Add Demo And Download Button To Blogger Post, we have prepared this article well for you to read and take the information in it. hopefully the content of the post Article Widget, what we write you can understand. all right, have a nice reading.

Title : Add Demo And Download Button To Blogger Post
link : Add Demo And Download Button To Blogger Post

Add Demo And Download Button To Blogger Post

Features of slider demo and download buttons :

• Pure Css
• Light Weight
• Font Awesome Icon Used
• A Simple Combo Of HTML and CSS
• Cool Hover Effect
• The Text Also Changes On Hover
• Easy To Customiz

• Step 1 :

Adding Font Awesome To Blogger

So friends now you first have to open your Blogger Dashboard. Also you have to go to Theme>Edit HTML. And </head>search. Also, click save button by pasting the code below on top of this </head>tag.

<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 friends in the second step you need to add CSS to your blogger template for both of these buttons. You also have to click on Theme>Edit Theme. Now you have to search the ]]></b:skin> tag in your Template. And paste the below CSS on top of this ]]></b:skin> tag and save it.

/* CSS Demo & Download Buttons*/ .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 That Button in HTML portion to blogger posts. So friends now I have provided the code below that you have the HTML Script of Stylish Slider Live Demo and Download Button. You can also use them easily.

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

 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>

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>

NOTE:- Change # with your link.

Such is the article Add Demo And Download Button To Blogger Post

That's all the articles Add Demo And Download Button To Blogger Post this time, hopefully it can be of benefit to all of you. well, see you in another article post.

You are now reading the article Add Demo And Download Button To Blogger Post with the link address https://ambo-nai.blogspot.com/2021/02/add-demo-and-download-button-to-blogger.html