Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)
  • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa

Membuat tombol download Popup beserta countdown timer

views

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(&quot;PopupDownload&quot;).style.display=&quot;none&quot;"><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

Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.