How to Add a new Slide effect Demo and Download button on blog post

3 minute read

Hi buddies, Are you looking for to glance your website attractive? Everybody can let out "Yes". I realize the cause, Everyone is struggling harshly to create a website professionally attractively. Cause if you have anything cool glance on your blog, then visitors comes to be excited. That's why I generated buttons using HTML and CSS for your website. The buttons come up with slide effects with icons.

Let's see how to add this tool to your blog website...

"How to Add a new Slide effect Demo and Download button on blog posts," I assure you, will enlarge the graceful and beautiful look of the website.

Features of Demo and Download Buttons

Light Weight
Cool Awesome Font icons
Slide Effect with Hover
Easy to Customize
Cool Buttons
A simple Combo of HTML and CSS

Demo Buttons

Steps to Add Slide Effect Demo and Download Button

It's very simple to create button in blogger, just follow the instructions given below to add it in blog post. Here are the installation process of buttons..!

Log in to your Blogger account and if you are operating many blog websites then choose the applicable Blog to add button.

Enter into the Blogger Dashboard. Select the "Theme" Tab and then click on the "Edit HTML" button.

Step #1 Adding Jquery Script or Awesome Font In Blogger Theme

To add jQuery, copy the below jQuery file or Awesome font and paste it between <head> and </head> element.

<head>
<!------
-----
--------
------>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
</head>

Note : This is an optional method, don't need to subtract in your blog if Awesome Font is already enlisted on your blog.

Step #2 Adding CSS Code in Blog Theme

Now, search for the ]]></b:skin> by pressing Ctrl+F and put the following CSS code above it.

/* CSS for Demo and Download Button */
#wrap { 
   margin:20px auto; 
   text-align:center;
  }
#wrap br { 
   display:none;
  }
.bie-slide,.bie-slide2 { 
   position:relative; 
   display:inline-block; 
   height:50px; 
   width:200px; 
   line-height:50px; 
   padding:0; 
   border-radius:10px; 
   background:#fdfdfd;
   border:2px solid #4cacaf;
   margin:10px;
   transition:.5s;
  }
.bie-slide2 { 
   border:2px solid #dd5e97;
  }
.bie-slide:hover { 
   background-color:#4cacaf;
  }
.bie-slide2:hover { 
   background-color:#dd5e97;
  }
.bie-slide:hover span.circle,.bie-slide2:hover span.circle2 { 
   left:100%; 
   margin-left:-45px; 
   background-color:#fdfdfd;
   color:#4cacaf;
  }
.bie-slide2:hover span.circle2 {
  color:#dd5e97; 
  }
.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:#4cacaf;
  color:#fff; 
  position:absolute; 
  float:left; 
  margin:5px;
  line-height:42px; 
  height:40px; 
  width:40px;
  top:0; 
  left:0; 
  transition:.5s;
  border-radius:10%; 
 }
.bie-slide2 span.circle2 {
  background-color:#dd5e97;
 }
.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:#4cacaf; 
  transition:.5s;
 }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 {
  color:#dd5e97; 
  left:80px;
 }
.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; 
 }

Now click on Save Theme. Now successfully added CSS and jQuery in blogger theme. Go ahead with the next steps.

Step #3 : Adding HTML Code in Blog Post

Now, if you want to add Demo and Download button in your blog post, just follow next further instructions. Go to Create a new post and easily switch Compose mode to HTML mode.

Now Copy one of them whatever you can expect to use yourself.

For Demo Button

<div id="wrap">
<a class="bie-slide" href="#" 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

<div id="wrap">
<a class="bie-slide2" href="#" 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 both Demo and Download

<div id="wrap">
<a class="bie-slide" href="#" 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="#" 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 Buttons

You can change your Link/URL with href attribute's '#'
You can also easily use it to remake the icons of changing 'fa fa-download' and 'fa fa-laptop'.
Also, you can rewrite the Names of Demo/Download

I hope you like these buttons..! If you have any questions or trouble while adding to your blogger site. Let's feel free to contact or comments below.

Join us for tips and tricks of Bloggers and many more...!

PAIRGet