How To Add Downloading Timer On Blogger

 Introduction

How To Add Downloading Timer On Blogger Website देखो दोस्तों क्या आप भी अपनी वेबसाइट में Downloading टाइमर लगाना चाहते है देखो यह timer बहुत ज्यादा काम का है इसकी मददत से आप अपने traffic को जितनी देर तक अपनी वेबसाइट पर रोक के रखना चाहते हो उतनी देर तक आपका traffic आपकी वेबसाइट पर रुक जायेगा चलो में आपको बताता हु कैसे आप इसको अपनी वेबसाइट पर लगा सकते है आप इसको Wordpress या ब्लॉगर दोनों पर लगा सकते है चलो फिर स्खिते है How To Add Downloading Timer On Blogger.

How To Add Downloading Timer

सबसे पहले आपको यह script को कॉपी करना है इसको आप अपने हिसाब से एडिट भी कर सकते हो इनके आपको एक वीडियो मिलेगी उसमे मेने आपको पूरा प्रोसेस बताया हुआ है 

<div class='downloadInfo'>

<span class='fileType' data-text='File'></span>

<div class='fileName'>

<span class='textd'>File Name</span>

<span class='fileSize'>File Size</span>

</div>

<a class='fileLink' aria-label='Click Here'><i class='icon download'></i></a>

</div>

<div class='pixabin-targetlink'>DOWNLOAD LINK</div>

<script type='text/javascript'>

var timeLeft = 5;

var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.pixabin-targetlink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Please wait <pixabin-colour>'+timeLeft+'</pixabin-colour> second.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});

</script>

<style>

.downloadInfo{max-width:500px;background-color:#fefefe;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);border:1px solid #eceff1;border-radius:5px;padding:15px;margin-top:20px;margin-bottom:20px;display:flex;align-items:center;line-height:1.8em;font-size:14px}

.downloadInfo a,.downloadInfo .fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;background:#f1f1f0;border-radius:10px}

.downloadInfo a{background-color: #4800ff;color:#fefefe;margin:0;padding:10px 12px;border-radius:3px;width:auto;height:auto;line-height:20px;font-size:13px}

.downloadInfo a:after{content:attr(aria-label)}

.downloadInfo .fileType:before{content:attr(data-text)}

.downloadInfo .fileName{flex-grow:1;width:calc(100% - 150px);padding:0 15px}

.downloadInfo .fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.downloadInfo .fileSize{line-height:1.4em;font-size:12px;opacity:.8}

.icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}

.icon{flex-shrink:0;display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center}

.pixabin-targetlink{display:none}

@media screen and (max-width:480px){.downloadInfo{padding:12px}.downloadInfo a{width:50px;height:50px;border-radius:10px}.downloadInfo a:after{display:none}.downloadInfo a .icon{margin:0}}

pixabin-colour{color: #4800ff;font-size:1.5em;font-weight:bold}</style>