Countdown timer button HTML | Boost Your Earning

Sapna IT Gyan Kendra
Nov 12, 2022
1

Download Timer Script for Blogger  with Safe Link

इस बटन से आप आर्टिकल व पेज दोनों पर timer चला पाओगे साथ ही इसमे आपको बार बार पेज बनाने की जरूरत भी नहीं है आप विडियो में डेमो जरूर देखे मे दावा करता हूँ इसके बाद आपको यह बटन 100% पसंद आएगा। आप अपनी वैबसाइट पर advance professional Download Timer button double timer with safe link लगाना चाहते हो तो आप नीचे दिये गए कोड का उपयोग करके बहुत ही अच्छा टाइम download button लगा सकते हो जिसमे आपकी वैबसाइट का download URL लिंक भी safe रहेगा। 

Page Code

सबसे पहले आपको अपनी वैबसाइट के लिए एक पेज create करना है और नीचे दिये गए CSS और JavaScript code को paste कर देना है और पेज को publish कर देना है।

Style CSS

इस कोड़े को आपको head section के अंदर paste करना है।
<style>
.svgdiv {
    transform: rotate(-90deg);
}button.generateBtn, button.getlinkbtn {
    border: none;
    color: white;
    padding: 10px;
    border-radius: 7px;
    font-size: 15px;
    font-weight: bold;
}
button.generateBtn:hover, button.getlinkbtn:hover {
    background: lightseagreen;
    font-size: 16px;
    padding: 11px;
    transition: .5s;
}
button.getlinkbtn {
    background: green;
}
button.generateBtn{
    background: blue;
}
text {
    /* fill: #fafafa; */
    font-family: Roboto;
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
    text-shadow: 0 0 5px #0000007a;
}
.download-icon, .getlinkbtn {
    display:none ;
}
.timerbtn{
    margin: auto;
    text-align: center;
}
.download-icon svg{
    margin: auto; 
    background: none; 
    display: block; 
    shape-rendering: auto; 
    animation-play-state: running; 
    animation-delay: 0s;
    width:150px;
    height:150px;
}
.download-icon svg g{
    animation-play-state: running;
    animation-delay: 0s;
}
.download-icon svg g rect{
    animation-play-state: running;
    animation-delay: 0s;
  width:4px;
  height:11px; 
  fill:#0a0a0a;
    x:48;
  y:24.5;
  rx:1.87;
  ry:1.87;
}
.download-icon svg g rect animate{
    animation-play-state: running;
    animation-delay: 0s;
}
/*   button */
.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}
.jt-bg-primary {
    background-color: var(--jt-primary);
}
.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #0d6efd;
    transition: width .6s ease;
  width:0%;
}
</style>

HTML Code

इसके बाद आपको नीचे दिये गए script को अपनी ब्लॉगर वैबसाइट के </body> टैग के तुरंत ऊपर paste कर देना है।
<script>
  var postTime = 1;
  var safepageurl = "https://techrakesh2501.blogspot.com/p/safe.html" ; //page safe page link
  var postTitle = document.querySelector(".post-title");
</script>
<script src='https://sapnaitgk.github.io/Blogger/moreadvance.js'></script>

Article Code

  • अब आपको जब भी किसी आर्टिक्ल में time download button लगाना हो तो a टैग में class="safe" डालकर आप टाइम download button create कर सकते हो।
  • अगर template के अनुसार अगर आपने a tag का पहले से ही class दिया हुआ है तो आपको multiple class भी दे सकते है जैसे class="button btn download safe" इस प्रकार से ।
  • for exmple <a href="https://www.sapnaitgk.com" class="safe">SapnaITGK</a>
Next Post Previous Post
1 Comments
  • Anonymous
    Anonymous March 3, 2023 at 8:40 AM

    Sir responsive popup ki coding bataye

    Reply
Add Comment
comment url