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.
0 Comments