UrduBloggingHub | Informatvie Blog About SEO & Blogging: How To Install Slide Demo and Download Button In Blogger

On this occasion I would share the tutorial about to install sliding demo and download buttons to blogger blog! and such hack is really awesome.

This tutorial have an awesome and amazing animation effect,you may name it mouse hover slide effect,Okay lets start how you enjoy this widget in your blog.
First of all you have to put a CSS code in your blogger blog,follow the instruction below;

Instruction To Follow:

Step 1: Open your blogger dashboard select your blog.

Step 2: Select Template option and Click on Edit HTML option.

Step 3: In the template code find ]]></b:skin> or </style>oo

CSS Code:

#wrap {
    margin: 20px auto;
    text-align: center;
}
#wrap br {
    display: none;
}
.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid # 0099cc;
    margin: 10px;
    transition: .5s;
}
.btn-slide2 {
    border: 2px solid # efa666;
}
.btn-slide: hover {
    background-color: # 0099cc;
}
.btn-slide2: hover {
    background-color: # efa666;
}
.btn-slide: hover span.circle, .btn-slide2: hover {span.circle2
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: # 0099cc;
}
.btn-slide2: hover {span.circle2
    color: # efa666;
}
.btn-slide: hover span.title, .btn-slide2: hover {span.title2
    left: 40px;
    opacity: 0;
}
.btn-slide: hover span.title-hover, .btn-slide2: hover {span.title-hover2
    opacity: 1;
    left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: # 0099cc;
    color: # fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}
.btn-slide2 span.circle2 {
    background-color: # efa666;
}
.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: # 30abd5;
    transition: .5s;
}
.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: # efa666;
    left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: # fff;
}

Save the template. 

Now,follow this Step, for the calling code please apply to Post HTML tab. 

So that it looks neat when inserting HTML code into the post, you should use the  Press "Enter" for a new line  on the menu "Options" as shown below.

Now,at this you have to insert below piece of code to your new blog post but keep in mind you have to insert below code in POST HTML section.

HTML Code:

<Div id = "wrap">
<a href="#" class="btn-slide" target="_blank">
  <Span class = "circle"> <i class = "fa fa-rocket"> </ i> </ span>
  <Span class = "title"> Demo </ span>
  <Span class = "title-hover"> Click here </ span>
</a>
<a href="#" class="btn-slide2" 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>

You have successfully done.

Demo display:

See the Pen mJyEJQ by Abdullah Malik (@UrduBloggingHub) on CodePen.

Good luck and hopefully useful.

Need Help:

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)