Hello sobat icloudZer kali ini admin bakalan memberikan informasi megenai bagaimana caranya membuat tombol download popup beserta countdown timer di blogger
Info: Oke sobat icloudZer jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Tombol download
Seperti nya admin terlalu sering membahas mengenai bagaimana cara nya membuat tombol download di blogger tetapi kali ini tombol download tersebut sangat berbeda, karena apabila di klik akan tampil dalam mode Popup alias melayang dan samgat responsive pada semua tampilan blog
Countdown Timer
Selain tombol download tersebut miliki tampilan popup, tombol download nya juga di lengkapi fitur penghitung waktu mundur atau yang biasa di sebut dengan countdown timer, membuat tombol downloads yang satu ini sangat keren
Javascript dan CSS
Untuk membuat tampilan tombol download beserta countdown timer nya kita memerlukan kode CSS dan juga kode javascript sebagi element penting dalam pembuatan nya, mengapa ya karena untuk menampilkan fitur penghitung mundur alias countdown timer nya nemerlukan kode javascript untuk menjalankan fungsi nya
Contoh Tampilan
Jika kamu penasaran bagaimana contoh tampilan dari tombol download beserta countdown di blogger kamu bisa mencoba untuk mengklik tombol di bawah ini
Info: Bagaimana sobat keren sekali yak contoh tampilan dari tombol download dan juga countdown timer nya, wow 👏 (script nya sangat berfungsi jika langsung di terapkan di dalam template)
Cara Pembuatan
Baiklah sekarang saatnya admin bakalan memberikan penjabaran nya mengenai bagaimana caranya membuat tombol download popuo beserta countdown timer si blogger, baca terus dan terus artikel kita kali ini untuk benar benar memahami nya ok, yess santai
Kode CSS
Langkah pertama seperti biasa nya kamu bisa menyalin kode CSS di bawah ini kemudian kamu bisa meletakkan nya di atas kode ]]></b:skin>
/* Tombol Popup by Icloudice */
.rahbut-pop{display:inline-flex;align-items:center; margin:12px 6px 12px 6px;padding:10px 15px;outline:0;border:0; border-radius:2px;line-height:20px; color:#fefefe; background-color:#005af0; font-size:13px;white-space:nowrap;overflow:hidden;max-width:100%}
#rahbut-lod{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:2px;font-size:.8rem;line-height:1.3rem;background-color:#005af0;color:#fefefe}
.rahbut-ads{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}
[rah-data-modal-pop]{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}
[rah-data-modal-pop]:target{width:auto;height:auto;opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease}
[rah-data-modal-pop]:target .modal-overlay{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}
[rah-data-modal-pop] .rahbut-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}
[rah-data-modal-pop] .modal-content{background:#fff;padding:23px 27px}
@media (max-width:767px){[rah-data-modal-pop] .rahbut-dialog{margin:30% auto}}
.ad-pop__close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer}Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
Kode Javascript
Langkah selanjutnya kamu bisa menyalin lagi kode HTML di bawah ini kemudian kamu bisa meletakkan kode javascript tersebut di atas atau sebelum kode </body>
<script>/*<![CDATA[*/
// tombol download popup by icloudice
var downloadButton = document.getElementById("rahbut-lod"); var waktu = 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 () { waktu--; if (waktu < 0) { newElement.parentNode.replaceChild(downloadButton, newElement); clearInterval(id); } else { newElement.innerHTML = "Please Wait" + " " + waktu.toString() + " " + " sec.... "; } }, 1000); }; var clickbtn = document.getElementById("get-download"); clickbtn.onclick = startDownload;
/*]]>*/ </script>Info: Fungsi dari kode javascript di atas adalah untuk menjalankan fungsi dari tombol download tersebut secara sempurna
Cara Penggunaan
Sampai pada tahap sekarang kita sudah berhasil membuat tombol download mode popup, namun masih belum muncul sebab kita sendiri lah yang harus memunculkan tombol tersebut dengan menggunakan kode HTML, kamu bisa langsung menyalin kode HTML di bawah ini kemudian kamu bisa gunakan di dalam setiap artikel yang kamu inginkan
<!-- Tombol download -->
<p style="text-align: center;"><a class="rahbut-pop" href="#PopupDownload" id="get-download">Download</a></p>
<!-- Tombol download end -->
<!-- Popup tombol -->
<div rah-data-modal-pop="" id="PopupDownload">
<div class="modal-overlay"></div>
<div class="rahbut-dialog">
<div class="modal-content center">
<div class="rahbut-ads"><font color='#222' style='font-size:17px;font-weight: bold'>
Download Your file</font>
<div class="ad-pop__close" onclick="document.getElementById("PopupDownload").style.display="none""><svg style="height: 25px; width: 25px;" 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>
<!-- Kode iklan anda -->
</div>
<br />
<a class="button" href="url_here" id="rahbut-lod">Download File</a>
</div>
</div>
</div>
<!-- Tombol download popup end -->Info: Atau kamu bisa menggunakan popop modenya saja tanpa menggunakan tombol download default, salin aja kode href="#PopupDownload" id="get-download" kemudian gunakan di tombol class custom kamu
