Add Demo and Download button in Blogger

Demo and download button are used for many purposes in our blogs. When we provide any downloadable sources to our readers we use download button. We usually use demo button to demonstrate something from any external source. I have designed some demo and download button for blogger. In this article, I will show you how to add this button to your blogger blog.

This demo and download button are created by using only HTML and CSS. This simple and lightweight button design will work with any custom blogger template. So don’t worry about the competitiveness of this button. Adding this demo and download button in your blogger blog is very easy. I will show everything with the screenshot so don’t worry.

Before starting this tutorial please take a backup of you template for safety.

We know that blogger needs more customization than other CMS. As blogger doesn’t support any plugin so we will have to add this demo and download button in our blogger blog by editing our current blogger template.

This is not so complicated. You just have to add a piece of CSS code into your blogger template. After that, you have to use a small piece of HTML code to show your demo and download button.

Now Let's Start The Tutorial

1. Login to your blogger account and go to “Template” section. Now you will see “Edit HTML” button. Click on it to open blogger’s template editor. Note: Keep a backup of your blogger template before editing.

CSS

.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

Save the Template.

Now use the below HTML Code in every post in html tab where you want share Demo and Download button.

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

Share: