cara membuat tombol download pop up berwaktu di blogger

Hai halo semua di artikel kaliini saya akan membahas cara membuat tombol download pop up berwaktu di blogger.

Sebelumnya saya sudah pernah membuat tutorial ini di artikel Cara Buat Tombol download Popup Berisi waktu (Sisipkan Iklan) namun banyak laporan dari pengunjung blog saya,katanya setelah tombol di klik tombol download menghilang dan tidak bisa di klik lagi. Dan di artikel kalini saya membagikan widget itu lagi dan kode dersebut sudah saya coba dan berfungsi 100%

Bagaimana cara kerja tombol download pop up ini?

Setelah kalian menambahkan tombol ini di postingan,atau di halaman blogger kalian dan mengklik tombol tersebut maka akan muncul pop up,dan berisi waktu yang sudah ditentukan jika waktu sudah habis maka tombol download akan muncul dan kalian sudah bisa mengkliknya.

Demo

cara membuatnya

1. Login ke dashboard blogger
2. klik Tema > Edit html
3. salin kode di bawah ini dan letakkan di atas kode ]]></b:skin> jika menggunakan median ui 1.6 letakkan di atas kode /*]]>*/</style>

:root{
  /*Ubah warna*/
  --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 sesuaikan classnya jika berbeda atau hapus bagian ini */
.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;}

4. Letakkan javascript di bawah ini dan letakkan di atas kode </body> atau kode &lt;!--</body>--&gt;&lt;/body&gt;

<script>
//<![CDATA[
//Setingan
var counter = 10; //waktu
var text_awal ='Mohon Tunggu 10 detik...'; // teks yang pertama muncul ketika tombol pop up di klik
var text1 ='Mohon Tunggu';
var text2 ='detik.... ';

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','Alfatechnesia-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>

5. Simpan Tema
6. Jika sudah silakan buat postingan atau halaman baru
7. pilih mode html kemudian salin kode dibawah ini dan letakkan di postingan atau halaman tersebut

<!-- tombol dwonload pertama -->
<label for='zi-check-dw' id="Alfatechnesia-download">
<div class='zi-btn-dw'>Dwonload</div>
</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 file anda</h2>
<div class='zi-btn-dw2'>
  
<!-- ganti tanda # menjadi link dwonload -->
<a href='#f' target='_blank' id="button-download">Dwonload Sekarang</a>
</div>
</div>
</div>

8. ganti kode yang sudah ditandai dan kFf_xflik simpan postingn atau halaman