LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » CSS Codes / HTML-CSS-PHP-JavaScript » “Two Try Download Button” Like MediaFire Without J-Query

“Two Try Download Button” Like MediaFire Without J-Query

"Two Try Download Button" Like MediaFire Without J-Query

Hi, I am again here with a new awesome and stylish code that also did not have j-query or {script} tag as according to may law to make it quick to load and make your webpage lite. It is actually based upon my previous article about How To Change DIV Content/Data On Mouse Click?, Now after some up-gradation  The code is fully changes and become new after giving him some time.

Now proceeding to the code, when I visit the MediaFire Download page, I experienced the awesome Download Button then i try to search something like this but failed and someone say’s that…

Be-Failure Is The Step Of Be-Successor…!!!

Now i have the code that I personally coded it that is 99.99% same as the MediaFire one. It’s a Two Try Download Button. There is a button behind another button that will appear after the click on first one, When your user click on the first button as in the DEMO, the downloading will start if your first link is OK and your user will see the new button that is “Not Downloading? Try Again”. If the downloading will be start then user did not have to click again but if your first link is damage and not providing data then the user is able to click on the new button that will appear after first one and can start downloading fro other server easily without changing any page.

Recommended For You:
Simple And Pure HTML Image Slider Without CSS Or JavaScript

If you have only one server of the file /data hosting, you can still use it by adding the same link on both button because from this, many time your visitor pc did not get connected fairly from the server or the visitor download accelerator can get connected then he have the other chance too to again click on the link and get it on his downloader.

The button screen shoots are in the pic but you must have to view the DEMO that did not have any link embedded but if you have a look on the Address-bar you can easily notice the URL changing on every click. It also have many other features too and my personal opinion is that it is best for downloading providing site to make there site awesome and quick o load because it did not have and Image also.

It is also tested on IE6+ that means it is also workable on any browser because it is running well on IE6+. as i early mention that it did not have any J-Query or <script> tag because I hate these badly. Now wothout any delay, First see the live DEMO and then get the code via seeing other Features and make your sime AWESOME…

Table of Contents

Recommended For You:
Create Analog Clock Widget With HTML5 Canvas And JavaScript

Features:

1.) 99.99% Same As www.mediafire.com
2.) Cross Browser Code.
3.) 100% Works On IE6+, Chrome, Firefox, Opera, Safari Or Any Other Browser.
4.) Best For Downloading Providing Sites.
5.) No J-Query Or <script> Tag.
6.) Only HTML-CSS-DOM Effect.
7.) Quick To Load And Easy To Install.
8.) Save Your Space To Adding Two Links.
9.) Visitors Choice And Optimized.
10.) Short Side Code.
11.) Awesome And Stylish In Look.
12.) Fully Customizeable.
13.) No External Links Or Images.
14.) First Text Will Be “Download Now” And After Click It Will Become, “Not Downloading, Try Again”
15.) Can Add Two Link In One Button.
16.) Both Link Will Be Open In New Tab.
17.) You Can Add This Code Anyehere.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

Recommended For You:
Smooth Scroll To A Desired Up Or Down DIV OnClick Via Pure JavaScript

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

<style>#exestylepopupdiv1{width:250px;height:35px;position:absolute;cursor:pointer;-moz-box-shadow:inset 1px 1px 1px 1px #639822;-webkit-box-shadow:inset 1px 1px 1px 1px #639822;box-shadow:inset 1px 1px 1px 0px #639822;background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#82b741),color-stop(1,#639822) );background:-moz-linear-gradient( center top,#82b741 5%,#639822 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#82b741',endColorstr='#639822');background-color:#82b741;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #82ac4e;display:inline-block;color:#fff;font-family:arial;font-size:28px;font-weight:bold;padding:6px 24px;text-decoration:none;text-align:center;text-shadow:2px 2px 50px #44ad2f}#exestylepopupdiv1:hover{background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#639822),color-stop(1,#82b741) );background:-moz-linear-gradient( center top,#639822 5%,#82b741 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#639822',endColorstr='#82b741');background-color:#639822}#exestylepopupdiv2{display:none;width:270px;height:20px;position:absolute;cursor:pointer;background-color:#efefef;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #b2b0b0;color:#b2b0b0;font-family:arial;font-size:16px;font-weight:bold;padding:14px;text-decoration:none;text-align:center;text-shadow:2px 2px 50px #b2b0b0}#exestylepopupdiv2 a{color:#87f;font-weight:italic;text-decoration:none}</style><div style="width:250px;height:35px;position:absolute;background-color:#000;color:#fff;"><div id="exestylepopupdiv1" onclick="window.open('DOWNLOAD-LINK-1','newwin');"  onmouseup="document.getElementById('exestylepopupdiv2').style.display='block',document.getElementById('exestylepopupdiv1').style.display='none'  ">Download Now</div><div id="exestylepopupdiv2">Not Downloading? <a href="DOWNLOAD-LINK-2" target="_blank">Try Again</a></div></div>

Customization:

1.) Change DOWNLOAD-LINK-1 With Your First Server Link.
2.) Change DOWNLOAD-LINK-2 With Your Second Server Link.
3.) Save And Done.

You Like It, Please Share This Recipe With Your Friends Using...

4 Responses to ““Two Try Download Button” Like MediaFire Without J-Query”

  1. Anonymous says:

    your search box is not working

  2. Lucky Singh says:

    Is there any way to not open the link of the download button on the same page.
    For ex.: If I posted a software and added this download button with the link to the software’s uploaded URL and when someone will click on the download button he will not see the uploading site window in new tab.

    I want to say that when we click on the download button the new link should open in a new tab, not in the same tab.

Leave a Reply to EXEIdeas Cancel reply

Your email address will not be published. Required fields are marked *