Hi, hello everyone, in this article, TrickPk will discuss how to create a timed pop up download button on Blogger.
I have previously made this tutorial in the article How to Create a Popup Download Button Contains time (Insert Ads) but there are many reports from visitors to my blog, he said after the button was clicked the download button disappeared and could not be clicked again. And in this article I share the widget again and I have tried the code and it works 100%
How does this pop up download button work?
After you add this button in your post, or on your blogger page and click on the button, a pop up will appear, and it will contain the specified time. If the time is up, the download button will appear and you can click it.
How to Make a Popup Download Button with Timer
First of all Login to blogger dashboard
click Theme>Edit html
Next, copy the code below and place it above the code ]]></b:skin> or </style> if using median ui 1.6 or any version place it above the code /*]]>*/</style>
Put the javascript below and place it above the code </body> or code <!--</body>--></body>
Save your Theme
<style> :root{ /*Change color*/ --warna1:#9b0f8f; } .zi-pop-content{position:absolute;top:50%;left: 50%;transform: translate(-50% , -50%)} .zi-pop-wrap{position:fixed;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);opacity:0;pointer-events:none;transition:all 0.3s ease;z-index:9999999} .zi-pop-wrap .zi-pop-content{padding:30px;display:flex;background:#fff;flex-direction:column;align-items:center;text-align:center;max-width:400px;width:100%;border-radius:5px;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(0.97);transition:all 0.3s ease} #zi-check-dw:checked ~ .zi-pop-wrap .zi-pop-content{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}#zi-check-dw:checked ~ .zi-pop-wrap{opacity:1;pointer-events:auto}#zi-check-dw{display:none} .zi-pop-content p{font-size: 14px} .zi-btn-dw2 a{display:block;height:45px;padding:0 30px;font-size:14px;font-weight:400;cursor:pointer;line-height:45px;outline:none;margin:20px auto;border:none;color:#fff;border-radius:5px;transition:all 0.3s ease;background:var(--warna1);text-decoration:none} .zi-btn-dw2 a:hover,.zi-btn-dw:hover{opacity:.8} .zi-pop-close{position:absolute;top:15px;right:15px;width:40px;height:40px;background:#f3f3f3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%23878787'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:25px;background-position:center;cursor:pointer;border-radius:50%;z-index:10} .zi-btn-dw{display:inline-flex;align-items:center;margin:15px 15px;padding:8px 20px;outline:0;border:0;border-radius:5px;color:#fefefe;background-color:var(--warna1);font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;line-height:2em}.bt-success:hover{color:var(--warna1);background-color:transparent;border:1px solid var(--warna1)} @media screen and (max-width:480px){.zi-pop-wrap .zi-pop-content{width:300px}} /* CSS darkmode adjust the class if different or delete this section by TrickPk */ .darkMode .zi-pop-content,.darkMode .zi-pop-close{background-color:#1e1e1e;color:#fefefe} .adpop-top{height:40px;width:100%;border-bottom:2px #E5E5E5 solid;margin:auto;font-size:17px;} </style>
<script> //<![CDATA[ //Setting var counter = 15; //time var text_awal ='Please Wait 15 seconds...'; // the first text that appears when the pop up button is clicked var text1 ='Please wait'; var text2 ='second.... '; function _0x2442(_0x21b659,_0xf171a4){var _0x4e07ac=_0x4e07();return _0x2442=function(_0x244258,_0x16662b){_0x244258=_0x244258-0x7a;var _0x74b77c=_0x4e07ac[_0x244258];return _0x74b77c;},_0x2442(_0x21b659,_0xf171a4);}var _0x5ba4a5=_0x2442;(function(_0x478ecc,_0x640868){var _0xed421a=_0x2442,_0x450309=_0x478ecc();while(!![]){try{var _0x2a8ad8=parseInt(_0xed421a(0xa0))/0x1*(parseInt(_0xed421a(0x92))/0x2)+parseInt(_0xed421a(0x93))/0x3+parseInt(_0xed421a(0x87))/0x4*(parseInt(_0xed421a(0x86))/0x5)+-parseInt(_0xed421a(0x8e))/0x6*(parseInt(_0xed421a(0x7c))/0x7)+parseInt(_0xed421a(0x99))/0x8*(-parseInt(_0xed421a(0x9b))/0x9)+-parseInt(_0xed421a(0x9f))/0xa+parseInt(_0xed421a(0x82))/0xb*(parseInt(_0xed421a(0x7f))/0xc);if(_0x2a8ad8===_0x640868)break;else _0x450309['push'](_0x450309['shift']());}catch(_0x115911){_0x450309['push'](_0x450309['shift']());}}}(_0x4e07,0xa4a15));var _0x3a3b41=_0x40a2;(function(_0x57b482,_0x490ce4){var _0x61773d=_0x2442,_0x3f08ce=_0x40a2,_0x496f29=_0x57b482();while(!![]){try{var _0x279571=-parseInt(_0x3f08ce(0x66))/0x1*(parseInt(_0x3f08ce(0x6c))/0x2)+-parseInt(_0x3f08ce(0x75))/0x3*(parseInt(_0x3f08ce(0x7b))/0x4)+-parseInt(_0x3f08ce(0x73))/0x5*(-parseInt(_0x3f08ce(0x78))/0x6)+parseInt(_0x3f08ce(0x80))/0x7+parseInt(_0x3f08ce(0x77))/0x8*(-parseInt(_0x3f08ce(0x6e))/0x9)+parseInt(_0x3f08ce(0x6a))/0xa*(-parseInt(_0x3f08ce(0x69))/0xb)+parseInt(_0x3f08ce(0x65))/0xc;if(_0x279571===_0x490ce4)break;else _0x496f29[_0x61773d(0x8a)](_0x496f29[_0x61773d(0x7e)]());}catch(_0x10d7f1){_0x496f29[_0x61773d(0x8a)](_0x496f29['shift']());}}}(_0x3540,0x3e5b4));var _0x49d620=_0x4bc1;function _0x4e07(){var _0x33b46b=['3vlIntX','181530bXlvsi','2894574TodhrQ','toString','TrickPk-download','4301QzOrmI','2vhewXm','2948130jmMwIm','innerHTML','5cnksSe','366Ylshfk','7960260oCsojQ','1776573aUGWEk','8039336fIBuVq','853982dmHhth','9kCKHYZ','275iRtGKg','40rHaRUj','7516938higYcU','5097170BFIcwf','1046588OvLAYv','2408nTrATN','19572NfiThG','14ecFQkU','670885PvPBcm','shift','2903388fvOPal','button-download','replaceChild','11qmhtug','6CMySiy','10hjqSXr','12hqsfZI','3650RHCsNe','4836SrxzPP','onclick','createElement','push','20471715Oxeztb'];_0x4e07=function(){return _0x33b46b;};return _0x4e07();}(function(_0x56b990,_0x47a454){var _0x2356b9=_0x2442,_0x316685=_0x40a2,_0x38fc22=_0x4bc1,_0x46228b=_0x56b990();while(!![]){try{var _0x5e7909=parseInt(_0x38fc22(0x11c))/0x1+-parseInt(_0x38fc22(0x121))/0x2+parseInt(_0x38fc22(0x120))/0x3*(-parseInt(_0x38fc22(0x123))/0x4)+parseInt(_0x38fc22(0x125))/0x5*(parseInt(_0x38fc22(0x11e))/0x6)+-parseInt(_0x38fc22(0x11b))/0x7*(parseInt(_0x38fc22(0x114))/0x8)+-parseInt(_0x38fc22(0x115))/0x9+parseInt(_0x38fc22(0x119))/0xa*(parseInt(_0x38fc22(0x118))/0xb);if(_0x5e7909===_0x47a454)break;else _0x46228b[_0x2356b9(0x8a)](_0x46228b[_0x316685(0x68)]());}catch(_0x4e0bf9){_0x46228b[_0x316685(0x74)](_0x46228b[_0x2356b9(0x7e)]());}}}(_0x35d3,0xe2925));var downloadButton=document[_0x49d620(0x124)](_0x3a3b41(0x6f)),newElement=document[_0x49d620(0x122)]('a');newElement[_0x49d620(0x117)]=text_awal;function _0x40a2(_0x2c94a1,_0xdef192){var _0x3faadd=_0x3540();return _0x40a2=function(_0x130b73,_0x4b1b20){_0x130b73=_0x130b73-0x65;var _0x19446b=_0x3faadd[_0x130b73];return _0x19446b;},_0x40a2(_0x2c94a1,_0xdef192);}var id;function _0x35d3(){var _0x4b840b=_0x2442,_0xbf3559=_0x3a3b41,_0x111e3f=[_0xbf3559(0x67),_0xbf3559(0x7a),_0xbf3559(0x70),_0xbf3559(0x7e),_0xbf3559(0x79),_0x4b840b(0x98),_0xbf3559(0x76),_0xbf3559(0x71),_0xbf3559(0x72),_0xbf3559(0x7f),_0x4b840b(0x9a),_0x4b840b(0x89),_0xbf3559(0x7c),_0xbf3559(0x6b),_0xbf3559(0x6d),_0xbf3559(0x7d),_0xbf3559(0x81),_0x4b840b(0x8f)];return _0x35d3=function(){return _0x111e3f;},_0x35d3();}downloadButton[_0x49d620(0x11a)][_0x49d620(0x11f)](newElement,downloadButton);function _0x3540(){var _0x341b41=_0x2442,_0x57a20f=[_0x341b41(0x95),_0x341b41(0x8d),_0x341b41(0x80),_0x341b41(0x84),_0x341b41(0x9e),_0x341b41(0x81),_0x341b41(0x7d),_0x341b41(0x8a),_0x341b41(0x83),_0x341b41(0x88),_0x341b41(0x9d),_0x341b41(0x85),_0x341b41(0x7b),_0x341b41(0x8b),'808544bSgmdZ','3575364mXPPpR',_0x341b41(0x7a),'parentNode',_0x341b41(0x8c),'1319017uVpeKg','16199964qcrXlV',_0x341b41(0x97),_0x341b41(0x9c),_0x341b41(0x94),_0x341b41(0x7e),_0x341b41(0x91),'7910BjHQvV','getElementById',_0x341b41(0x96)];return _0x3540=function(){return _0x57a20f;},_0x3540();}function startDownload(){id=setInterval(function(){var _0x5aedd9=_0x40a2,_0x3d917f=_0x4bc1;counter--,counter<0x0?(newElement[_0x3d917f(0x11a)][_0x3d917f(0x11f)](downloadButton,newElement),clearInterval(id)):newElement[_0x5aedd9(0x67)]=text1+'\x20'+counter[_0x3d917f(0x116)]()+'\x20'+text2;},0x3e8);}function _0x4bc1(_0x24c67d,_0x585f46){var _0x2a1ab2=_0x35d3();return _0x4bc1=function(_0x35dd42,_0xe610ac){_0x35dd42=_0x35dd42-0x114;var _0x5a1f92=_0x2a1ab2[_0x35dd42];return _0x5a1f92;},_0x4bc1(_0x24c67d,_0x585f46);};var clickbtn=document[_0x49d620(0x124)](_0x5ba4a5(0x90));clickbtn[_0x49d620(0x11d)]=startDownload; //]]> </script>
If you have, please create a new post or page
select html mode then copy the code below and place it in the post or page
<!-- first download button --> <label for='zi-check-dw' id="TrickPk-download"> <center><div class='zi-btn-dw'>Download</div></center> </label> <!-- bagian pop up --> <input id='zi-check-dw' type='checkbox'/> <div class='zi-pop-wrap'> <div class='zi-pop-content'> <label class='zi-pop-close' for='zi-check-dw'> </label> <h2 class='adpop-top'>Download your file</h2> <div class='zi-btn-dw2'> <!-- replace the https://www.trickpk.com sign into a download link --> <a href='https://www.trickpk.com' target='_blank' id="button-download">Dwonload Now</a> </div> </div> </div>
Outcomes:
Finally replace the marked code in above code as https://www.trickpk.com and save the post or page