Cara Menambahkan Tombol Timer Unduhan popup di Blogger

Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat menambahkan tombol Penghitung Waktu Mundur ke situs web Blogger . Jadi, setiap kali seseorang mengklik tombol unduh, itu akan menampilkan jendela sembulan dengan penghitung waktu mundur 20 detik dan Anda dapat menempatkan iklan AdSense di sana.

Jadi, dengan cara ini, Anda dapat mempertahankan pengunjung Anda lebih lama di posting Blog Anda dan mengurangi rasio Pentalan Anda dan meningkatkan waktu tunggu secara keseluruhan. Jadi, ini membantu meningkatkan keterlibatan di situs web dan membantu dalam SEO.

Untuk Menambahkan Tombol Timer unduhan Popup di Blogger, ikuti langkah-langkah di bawah ini.

1. Buka dasbor Blogger dan Buka posting Blog.

2. Sekarang paste kode HTML dan ganti link tombol Download , Adsense Publisher id , dan kode slot iklan di atasnya.

 <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. Kemudian copy kode CSS & Javascript dan paste di atas </tubuh> menandai.

 <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. Sekarang tombol Timer unduhan Popup Anda akan berfungsi di situs web Blogger.

Popup unduhan ini sepenuhnya responsif dan berfungsi dengan baik di semua jenis perangkat.

Di sini, perhatikan bahwa kode tombol pengatur waktu ini hanya akan dimuat di halaman Posting saja karena kami telah mengatur kondisi if saja. jika Anda ingin menggunakannya di halaman maka Anda dapat menghapusnya dari kode Anda.

Jika Anda tidak tahu bagaimana kondisi if bekerja di Blogger maka Anda dapat merujuk ke artikel ini.

Jika Anda ingin mengubah waktu penghitung waktu mundur maka Anda dapat mengubah nilai dalam kode Javascript. Temukan kode ini di JS. [ penghitung var = 20; ]

Di sini, nilai 20 mengacu pada 20 detik , Anda dapat mengubah nilainya sesuai kebutuhan Anda.

Manfaat Pengatur Waktu Unduh

Saya harap Anda telah berhasil menambahkan tombol Unduh Timer ke situs web Blogger Anda.

Catatan : Jika kode ini tidak berfungsi dengan baik pada tema Anda, maka Anda dapat menggunakan kode penghitung waktu unduhan popup alternatif yang diberikan di bawah ini.

Jika Anda menghadapi masalah selama pemasangan tombol penghitung waktu mundur, Anda dapat bertanya kepada saya di bagian komentar.

Jangan lupa untuk bergabung dengan Grup Telegram dan saluran YouTube kami.

Baca Juga : Cara Menambahkan Formulir Pendaftaran Mailchimp di Blogger