Last Updated on

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.
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.
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.

Table of Contents

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.
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=’//’ 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;