Thông báo: Chúng tôi luôn cần có thêm những thành viên sáng tạo, chuyên nghiệp và sẵn sàng cháy hết mình với công việc! Tham gia

Cách tạo tiện ích bật lên phiếu giảm giá

Cách tạo tiện ích bật lên phiếu giảm giá cho blogger
Xin chào các bạn, nhân dịp này mình sẽ chia sẻ widget coupon pop up tương tự như trang Tokopedia.com với html, css và javascript.Đối với những bạn muốn điều chỉnh hướng dẫn hoặc widget, vui lòng bình luận về một trong các bài viết hoặc trang diễn đàn của tôi và gửi email, nếu nó hay hoặc thú vị, tôi sẽ làm nó trong tương lai. và bạn phải kiên nhẫn, bạn không thể nhanh chóng vì tôi còn có công việc khác ngoài viết blog. Nếu muốn nhanh, bạn có thể đặt dịch vụ chỉnh sửa / thiết kế lại mẫu. Tiện ích này hoàn hảo cho những bạn đang có ý định tạo mẫu cửa hàng trực tuyến có tính năng khuyến mãi với mã phiếu giảm giá để thu hút người mua tiềm năng. Ngoài ra tiện ích này còn có 2 chế độ xem khác nhau khi truy cập trên màn hình rộng như PC. và màn hình nhỏ trên điện thoại di động, tôi đã điều chỉnh chế độ xem này giống với widget gốc lên đến 80% vì đây là widget phiếu giảm giá nên không sử dụng nút để hiển thị cửa sổ bật lên, vì vậy mỗi khi khách truy cập vào trang web của bạn cho lần đầu tiên, cửa sổ bật lên sẽ xuất hiện sau 3 giây hoặc bạn cũng có thể đặt số giây cửa sổ bật lên sẽ xuất hiện. Tiện ích này cũng sử dụng sessionStorage, có nghĩa là nếu cửa sổ bật lên bị đóng, nó sẽ không xuất hiện lại ngay cả khi bạn thay đổi trang, trừ khi khách truy cập đóng trình duyệt và mở lại hoặc mở nó trong một tab mới, tất nhiên với điều này thì nó sẽ không. khó chịu quá.

Các bước tiến hành

đi tới blogger> chủ đề> chỉnh sửa html, sao chép css bên dưới và đặt nó phía trên mã]]>
/* widget coupon by NewTricks */

.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}}
và đặt html này bên trên mã để làm cho nó gọn gàng hơn, thực ra nó miễn phí miễn là nó vẫn nằm trong thẻ 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> 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='NewTricks'/>

<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 &amp; 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>
và cuối cùng sao chép đoạn mã javascript bên dưới và đặt nó phía trên đoạn mã hoặc nếu bạn có, đừng quên bấm vào lưu
<script>

//<![CDATA[

/*

* NewTricks widget Coupon

* Copyright (c) 2021 NewTricks

* 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>

Lời kết

Vậy là xong rồi, nếu thấy hay hãy để lại một lời nhận xét dưới phần bình luận. Chúc các bạn thành công!

Nguồn: thetaluat.xyz

Đọc thêm :
Đánh Giá Bài Viết:
Khi tôi là chính bản thân mình, tôi hạnh phúc và có kết quả tốt !

2 nhận xét

  1. tokopedia.com ở bên indo à bác
    1. Vâng đúng rùi