How To Make Clickable Download Button Blogger (HTML CSS Only)

Looking for A way to add clickable responsive button for blogger. Many Time we have to add clickable button on blogger post to easily Unders...

Looking for A way to add clickable responsive button for blogger. Many Time we have to add clickable button on blogger post to easily Understand For users. If you have Downloading Blog , E-commerce blog or such type of blog then these Button’s Help you a lot to get more clicks and leads.

Every Blogging Platform’s has some limitations and if you are blogging on google blogger then , you will face many problems. Such As SEO, Plugins And Many Limitations.

We can’t use single or multiple link buttons for Blogger blog posts because the Blogger UI doesn’t have a button that can be used to place buttons on a post. We can Remove these restrictions by adding an HTML And CSS Code to blog that creates a business website or a button that will clickable and redirect when click. 

HTML buttons allow you to add a variety of button’s auch as download, Buy and other to your Blogger posts. 

To Add Clickable Buy , Download Or other Type of Button On Blogger Post Follow Below Given Steps:

Adding CSS Code To Blogger Theme

• Login to Blogger .
• Go To Theme Section.

  

• Click To Edit HTML.
  
• Copy The Below code and paste After <b:skin version=’1.0.0′><![CDATA[
  

.btn{list-style: none; text-align: center; padding: 0!important; font-size: 14px; display: inline-block; color: #FFF!important; margin: 0 auto!important;}
.btn ul {margin:0;padding:0}
.btn li{display: inline; margin: 5px; padding: 0; list-style: none; float: left;box-shadow: 4px 4px 15px rgba(0,0,0,0.1);}
.gplay,.download{padding:12px 15px!important;color:#fff!important;font-weight:500;font-size:14px;text-align:center;border:0;transition:all .2s ease-out;border-radius: 5px;}
.gplay {background-color:#0088cd;}
.download {background-color:#FF6D00;}
.gplay:hover {background-color:#60B8F4;color:#fff;opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;opacity:1;}
.gplay:before {content:’f04b’;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;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;font-family:fontawesome;transition:all 0.5s ease-out;}

• Then , Save The Template.
  

Adding Clickable Button To Blogger Post

• Go To any Of the your Post Or create New.
• HTML View The Post.
  
• Add the below HTML code anywhere you want to show clickable buttons.
  

<div style=”text-align: center;”>
<ul class=”btn”>
<li><a class=”gplay” href=”https://draft.blogger.com/YOUR-LINK-HERE” target=”_blank”>Google Play</a></li>
<li><a class=”download” href=”https://draft.blogger.com/YOUR-LINK-HERE” target=”_blank”>APK Download</a></li>
</ul>
</div>

• Then Update, Or Publish The post.

How To Add download button html code for blogger

Change The Anchor Text Of The Given Clickable HTML Button Code to “Download”

And Then, Follow All The Steps Then Above Mentioned.

<div style=”text-align: center;”>
<ul class=”btn”>
<li><a class=”gplay” href="https://www.bloggermedia.xyz/2023/01/clickable-button-blogger-html-css.html" target=”_blank”>Download</a></li>
<li><a class=”download” href=”https://www.bloggermedia.xyz/2023/01/clickable-button-blogger-html-css.html” target=”_blank”>Download</a></li>
</ul>
</div>

Tips:

• Don’t change the class of given HTML Code List.
• Change The URL Address you want to Addm[Lime Color Code].