Skip to main content

How to add download and demo button in blogger

By
Hi friends in this article i'm gonna show you how to add download and demo button with hover effect to your blog.This article will be useful when we write a post on softwares or while giving away the templates for free.In this we will  use css instead of placing the demo and download links directly.so let's start doing this.
How to add download and demo button in blogger

Steps:

1.Go to Blogger>>Template>>Edit html.
2.In that search for ]]></b:skin>.

 Add Download and Demo button in blogger.

3.Before doing this backup your template.
4.Copy the below code and paste it before ]]></b:skin>.
*/-----CSS for download and demo button by worldtech360.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("#") 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;}.wt360demobutton {background-color:#222222;text-align:center;width:150px;}.wt360demobutton:hover {background-color:#00A0EE;}.wt360downloadbutton {background-color:#bcf50b;text-align:center;width:150px;}.wt360downloadbutton: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 for download and demo button by worldtech360.com-----/*
5.Once you copy the code save the template.
6.Whenever you want to add the download and demo button in the post,copy the below codes and paste them in the "HTML" of the blogger editor(i.e post body where you have two tabs one is compose and the other one is HTML.switch to HTML tab and paste the below code where ever you want.)

Download button:

<a class="wt360downloadbutton button" href="YOUR DOWNLOAD LINK HERE" rel="nofollow" style="float: right;" target="_blank"><span style="display: inline-block;">Download</span></a> 

Demo button:

<a class="wt360demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow" style="float: right;" target="_blank"><span style="display: inline-block;">Live Demo</span></a>

Note: 

Replace "YOUR DOWNLOAD LINK HERE" wiht the the link which you want to keep and you can aslo change the postion of the button to left,right by changing the style as shown above. 

7.After doing the above steps you will see the download and demo buttons with hover effect in the post as shown below.Move the cursor on it and see the hover effect.
Download Live Demo

That's it friends now place the download and demo button in your post.I hope you enjoyed the article if you have any queries feel free to ask us and happy blogging :)
Labels:

Comments

Post a Comment

Popular posts from this blog

8 Important Tips to Protect Your Magento Store from Hacking

By
Protection of eCommerce and financial websites is necessary because these websites deal with monetary transactions and stand first as a victim in the list of cyber crime. Magento is the most popular eCommerce platform which also comes under threat of hacking by accessing unauthorized logins and other attacks. Magento Platform is rich in security features but security is needed on the admin level to protect it from cyber criminals. Here are some security tips that help you to protect your Magento store and keep your site safe: 1.Admin Path Customization: It is the first step you can take to keep your Magento site safe is to customize the admin path because the normal login pages and admin pages can easily be accessed by just hit and trial methods and it is very easy to navigate to admin page by hackers if the path remains unchanged. With the use of many hacking software available online, it is easy to guess user name and password combinations and these software can guess user n...
1 comment
Read more

Top 10 Best Anime series you should watch.

By
Anime is a Japanese film which is far more advanced than the normal cartoon which we watch regularly.As the demand for Anime is increasing day by day,author are trying to create new anime series.Keeping in this mind,in this post i am gonna list out some of the best anime series and make the readers to watch top anime series. Top Anime List: 1. One Piece. 2. Naruto Shippuden. 3. Fairy Tail. 4. Bleach. 5. Dragon ball Z. 6. Dragon ball GT. 7. Hunter x Hunter(2011). 8. Ao no exorcist. 9. Death note. 10. Naruto. Top Cool Notepad tricks. That's it friends i hope you like this article and if you know other anime which are best,then just comment the name in the comment section so that we will add it to the post and have a nice day.
Post a Comment
Read more

How to Check & Stop Keyloggers in Your PC/Laptop

By
Do you use public computers, Cyber-Cafe or PC? Then you must know about keyloggers. Keylogger is a small software that can be installed or hidden in your pc without your knowledge. That record user activity (keystroke) and make a log file. It is used by hackers or in companies in surveillance employees’ systems. It can capture your email login details, every click, visited website URLs and even your confidential data like, your bank account number, passwords, credit/ debit card details etc. Keylogger transmit your information to third parties and you can be a victim of an internet scam or frauds. It would be better to understand and protected you from them. In this post I will tell you how to get rid of keyloggers in easy steps. First, we should know how keylogger can be installed in your PC. How keylogger could attack your PC: By using infected pendrives/hard drives. While Downloading torrents, cracks, keygens from internet. Installed by person who wants to track you pc. ...
Post a Comment
Read more