Jul 24, 2016

Stylish Slider Demo/Download Button! Add to Blogger Posts

data:blog.title
How To Add Slider Demo & Download Buttons to Blogger Posts
In previous we have shared Custom CSS Buttons for blogger blog but now we think why we are not sharing some fancy and professional looking Demo and Download buttons for blogger. So today we are going to share Demo and Download button with all of you with sliding function.

How To Add Animated Slider Demo and Download Buttons to Blogger Posts?


As you know a blogger always want to add some cool looking widgets to their blogs and attract more visitors, which can affect to Blog Rank and also it can increasing Page Views. These buttons have awesome animation effect, You may name it mouse hover slide effect. Okay, So now before adding it on your blog see the live demo of these buttons.

Hope you like above Live Demo and Animation of these buttons when anyone mouse hover on it. Now if you want to add it on your Blog then follow below instruction carefully.

How To Add CSS Slide Animated Demo/Download Button to Blogger?

  • Go To Blogger >> Template >> Edit HTML.
  • By Pressing CTRL+F or CMD+F search for <head> code and paste below FontAwesome Stylesheet.
 <link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>
  • Now Again, By Pressing CTRL+F OR CMD+F Search for ]]></b:skin> tag and paste following code just above of this tag.
 //******************************************//
    Slider DEMO/DOWNLOAD Button Code
            By: www.mybloggerguides.com
              Don't Remove these Credits
//*****************************************//
#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.mbg-btn-slide, .mbg-btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #00CC00;
    margin: 10px;
    transition: .5s;
}

.mbg-btn-slide2 {
    border: 2px solid #FF3300;
}

.mbg-btn-slide:hover {
    background-color: #00CC00;
}

.mbg-btn-slide2:hover {
    background-color: #FF3300;
}

.mbg-btn-slide:hover span.circle, .mbg-btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #00CC00;
}

.mbg-btn-slide2:hover span.circle2 {
    color: #FF3300;
}

.mbg-btn-slide:hover span.title, .mbg-btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.mbg-btn-slide:hover span.title-hover, .mbg-btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.mbg-btn-slide span.circle, .mbg-btn-slide2 span.circle2 {
    display: block;
    background-color: #00CC00;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.mbg-btn-slide2 span.circle2 {
    background-color: #FF3300;
}

.mbg-btn-slide span.title,
  .mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title2,
  .mbg-btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #FF3300;
    transition: .5s;
}

.mbg-btn-slide2 span.title2,
  .bsd-btn-slide2 span.title-hover2 {
    color: #00CC00;
    left: 80px;
}

.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {
    color: #fff;
}

  • Now, Save the template.
  • Now, When You Post your next article and want to add these buttons to that post then Click on New Post and Click on HTML Tab.
  • Now Paste Below Code inside Post HTML Section.
      <div id="wrap">
<a href="www.mybloggerguides.com" class="mbg-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="www.mybloggerguides.com" class="mbg-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>

Required Change:

Change This Color = With Your Link.

  • That's it. You are done.
  • Now open your Blog post in which you have added these buttons and see them live on your blogger blog.

See Also Another Stylish Widget

  1.  Stylish Contact Form for Blogger! Add to Static Page.
  2. Stylish Popup Subscription Box for Blogger.
  3. WordPress Like Floating Social Sharing Counter Buttons for Blogger.

    Conclusion:

    So above guide is about How To Add Stylish Slider Demo/Download Button to The Blogger Posts? Hope by the above instruction you have easily added it on your blogger blog. If anyhow problem persist after following all above steps then drop a comment below. We will help you out of sure. Do share it.
    Thank You! Stay Blessed!

    2 comments:

    1. Awesome work brother. Most dashing buttons, I have ever found for blogger. Thanks for sharing these beautiful buttons.

      - Sumair

      ReplyDelete

    We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.