Add Beautiful Download And Demo Buttons To Blogger Blog

Are you a music blogger or template distributor using the blogspot platform as a web host, have you ever thought of making your blog beautiful and more professional without loosing your blog page load speed? This is the top solution. Introducing Beautiful Download And Demo Button for blogger blog.

Recommended: How To Design OgbongeBlog Blogger Template

The Demo and Download button are design with pure CSS which will enable you make your desired changes to it to make it fit the colour selection of your blog. I use same buttons at Obhiaba blog just that i made a little CSS styling to mine to enable it fit the green colour of my blog.

Why do I need Download And Demo Button?

Blogger is unlike WordPress that offers you everything you need handy as plugins. In blogger you have to be really techy in other get a real wonderful benefit from blogging. Here i have carefuly styled this code and i give credits to ARLINA DESIGN the actually developer of this blogger widget.

Recommended: Introducing COPMO - Responsive, SEO Ready And Ads Ready Blogger Template

Download buttons are used in directing visitors to the link of item available for downloading. Want to see a demo - Check it out.

Demo buttons are mostly used by template distributors to showcase whatever they have on sale. Want to see a demo - check it out.

How to Add FontAwesome Download And Demo Button To Blogspot.

In other to add this widget to your blog, first you must backup your blogger template. Should in case you encounter any error while adding. After backing up, follow the simple steps to add the fontawesome download and demo buttons.

Go to your blogger dashboard and locate the HTML tab beside the Customize and under the preview of your blog in the template section.

Recommended: How To Design Professional Blogger Template

Step 1.

First we will install the FontAwesome code on our template but if you have already added this code, simply skip to the next step.

Using CTRL + F search for </head>. Just before the </head> place the below code.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Step 2.

Now search using same CTRL + F for ]]></style> and paste the below code just above or before it. 

.whitebutton {

    margin: 20px auto;

    padding: 20px 0;

    width: 200px;

}

.whitebutton a {

    background: #fff;

    color: #666;

    display: block;

    font-size: 17px;

    font-weight: 700;

    font-family: 'Arial',Verdana,sans-serif;

    height: 50px;

    line-height: 50px;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

    width: 200px;

    position: relative;

    z-index: 2;

}

.whitebutton a:before {

    content: '\f019';

    font-family: FontAwesome;

    font-weight: normal;

    padding: 8px;

    margin-left: -12px;

    margin-right: 6px;

}

.whitebutton span {

    background: #444;

    color: #fff;

    display: block;

    font-size: 12px;

    font-family: 'Arial', Verdana,sans-serif;

    height: 40px;

    line-height: 40px;

    text-align: center;

    width: 200px;

    z-index: 1;

    text-transform: uppercase;

    font-weight: bold;

}

.whitebutton .up {

    background: #e25734;

    margin: -25px auto;

    opacity: 0;

    border-radius: 0 0 5px 5px;

    transform: translate(0,-50px);

    transition: 350ms;

}

.whitebutton .down {

    margin: -30px auto;

    opacity: 0;

    border-radius: 5px 5px 0 0;

    transform: translate(0,-50px);

    transition: 350ms;

}

.whitebutton .down:before {

    content:'\f14a';

    font-family: FontAwesome;

    font-weight: normal;

    margin-right: 6px;

    color: #aaa;

}

.whitebutton:hover .up {

    opacity: 1;

    transform: translate(0,0);

}

.whitebutton:hover .down {

    opacity: 1;

    transform: translate(0,-90px);

}

.whitebuttondemo {

    margin: 20px auto;

    padding: 20px 0;

    width: 200px;

}

.whitebuttondemo a {

    background: #e25734;

    color: #fff;

    display: block;

    font-size: 17px;

    font-weight: 700;

    font-family:'Arial',Verdana,sans-serif;

    height: 50px;

    line-height: 50px;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

    width: 200px;

    position: relative;

    z-index: 2;

    transition: 350ms;

}

.whitebuttondemo a:before {

    content:'\f002';

    font-family: FontAwesome;

    font-weight: normal;

    padding: 8px;

    margin-left: -12px;

    margin-right: 6px;

}

.whitebuttondemo a:hover {

    color: #fff;

}

.whitebuttondemo span {

    background: #444;

    color: #fff;

    display: block;

    font-size: 12px;

    font-family: 'Arial', Verdana,sans-serif;

    height: 40px;

    line-height: 40px;

    text-align: center;

    width: 200px;

    z-index: 1;

    text-transform: uppercase;

    font-weight: bold;

}

.whitebuttondemo .up {

    background: #444;

    margin: -25px auto;

    opacity: 0;

    border-radius: 0 0 5px 5px;

    transform: translate(0,-50px);

    transition: 350ms;

}

.whitebuttondemo:hover .up {

    opacity: 1;

    transform: translate(0,0);

}

You are nearly done. If you want exact demo and download button as shown in the picture, clink save and thats all but if you wish to edit yours, change the codes to  match your taste.

How To Add Download And Demo Buttons To Blogger Post

1. For those who like using special tags, simply go to your template editor and switch to the HTML tab and paste the follow code at the place you want to add your download or demo button

<div class="whitebuttondemo">

<a href="#" target="_blank">Demo</a><br>

<span class="up">click to view</span></div>

<br>

<div class="whitebutton">

<a href="#" target="_blank">Download</a><br>

<span class="up">click to begin</span><br>

<span class="down">1.6MB .rar</span></div>

Replace the # with your link.

2. For those who use the "Press Enter" to new lines. Just the same way the other is down, go to your post editor and switch to HTML tab and paste this.

<div class="whitebuttondemo">

<a href="#" target="_blank">Demo</a><br>

<span class="up">click to view</span></div>

<br>

<div class="whitebutton">

<a href="#" target="_blank">Download</a><br>

<span class="up">click to begin</span><br>

<span class="down">1.6MB .rar</span></div>

Don't forget to replace the # tag in the code above.

This is the end of today's blogger widget post " How to Add Beautiful Download And Demo Buttons To Blogger Blog". Sharing is caring and leave your comments bellow.