Number of attractive designed wordpress and blogger templates available online. Webmasters to present personal improved or share other website hosted template to enable visitors/readers to download. To download those templates author should provide necessary links in text format, instead of using text links to download template to show your professionalism and attract visitors transform text links with button mode. Here in this article we educate you about ‘How to Add Demo and Download buttons with hover effect? Mostly these type of buttons used for downloading softwares, files, and templates. Let’s begin tutorial for adding download and demo buttons to your blog.
Sign into your blogger account
Select ‘Template’ link tab and proceed
Click on ‘Edit HTML’ link tab
Search for tag
After finding tag copy below code and paste above to it
Now Save template
To add download button in post or sidebar or wherever you want to add, just copy below code and paste html code.
To add in below post Click on ‘HTML’ link tab after composing article and paste demo – download button code as below:
Sign into your blogger account
Select ‘Template’ link tab and proceed
Click on ‘Edit HTML’ link tab
Search for tag
]]></b:skin>
After finding tag copy below code and paste above to it
*/-----CSS code by blogtariff.com-----/*
.button {-moz-border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);background:url("http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #252424;border-bottom:1px solid rgba(0, 0, 0, 0.25);color:#FFFFFF !important;cursor:pointer;font-weight:bold;line-height:1;overflow:visible;font-size:17px;padding:8px 19px 9px;position:relative;text-decoration:none;text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);width:auto;}.blogtariffdemobutton {background-color:#222222;text-align:center;width:150px;}.blogtariffdemobutton:hover {background-color:#00A0EE;}.blogtariffdownloadbutton {background-color:#bcf50b;text-align:center;width:150px;}.blogtariffdownloadbutton:hover {background-color:#00AC00;}.button:hover {-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);}
*/-----CSS code by blogtariff.com-----/*
Now Save template
To add download button in post or sidebar or wherever you want to add, just copy below code and paste html code.
To add in below post Click on ‘HTML’ link tab after composing article and paste demo – download button code as below:
Demo Button
<a class="blogtariffdownloadbutton button" href="Your Link Here" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Live Demo</span></a>
Download Button
<a class="blogtariffdemobutton button" href="Your Link Here" rel="nofollow" style="float: right;" target="_blank"><span style="display: inline-block;">Download</span></a>
Code customization
- Replace ‘Your Link Here’ with your file hosted or download item link
- Replace 'left' ‘right’ with left according your choice
Post a Comment Gmail ID Facebook
Do not Try to Add Spam Comments