Header Ads

  • Breaking News

    How to Add Demo and Download button in Blogger



    Add Demo and Download button in Blogger - in this post i will share a tutorial how add cute and responsive Demo and Download button for blogger. This tutorial may help they blogging about blogger template and wordpress theme.

    Demo and Download buttons are created with CSS with mouse hover effect. Two icon are taken from fontawesome. So before staring this tutorial you have must add fontawesome in your blog.



    First go to Blogger Dashboard > Template > Edit HTML and put the below code before </style> tag.

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


    No comments

    Post Top Ad

    Post Bottom Ad