Google translate

How To Add Demo & Download Button In Blogger

DATUK NET

Many user request us to provide button codes separately as they are using our older templates or templates from other developers which lacks this amazing feature. This buttons are very elegant and minimal looking, with clean design it will help you to publish outbound or inbound links in most stylish way. Based on simple html and css and icons are added through fontawesome, which won't affect your blog speed much, you can add this buttons anywhere you want, whether you want to add them in post, pages or sidebar or footer, it will look phenomenal.

How to add demo button:-

Access your blog Posts > click Edit on any of your posts or add a new post. then switch to HTML area of the post editor and add the below coding anywhere you want to make the table appear.
<div class="small-button"> <a class="button small demo" href="https://www.blogger.com">Demo Button</a> <a class="button medium demo" href="https://www.blogger.com">Demo Button</a> <a class="button large demo" href="https://www.blogger.com">Demo Button</a> <br> <div class="clear"> </div></div>

How to add download button:-

Access your blog Posts > click Edit on any of your posts or add a new post. then switch to HTML area of the post editor and add the below coding anywhere you want to make the table appear.
<div class="small-button"> <a class="button small download" href="https://www.blogger.com">Download Button</a> <a class="button medium download" href="https://www.blogger.com">Download Button</a> <a class="button large download" href="https://www.blogger.com">Download Button</a> <br> <div class="clear"> </div> </div>
Now let’s add the styling and important part of the widget, Search for ]]></b:skin>  and just below/after it paste the following coding
.button{ background-color:#2c3e50; float:left; padding:5px 12px; margin:5px; color:#fff; text-align:center; border:0; cursor:pointer; border-radius:3px; display:block; text-decoration:none; font-weight:400; transition:all .3s ease-out !important; -webkit-transition:all .3s ease-out !important } a.button{ color:#fff } .button:hover{ background-color:#27ae60; color:#fff } .button.small{ font-size:12px; padding:5px 12px } .button.medium{ font-size:16px; padding:6px 15px } .button.large{ font-size:18px; padding:8px 18px } .small-button{ width:100%; overflow:hidden; clear:both } .medium-button{ width:100%; overflow:hidden; clear:both } .large-button{ width:100%; overflow:hidden; clear:both } .demo:before{ content:"\f06e"; margin-right:5px; display:inline-block; font-family:FontAwesome; font-style:normal; font-weight:400; line-height:normal; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale } .download:before{ content:"\f019"; margin-right:5px; display:inline-block; font-family:FontAwesome; font-style:normal; font-weight:400; line-height:normal; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }

Adding The Fontawesome !important

Adding the fontaweomse is very important for this widget, as showing the icons are necessary for the buttons.
Go To Blogger.com >> Your Blog >> Template
Now Backup your template.
Then select Edit HTML >> Proceed
Don’t forget to Click/Tick the Expand Template Widgets box.
Search for <head> and just below it paste the following  CSS code.
 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
All Done : Now everything is completed just  Save your Template by pressing Save template button.
Note: You can change the text and buttons accordingly.

Post a Comment

0 Comments