How to add Download And Demo button on Blogger

How to add Download And Demo button o n Blogger

Hey friends I am here again to help you. I have seen that some of you are asking for the Download and Demo Button so, Me and my friend Yashwanth made it for you.You can add link some files to your blog.No need of Uploading big files just link and add. This article will be useful when we write a post on software or while giving away the templates for free.In this we will use css instead of placing the demo and download links directly.

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. - See more at: http://www.worldtech360.com/2013/08/How-to-add-download-and-demo-button-in-blogger.html#sthash.9aXBOBWs.dpuf

Steps

1.) Go to blogger >> Templates >> Edit HTML

2.) Press Ctrl+F for find menu

3.) search for ]]><b:skin>

4.)Paste below code before ]]><b:skin>

]]>.

1.Go to Blogger>>Template>>Edit html.

2.In that search for ]]></b:skin>.

3.Before doing this backup your template.

4.Copy the below code and paste it before ]]></b:skin>.

- See more at: http://www.bloggerstricks4all.blogspot.com#sthash.9aXBOBWs.dpuf

*/-----CSS for download and demo button by bloggerstricks4all.blogspot.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;}.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 bloggersricks4all.blogspot.com-----/*

5.) After you have copied and save the above text to your blog.You are half done.
6.)Whenever you want to add Download or Demo link to any post copy the below codes and paste it to HTML editor.(i.e. when you writing any post you have two tabs 'Compose' and another is 'HTML'. click on the 'HTML' and paste the codes there)

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 Link

7.) Replace "YOUR DOWNLOAD LINK HERE" with you download link and "YOUR DEMO LINK HERE" with your Demo link. Right with Left (wherever you want the Box)

8.) After doing this you can see the Demo And download Link.

Special Thanks to :Yashwanth

Download - See more at: http://www.worldtech360.com/2013/08/How-to-add-download-and-demo-button-in-blogger.html#sthash.9aXBOBWs.dpuf