วิธีเพิ่มปุ่มตัวจับเวลาดาวน์โหลดป๊อปอัปใน Blogger

ในบทความนี้ ฉันจะแสดงให้คุณเห็นว่าคุณสามารถเพิ่มปุ่มตัวจับเวลาถอยหลังไปยังเว็บไซต์ Blogger ได้อย่างไร ดังนั้น เมื่อใดก็ตามที่มีคนคลิกที่ปุ่มดาวน์โหลด หน้าต่างป๊อปอัปจะแสดงหน้าต่างป๊อปอัปพร้อมตัวจับเวลานับถอยหลัง 20 วินาที และคุณสามารถวางโฆษณา AdSense ได้

ดังนั้น ด้วยวิธีนี้ คุณสามารถทำให้ผู้เยี่ยมชมของคุณอยู่ในโพสต์บล็อกของคุณได้นานขึ้น และลดอัตราตีกลับของคุณ และเพิ่มเวลาพักโดยรวม จึงช่วยเพิ่มการมีส่วนร่วมในเว็บไซต์และช่วยในการ SEO

ในการเพิ่มปุ่มตัวจับเวลาการดาวน์โหลดป๊อปอัปในบล็อกเกอร์ ให้ทำตามขั้นตอนด้านล่าง

1. ไปที่ แดชบอร์ดของ Blogger และเปิดโพสต์ในบล็อก

2. ตอนนี้ วาง โค้ด HTML และแทนที่ ลิงก์ปุ่มดาวน์โหลด , Adsense Publisher id และ โค้ดช่องโฆษณา

 <p><a class="button" href="#PopupDownload"><i class='icon download'></i>Download</a></p> <div data-ml-modal=""> <div class="Popup_container"></div> <div class="modal-dialog"> <div class="Popup_content center"> <div class="adpop-top"> <h2> Download Your file </h2> <div class="ad-pop__close"><svg viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path 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"></path></svg></div> </div> <br /> <div> <!--Change data adslot & Adclient code here--> <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <br /> <a class="button" href=" # "><i class="icon download"></i> Download File </a> </div></div></div>

3. จากนั้นคัดลอก โค้ด CSS & Javascript แล้ววางเหนือ </body> แท็ก

 <b:if cond='data:view.isPost'> <script> //<![CDATA[ var downloadButton = document.getElementById("Popup_Download_btn"); var counter = 20; var newElement = document.createElement("span"); newElement.innerHTML = "Please Wait 20 sec"; var id; downloadButton.parentNode.replaceChild(newElement, downloadButton); function startDownload() { this.style.display = 'none'; id = setInterval(function () { counter--; if (counter < 0) { newElement.parentNode.replaceChild(downloadButton, newElement); clearInterval(id); } else { newElement.innerHTML = "Please Wait" + " " + counter.toString() + " " + " sec.... "; } }, 1000); }; var clickbtn = document.getElementById("get-download"); clickbtn.onclick = startDownload; //]]> </script> </b:if> <b:if cond='data:view.isPost'> <style> #Popup_Download_btn{display:inline-flex;display:-webkit-inline-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;align-items:center;-webkit-align-items:center;margin-bottom:10px;padding:9px 20px;border-radius:10px;font-size:.8rem;line-height:1.3rem;background-color:#303e9f;color:#ffffff; font-weight: bold;} .adpop-top{height:40px;width:100%;border-bottom:1px #E5E5E5 solid} .btn-at{display:block;height:50px;color:#fff!important;font-size:18px;text-transform:uppercase;background:#f3a;text-align:center;line-height:50px;width:200px;margin:12px auto;transition:all 0.4s ease-in} [data-ml-modal]{position:fixed;top:0;bottom:0;left:0;right:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:999;width:0;height:0;opacity:0} [data-ml-modal]:target{width:auto;height:auto;opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease} [data-ml-modal]:target .Popup_container{position:fixed;top:0;bottom:0;left:0;right:0;cursor:pointer;background-color:#000;background-color:rgba(0,0,0,0.7);z-index:1} [data-ml-modal] .modal-dialog{border-radius:6px;box-shadow:0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12);position:relative;width:90%;max-width:660px;max-height:70%;margin:10% auto;overflow-x:hidden;overflow-y:auto;z-index:2} [data-ml-modal] .Popup_content{background:#fff;padding:23px 27px} @media (max-width:767px){[data-ml-modal] .modal-dialog{margin:20% auto}} .ad-pop__close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer} .icon {display: inline-block;vertical-align: middle;margin-right: 10px;width: 18px;height: 18px;background-size: cover;background-repeat: no-repeat;background-position: center center;} .button .icon.download { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>"); } </style> </b:if>

4. ตอนนี้ปุ่มตัวจับเวลาการดาวน์โหลดป๊อปอัปของคุณจะทำงานบนเว็บไซต์ Blogger

ป๊อปอัปดาวน์โหลดนี้ตอบสนองได้อย่างเต็มที่และทำงานได้ดีกับอุปกรณ์ทุกประเภท

ที่นี่ โปรดทราบว่ารหัสปุ่มตัวจับเวลานี้จะโหลดได้เฉพาะใน หน้าโพสต์ เท่านั้น เนื่องจากเราได้ตั้งค่า เงื่อนไข if เท่านั้น หากคุณต้องการใช้งานบนหน้าต่างๆ คุณสามารถลบมันออกจากโค้ดของคุณได้

หากคุณไม่ทราบ ว่าเงื่อนไข if ทำงานอย่างไรใน Blogger คุณสามารถดูบทความนี้ได้

หากคุณต้องการเปลี่ยนเวลาของตัวนับเวลาถอยหลัง คุณสามารถเปลี่ยนค่าในโค้ด Javascript ค้นหารหัสนี้ใน JS [ ตัวนับ = 20; ]

ที่นี่ 20 ค่าหมายถึง 20sec คุณสามารถเปลี่ยนค่าได้ตามความต้องการของคุณ

ประโยชน์ของตัวจับเวลาการดาวน์โหลด

ฉันหวังว่าคุณจะเพิ่มปุ่ม Download Timer ในเว็บไซต์ Blogger ของคุณสำเร็จ

หมายเหตุ : หากรหัสนี้ทำงานไม่ถูกต้องในธีมของคุณ คุณสามารถใช้รหัสตัวจับเวลาการดาวน์โหลดป๊อปอัปอื่นที่ระบุด้านล่าง

หากคุณประสบปัญหาใดๆ ระหว่างการติดตั้งปุ่มจับเวลาถอยหลัง คุณสามารถถามฉันได้ในส่วนความคิดเห็น

อย่าลืมเข้าร่วมกลุ่มโทรเลขและช่อง YouTube ของเรา

อ่านเพิ่มเติม : วิธีเพิ่มแบบฟอร์มลงทะเบียน Mailchimp ใน Blogger