Advance Time Download Button | How do I make a download button a link? | download button in html

Sapna IT Gyan Kendra 0
Advance Time Download Button | How do I make a download button a link? | download button in html

अगर आप फुल्ली ऑटोमैटिक Download बटन बनाना चाहते हो व भी timer के साथ तो हम आपकी सहायता कर सकते है। क्योकि आपको इस प्रकार का article वैबसाइट पर कहीं भी नहीं मिलेगा जिसमे आपको ऑटो download button व भी टाइम के साथ मिल जाये ना ही आपको इस प्रकार की यूट्यूब पर विडियो मिलने वाली है हमारे अलावा

Download code click here

Get Code
विडियो को देखे

Step 1. सबसे पहले आपको एक नया पेज बनाना है।

  • उस पेज मे आपको इस दिये गए कोड़ को पेस्ट कर देना है 
  • इसमे आप Download बटन के साथ ads  उपर और नीचे <!--ads code paste here--> के दोनों स्थान पर लगा सकते हो।
        <style>
        #download:hover {
            background: #3f51b5;
            opacity: 1
        }

        #download {
            background-color: #3f51b5;
            background-image: linear-gradient(to right, #3f51b5, #03a9f4);
            color: white;
            padding: 10px;
            font-size: 15px;
            font-weight: bold;
            border: none;
            border-radius: 3px;
            opacity: 0.9;
            transition: 0.3s;
        }

        #app {
            margin: auto;
            text-align: center;
        }

        .base-timer {
            position: relative;
            width: 150px;
            height: 150px;
            margin: auto;
        }

        .base-timer__svg {
            transform: scaleX(-1);
        }

        .base-timer__circle {
            fill: none;
            stroke: none;
        }

        .base-timer__path-elapsed {
            stroke-width: 7px;
            stroke: grey;
        }

        .base-timer__path-remaining {
            stroke-width: 7px;
            stroke-linecap: round;
            transform: rotate(90deg);
            transform-origin: center;
            transition: 1s linear all;
            fill-rule: nonzero;
            stroke: currentColor;
        }

        .base-timer__path-remaining.green {
            color: rgb(65, 184, 131);
        }

        .base-timer__path-remaining.orange {
            color: orange;
        }

        .base-timer__path-remaining.red {
            color: red;
        }

        .base-timer__label {
            position: absolute;
            width: 150px;
            height: 150px;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }
    </style>
    <h1 class="entry-title">Download Page</h1>
    <div id="app"></div>
    <script id="rendered-js">
        // Credit: Mateusz Rybczonec

        const FULL_DASH_ARRAY = 283;
        const WARNING_THRESHOLD = 10;
        const ALERT_THRESHOLD = 5;

        const COLOR_CODES = {
            info: {
                color: "green"
            },

            warning: {
                color: "orange",
                threshold: WARNING_THRESHOLD
            },

            alert: {
                color: "red",
                threshold: ALERT_THRESHOLD
            }
        };



        const TIME_LIMIT = 20;
        let timePassed = 0;
        let timeLeft = TIME_LIMIT;
        let timerInterval = null;
        let remainingPathColor = COLOR_CODES.info.color;

        document.getElementById("app").innerHTML = `
<div class="base-timer">
<svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g class="base-timer__circle">
    <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
    <path
      id="base-timer-path-remaining"
      stroke-dasharray="283"
      class="base-timer__path-remaining ${remainingPathColor}"
      d="
        M 50, 50
        m -45, 0
        a 45,45 0 1,0 90,0
        a 45,45 0 1,0 -90,0
      "
    ></path>
  </g>
</svg>
<span id="base-timer-label" class="base-timer__label">${formatTime(
            timeLeft)
            }</span>
</div>
`;

        startTimer();

        function onTimesUp() {
            clearInterval(timerInterval);
        }

        function startTimer() {
            timerInterval = setInterval(() => {
                timePassed = timePassed += 1;
                timeLeft = TIME_LIMIT - timePassed;
                document.getElementById("base-timer-label").innerHTML = formatTime(
                    timeLeft);

                setCircleDasharray();
                setRemainingPathColor(timeLeft);

                if (timeLeft === 0) {
                    onTimesUp();
                    document.querySelector(".base-timer").style.display="none";
                    document.getElementById("app").innerHTML = `<button id="download" onclick="down()">Ready to Download</button>`;
                }
            }, 1000);
        }

        function formatTime(time) {
            const minutes = Math.floor(time / 60);
            let seconds = time % 60;

            if (seconds < 10) {
                seconds = `0${seconds}`;
            }
            return `${seconds}`;
            // return `${minutes}:${seconds}`;
        }

        function setRemainingPathColor(timeLeft) {
            const { alert, warning, info } = COLOR_CODES;
            if (timeLeft <= alert.threshold) {
                document.
                    getElementById("base-timer-path-remaining").
                    classList.remove(warning.color);
                document.
                    getElementById("base-timer-path-remaining").
                    classList.add(alert.color);
            } else if (timeLeft <= warning.threshold) {
                document.
                    getElementById("base-timer-path-remaining").
                    classList.remove(info.color);
                document.
                    getElementById("base-timer-path-remaining").
                    classList.add(warning.color);
            }
        }

        function calculateTimeFraction() {
            const rawTimeFraction = timeLeft / TIME_LIMIT;
            return rawTimeFraction - 1 / TIME_LIMIT * (1 - rawTimeFraction);
        }

        function setCircleDasharray() {
            const circleDasharray = `${(
                calculateTimeFraction() * FULL_DASH_ARRAY).
                toFixed(0)} 283`;
            document.
                getElementById("base-timer-path-remaining").
                setAttribute("stroke-dasharray", circleDasharray);
        }
document.querySelector(".entry-title").innerHTML = localStorage.getItem("Post Name");
function down(){
        var url = localStorage.getItem("Download Link")
        window.open(url)
};
    </script>

Step 2. नीचे दिये गए CSS कोड को आपको अपनी वैबसाइट के html section के head tag के नीचे पेस्ट कर देना है।

<style>
      a.download {
              background-color: #3f51b5;
              background-image: linear-gradient(to right,#3f51b5,#03a9f4);
              color: white !important;
              padding: 10px;
              font-size: 15px;
              font-weight: bold;
              border: none;
              border-radius: 3px;
              opacity: 0.9;
              transition: 0.3s;
      }
      a.download:hover {
              background: #3f51b5;
              opacity: 1;
              text-decoration: none !important;
}
    </style>

Step 3. नीचे दिये गए Java Script कोड को आपको अपनी वैबसाइट के html section के सबसे लास्ट में जहां body एंड होता है उस tag के ऊपर इस कोड पेस्ट कर देना है।

यह .entry-title कोड जो निचे दिया गया है  यह अलग अलग टेम्पलेट में अलग हो सकता है इसके लिए आप वीडियो देखे क्योकि ये आपको चेंज करना पड़ सकता है 
<script>
        var posttitle = document.querySelector(".entry-title");
        var dlink= document.querySelector(".download");
        localStorage.setItem("Download Link", dlink.ping)
       localStorage.setItem("Post Name", posttitle .innerHTML)
</script>

Step 4. अब आपको अपनी वैबसाइट को खोलना है और किसी पोस्ट को खोल लेना है उसके बाद  इस्पेक्ट करना है।

  • इसके लिए ऊपर दिए गए वीडियो को देखना होगा। 

Step 4. इसके बाद जब भी आप एक पोस्ट बनाते हो जिसमे आपको Download बटन देना होता है 

  • उस पोस्ट मे इसे कोड़ को जरूर डाले तथा अगर आप इसके उपर नीचे ads कॉड भी लगा सकते हो
  • ping="#"  में # की जगह आपको जिसको download  करवाना है उसका लिंक डाल देना है। 
  • href="#" में # के स्थान पर आपको उस पेज का लिंक डालना है जो आपने बनाया है।
<center>
    <a class="download"  href="#" ping="#">Download Now</a> 
</center>

Download Source code click here

Download Now

Password - पासवर्ड के लिए ऊपर दी गयी वीडियो को देखे 

Tags

Post a Comment

एक टिप्पणी भेजें

और नया पुराने