Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat widget popup kupon di blogger dengan mudah.
Widget ini sengaja saya buat khusus buat kalian yang ingin membuat toko online di blogger, widget ini sangat praktis dan rapih. Widget ini memiliki fitur promo dengan kode kupon.
Widget ini tidak mengganggu pengunjung karena widget ini menggunakan session storage jadi ketika widget ini muncul lalu di close maka tidak akan muncul lagi, terkecuali pengunjung membuka tab baru atau langsung di close lalu di buka kembali.
Selain itu juga widget ini sangat responsif sekali karena memilki 2 tampilan yang berbeda ketika di akses dari PC dan Mobile, tampilan widget ini akan menyesuaikan dengan ukuran layar ketika di akses dari jenis perangkat apapun.
Widget ini tidak menggunakan tombol untuk memanggil atau memunculkan popupnya, jadi ketika pengunjung pertama kali mengunjungi blog kalian maka widget popup ini akan muncul setelah 3 detik atau kalian juga bisa mengatur waktu untuk memunculkan widget popup kupon ini.
Untuk demonya silahkan kalian klik tombol demo yang ada di bawah ini:
Cara Membuat Widget Popup Kupon di Blogger
- Silahkan kalian masuk ke blogger kalian lalu pilih tema dan edit HTML
- Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>
/* widget coupon by https://www.telatngoding.com */
.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:70px 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;margin-top:1px}}- Lanjut, salin kode di bawah ini dan letakan di atas kode <footer> supaya lebih rapih, kalian juga bisa menaruhnya di mana saja asalkan masih dalam tag body
<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> Pakai kupon diskon ini untuk bayar tagihan di bulanan %month% %year%</span></div>
<div class='wc-kupon-bg'>
<div class='wc-kupon-copy'>
<input id='wc-kupon-input' readonly='readonly' type='text' value='Telat Ngoding'/>
<button class='wc-kupon-btn' onclick='wcCopyCode()'>SALIN</button>
<a class='wc-kupon-go' href='https://www.telatngoding.com' target='_blank'>AYO KUNJUNGI TOKO</a>
</div>
<div class='wc-kupon-text'>Pakai kode ini di halaman checkout</div>
</div>
<a aria-label='Kedaluwarsa dalam 4 hari' class='wc-kupon-accordion' href='javascript:'>Syarat & Ketentuan</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>JANGAN LEWATKAN PELUANG BERHEMAT!</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>- Terakhir salin kode di bawah ini dan letakan di atas kode </body> atau <!--</body>--></body>
<script>
//<![CDATA[
/*
* Telat Ngoding Widget Coupon
* Copyright (c) 2022 https://www.telatngoding.com
* 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>- Simpan tema kalian dan selesai.
Sangat mudah bukan untuk membuat widget popup kupon ini, silahkan kalian edit sesuai keperluan kalian.
Jika kalian memiliki toko online dengan platform blogger rasanya rugi jika tidak memasang widget popup kupon ini, karena dengan memasang widget popup kupon ini bisa menambah rasa profesional pada produk yang kalian jual.
Baik sekian dulu tutorial singkat tentang Cara Membuat Widget Popup Kupon di Blogger jika ada pertanyaan atau ada yang belum di mengerti silahkan berkomentar di kolom komentar. Semoga bermanfaat dan terimakasih sudah berkunjung.