how to make a Clickable blogger button

by
Share on:

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.

how to make a Clickable blogger button

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.
    how to make a Clickable blogger button

  • Click To Edit HTML.
    how to make a Clickable blogger button

  • Copy The Below code and paste After <b:skin version=’1.0.0′><![CDATA[
    how to make a Clickable blogger button

    • .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.
    how to make a Clickable blogger button

Adding Clickable Button To Blogger Post

  • Go To any Of the your Post Or create New.
  • HTML View The Post.
    how to make a Clickable blogger button

  • Add the below HTML code anywhere you want to show clickable buttons.
    how to make a Clickable blogger button

<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.
Also Read:  Wordpress VS Blogger - Why Choose Blogger For Blogging

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://draft.blogger.com‘ target=’_blank’>Download</a></li>
<li><a class=’download’ href=’https://draft.blogger.com‘ 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].

Leave a Comment