Introduction
Welcome to my blog Freeplay!
Today the topic is Creating a pop up download page for blogger!
Hope this post might be useful to you and please stay tuned to our blog for further updates. Remember the end contains surprises!
Hey everyone!
Today we would find out how to create a pop up download page in blogger. This is yet simple tutorial. But before that,
You need to have all the codes of the download box with countdown timer. Fineshop Design had made a post long back about it. See it here.
If the css and js wouldn't be installed for download box, then we can't continue further but I am making sure that you watched the fineshopdesign tutorial. so there is no issue now. It is like writing ABCD first before writing a word. so let's jump straight to the tutorial.
- Use this css above
</b:skin><style> .modal__wrapper{position:fixed;left:0;top:0;background:rgba(0,0,0,.6);height:100%;width:100%;display:flex;align-items:center;justify-content:center;opacity:0;z-index:999;pointer-events:none;-webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);transition:all 0.6s ease-in-out}.modal__container{background:#fff;width:480px;max-width:90%;max-height:100%;padding:20px;overflow-y: scroll;border-radius:20px;outline:5px solid rgba(230,230,230,0.22);box-shadow:rgba(0,0,0,.1) 0 10px 50px;position:relative;transform:translateY(-100%) translateX(100%) rotateY(-40deg) rotateX(40deg);transition:all .5s cubic-bezier(0.28, 0.89, 0.32, 1.28)} .adhtml{margin:14px 0 4px;min-height:260px}.action{display:flex;align-items:center;justify-content:center} .modal__container h3{font-weight:bold;left:40px;text-transform:uppercase;text-align: center} .modal__container h3::after{display:inline-block;content:'Wait for a while until we find the link';color:var(--linkC);line-height: 1.5em;font-size:13px;font-weight:800;margin:0 5px}.modal__container button.close__close{position:absolute;right:10px;top:10px;font-size:32px;background:transparent;border:none;outline:0;cursor:pointer}.modal__container button.close__close:hover{color:#6b46c1}.modal__container .pcn{text-align:center;display:block;font-size:13px;line-height:1.5em;margin: 0;opacity:.8}.show-modal{opacity:1;pointer-events:auto}.modal__wrapper.show-modal .modal__container{transform:translateY(0) translateX(0) rotate(0deg);}.drK .modal__container{background:#252526;outline:5px solid rgba(200,200,200,0.20);box-shadow:rgba(0,0,0,.5) 0 10px 50px} .drK .modal__container h3::after{color:var(--darkT);} </style> - Use this js above
</body><script>/*<![CDATA[*/ const _0xd2beef=_0xcf7f;(function(_0x52147d,_0x2db734){const _0x2d6552=_0xcf7f,_0x39a3c0=_0x52147d();while(!![]){try{const _0x426650=-parseInt(_0x2d6552(0xa9))/0x1+-parseInt(_0x2d6552(0xa6))/0x2*(-parseInt(_0x2d6552(0xa0))/0x3)+-parseInt(_0x2d6552(0xa8))/0x4+parseInt(_0x2d6552(0xa1))/0x5*(parseInt(_0x2d6552(0xa2))/0x6)+parseInt(_0x2d6552(0xaa))/0x7+parseInt(_0x2d6552(0x9f))/0x8+-parseInt(_0x2d6552(0xab))/0x9*(-parseInt(_0x2d6552(0xa3))/0xa);if(_0x426650===_0x2db734)break;else _0x39a3c0['push'](_0x39a3c0['shift']());}catch(_0x30db07){_0x39a3c0['push'](_0x39a3c0['shift']());}}}(_0x3e62,0x5408c));const modal=document['querySelector'](_0xd2beef(0xac)),trigger2=document[_0xd2beef(0x9d)](_0xd2beef(0xa7)),closeButton=document[_0xd2beef(0x9d)](_0xd2beef(0xa4));function toggleModal(){const _0x41b81b=_0xd2beef;modal['classList'][_0x41b81b(0x9b)](_0x41b81b(0xa5));}function windowOnClick(_0x4707f8){_0x4707f8['target']===modal&&toggleModal();}function _0x3e62(){const _0x4ce83d=['665349CVccLN','315861wdvXzI','215307CyfBnw','.modal__wrapper','toggle','addEventListener','querySelector','click','4214352VBjjbU','8961wHtCSM','11525uwAZeq','480fvOdCn','160lkcJnZ','.close__close','show-modal','324hCzCez','#pop_download','2453704zYbFri'];_0x3e62=function(){return _0x4ce83d;};return _0x3e62();}function _0xcf7f(_0x237e4a,_0x16c633){const _0x3e621b=_0x3e62();return _0xcf7f=function(_0xcf7f19,_0x15af9e){_0xcf7f19=_0xcf7f19-0x9b;let _0x567726=_0x3e621b[_0xcf7f19];return _0x567726;},_0xcf7f(_0x237e4a,_0x16c633);}trigger[_0xd2beef(0x9c)]('click',toggleModal),closeButton[_0xd2beef(0x9c)](_0xd2beef(0x9e),toggleModal),window['addEventListener'](_0xd2beef(0x9e),windowOnClick); /*]]>*/ </script> - Lastly use this code in which ever post you want.
<!--[ Countdown Download Box ]--> <center><a class='button' id='trigger'><i class='icon dl'></i>Download</a></center> <div class="modal__wrapper"> <div class="modal__container"> <button class="close__close">×</button> <h3>Download Page</h3> <div class='dldCo' id='download1'> <div class='dldBx'> <div class='dldTp'> <div class='dldIm' data-text='.png' style='background-image:url(https://1.bp.blogspot.com/-oNtjj0CRV9w/YM4rKXU8CSI/AAAAAAAAAjc/vm2Uj5kiyQwgInkIYxlfH17KjoIDrqRhwCLcBGAsYHQ/s1600/clone%2Bthemefores.png)'> <svg class='dldSv' viewBox='0 0 34 34'> <circle class='b' cx='17' cy='17' r='15.92' /> <circle class='c dldPg' cx='17' cy='17' r='15.92' /> </svg> </div> <div class='dldIn'> <span data-text='Name'>Themeforest.zip</span> <span data-text='Category'>Theme</span> <span data-text='Size'>25KB</span> <span data-text='Extension'>.zip</span> </div> </div> </div> <div class='dldSl'> <div class='dldMe'></div> </div> </div><p class='pcn'>Heya on the wait list!</p> <div class="action" onclick='download("http://www.sr7themes.eu.org/#?url=mLO0bLF4Gw1lnf1yQfgiQEFyW81uG9NhPUF9F7sqcUCtTZlgnRTfn7Jgb7OxbfXw", "10", "false", "#download1")'> <a class="button">Continue</a></div></div></div>
For non obsfucated version, contact me at telegram.
Demo
Thanks for reading upto the end! Today's surprise is a free canva pro link.
Conclusion
I expressed my views on the topic 'Creating a pop up download page for blogger'. Hope you are furnished my opinion. The post mustn't be copied without prior permission by emailing or telegram.Source:
https://www.freeplayus.in/2022/07/creating-pop-up-download-page-for.html