How to Add Responsive Download Button in Blogger Post

Add Download or Other Button in Blogger : Make your Blog or Site Simple but Standard to attract readers. Today I going to Share a Tips for your Blog to take one another step of standard. Add Download or any other Button in your Blog with Simple CSS and HTML. Wordpress use can easily make Button with Wordpress MaxButton Plugin. If you are looking to Create those in your Blogger Blogspot blog, Then this tutorial is for you.

Note - Take Backup of your Current Template for Safety 


Visit DEMO Page here


Let's Do it Now with few Simple Steps :-

• Go to your Blogger Dashboard >> Template >> Edit HTML 
• Now Click anywhere in HTML & Press Ctrl + F 
• And Search for </style> - You may find lot's more but work with only last one 
• Now Paste the below code above </style> Code

/* Share Button  - Guideinstall */
.post-footer{margin-top:30px;}
.share-post, .multiauthor-box {margin-bottom:50px;}
.share-post ul {padding:0;margin:0;text-align:center;}
.share-post li{list-style:none;display:inline-block;margin-right:10px;padding:0;font-weight:700;text-transform:uppercase}
.share-post li:first-child {font-size:16px;color:#22a1c4;}
.share-post li a{display:block;text-align:center;}
.share-post span{display:none;}
.share-post li a i{display:block;color:#fff;width:40px;height:40px;line-height:40px;font-size:18px;border-radius:40px;font-weight:normal;transition:all .3s;}
.share-post{margin-bottom:30px;border-top:1px solid #eff0f0;border-bottom:1px solid #eff0f0;line-height:52px;min-height:52px;margin-left:-30px;margin-right:-30px}
.share-post li a i.fa.fa-facebook{background:#3b5998;border:1px solid transparent;}
.share-post li a i.fa.fa-twitter{background:#19bfe5;border:1px solid transparent;}
.share-post li a i.fa.fa-google-plus{background:#d64136;border:1px solid transparent;}
.share-post li a i.fa.fa-linkedin{background:#006699;border:1px solid transparent;}
.share-post li a i.fa.fa-pinterest{background:#cb2027;border:1px solid transparent;}
.share-post li a i.fa.fa-facebook:hover{background:#fff;color:#3b5998;border:1px solid #4666aa;}
.share-post li a i.fa.fa-twitter:hover{background:#fff;color:#19bfe5;border:1px solid #2acef4;}
.share-post li a i.fa.fa-google-plus:hover{background:#fff;color:#d64136;border:1px solid #e95247;}
.share-post li a i.fa.fa-linkedin:hover{background:#fff;color:#006699;border:1px solid #017ab6;}
.share-post li a i.fa.fa-pinterest:hover{background:#fff;color:#cb2027;border:1px solid #e33239;} 

Finally "Save Template" 


Now Go to "POST" >> Add New Post or Edit Post >> Enter Below HTML Code

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

If you want to Change your Button Position Then Simple Change With below Code

<div style="text-align: right;">
<div style="text-align: left;">
<div style="text-align: center;">

Note - Change Your Button Name in  Button 1    Button 2      You may Also Add More by Adding below Tag

<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">Button Add </a></li>

Replace "YOUR-LINK-HERE" with your Link


Enjoy.. 

• Tweet
• Share
• Share
• Share
• Share