Hello everyone, on this occasion I will share a coupon pop up widget similar to the Tokopedia.com site with html, css and javascript.
For those of you who want to regulate tutorials or widgets, please comment on one of my articles or forum pages and email, if it's good or interesting I will make it in the future. and you have to be patient, you can't be fast because I also have other work outside of blogging. If you want it fast, you can order template editing / redesign services.
This widget is perfect for those of you who are planning to create an online store template that has a promo feature with a coupon code to attract potential buyers.besides that this widget also has 2 different views when accessed on a wide screen such as a PC and a small screen on a mobile, I adjusted this view like the original widget up to 80%
because this is a coupon widget so it doesn't use a button to bring up the pop up, so every time a visitor visits your site for the first time, a pop up will appear after 3 seconds or you can also set how many seconds the pop up will appear.
This widget also uses sessionStorage, which means that if the pop up is closed it will not reappear even if you change pages, unless the visitor closes the browser and reopens it or opens it in a new tab, of course with this it will not be too annoying.
Steps to proceed
go to blogger > themes > edit html copy the css below and place it above the code ]]>
/* widget coupon by M Taluat */
.wc-kupon-wrap{position:fixed;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background:#cbe1eb;transition:all 0.3s ease;z-index:9999999;opacity:0;display:none}
.wc-kupon-wrap.aktif{opacity:1;display:block}
.wc-kupon-wrap .wc-kupon-pop{position:relative;top:50%;left:50%;padding:30px;display:flex;background:#fff;flex-direction:column;align-items:center;max-width:60%;width:600px;border-radius:5px;transform: translate(-50% , -50%) scale(0.97);transition:all 0.3s ease}
.wc-kupon-close{position:absolute;top:5px;right:-10px;width:50px;height:50px;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:30px}
.wc-kupon-start{position:relative;width:100%;height:auto;padding:10px}
.wc-kupon-top span{margin:20px 0;font-size:12px;color:#030303;display:block}
.wc-kupon-top:before{content:'KODE';display:flex;padding:5px;font-size:12px;width:50px;height:25px;background-color:transparent;color:#ff8f6d;justify-content:center;align-items:center;border-radius:3px;top:10px;left:20px;border:1px #ff8f6d solid}
.wc-kupon-bg{position:relative;display:block;background:#d5e7ef;width:100%;height:auto;padding:10px;border-radius:3px}
.wc-kupon-copy{display:flex;margin:12px 0;height:45px;width:100%;border-radius:4px;padding:0 5px;align-items:center}
.wc-kupon-copy input{width:100%;height:100%;border:none;outline:0;font-size:12px;font-weight:600;padding:10px;}
.wc-kupon-copy .wc-kupon-btn{width:50%;height:100%;font-size:12px;font-weight:600;padding:15px 10px;color:#fff;text-align:center;background:#fff;color:#f84d5d;border-left:2px dotted #ddd;outline:0;border-top:none;border-right:none;border-bottom:none}
.wc-kupon-go{display:flex;margin-left:30px;height:45px;width:300px;line-height:15px;border-radius:3px;font-size:10px;font-weight:600;padding:15px;align-items:center;border:none;text-align:center;background:#f84d5d;color:#fff;text-decoration:none}
.wc-kupon-text{font-size:15px;font-weight:400;color:#727c7f;margin:5px 5px 8px 5px}
.wc-kupon-accordion{position:relative;display:flex;padding:0 5px;background:transparent;top:25px;text-decoration:none;font-size:12px;font-weight:400;color:#f84d5d}
.wc-kupon-accordion:before{content:attr(aria-label);position:absolute;font-size:12px;font-weight:400;color:#030303;margin-left:120px;border-left:1px #727c7f solid;padding-left:10px}
.wc-kupon-t2{position:relative;display:none;padding:5px;margin-top:30px;font-size:12px;font-weight:400;color:#030303}
.wc-kupon-end span{position:relative;display:flex;font-size:14px;font-weight:600;margin:40px auto 40px -5px;border-top:1px #ddd solid;padding:20px 10px}
.wc-kupon-end p{position:relative;display:flex;font-size:12px;margin:-50px 5px auto;color:#727c7f}
@media screen and (max-width:900px){.wc-kupon-wrap .wc-kupon-pop{max-width:100%}}
@media screen and (max-width:450px){
.wc-kupon-wrap .wc-kupon-pop{width:100%;max-width:100%;height:100%;overflow-y:auto;overflow-x:hidden}
.wc-kupon-wrap,.wc-kupon-bg{background:#fff}
.wc-kupon-go{position:absolute;margin:20px 75px -150px;width:120px;text-align:center}
.wc-kupon-accordion,.wc-kupon-accordion:before{font-size:10px}
.wc-kupon-accordion{margin-top:25px}
.wc-kupon-copy input {border:1px #ddd solid;border-right:none;border-radius:3px}
.wc-kupon-copy .wc-kupon-btn{border:1px #ddd solid;border-left: 2px dotted #ddd;border-radius:3px}}<div class='wc-kupon-wrap'>
<div class='wc-kupon-pop'>
<div class='wc-kupon-close'>
</div>
<div class='wc-kupon-start'>
<div class='wc-kupon-top'>
<span><b>Rp 100k Cashback</b> Use this discount coupon to pay monthly bills %month% %year%</span></div>
<div class='wc-kupon-bg'>
<div class='wc-kupon-copy'>
<input id='wc-kupon-input' readonly='readonly' type='text' value='M Taluat'/>
<button class='wc-kupon-btn' onclick='wcCopyCode()'>COPY</button>
<a class='wc-kupon-go' href='https://mtaluat.blogspot.com' target='_blank'>AYO KUNJUNGI TOKO</a>
</div>
<div class='wc-kupon-text'>Use this code at checkout page</div>
</div>
<a aria-label='Expires in 4 days' class='wc-kupon-accordion' href='javascript:'>Condition & Provisio</a>
<div class='wc-kupon-t2'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</div>
<div class='wc-kupon-end'>
<span>DON'T MISS AN OPPORTUNITY TO SAVE!</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
</div>
</div>
</div><script>
//<![CDATA[
/*
* M Taluat widget Coupon
* Copyright (c) 2021 M Taluat
* Use Wisely Open source Code Don't Delete Creator Credit
* Javascript Pure
*/
var waktu = 3000; // waktu munculkan pop up 3 detik
var copybtn = document.querySelector('.wc-kupon-btn'),couponText='SALIN';function wcCopyCode(){
document.querySelector('#wc-kupon-input').select(),document.execCommand('copy'),copybtn.textContent='TERSALIN',setTimeout(function(){
copybtn.innerHTML=couponText},3500)}
var i,acc = document.getElementsByClassName('wc-kupon-accordion');for(i=0;i<acc.length;i++)acc[i].addEventListener('click',function(){
this.classList.toggle('active');var e=this.nextElementSibling;'block'===e.style.display?e.style.display='none':e.style.display='block'});
document.querySelector('.wc-kupon-close').addEventListener('click',function(){
document.querySelector('.wc-kupon-wrap').classList.remove('aktif')});
var welcomeSession=sessionStorage.getItem('welcomeSession');null===welcomeSession&&document.addEventListener('DOMContentLoaded',function(){
setTimeout(function(){
document.querySelector('.wc-kupon-wrap').classList.add('aktif'),welcomeSession=sessionStorage.setItem('welcomeSession',!0)},waktu)});
//]]>
</script>Conclusion
So today we have discussed about how to create coupon pop up widget on blogger. I hope you like this post kindly do give a comment below. If you are having problem implementing this kindly contact me. Do visit regularly for getting more updates like this.