join grup whatsapp Join

cara membuat countdown timer download di blogger

cara membuat countdown timer download di blogger, yang bertema dwonload mungkin tombol dwonload dengan countdown timer ini cocok untuk blog kalian
cara membuat countdown timer download di blogger

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat countdown timer download di blogger.

jika saat ini kalian sedang mengelola blog yang bertema dwonload mungkin tombol dwonload dengan countdown timer ini cocok untuk blog kalian.

jadi cara kerja tombol ini, ketika user klik tombol dwonload user harus menunggu waktu yang sudah kita tentukan misalkan 10 detik baru link dwonload akan terbuka.

widget tombol dwonload ini juga bisa kalian aplikasikan dengan script memasang iklan adsanse sebelum atau sesudah elemen tertentu untuk menampilkan iklan di atas atau di bawah tombol dwonload tersebut.

disclaimer css dari widget ini saya dapatkan dari bawaan template yang saya gunakan yaitu median-ui 1.5 desginer Muhammad Maki saya di sini hanya menambahkan javascript saja untuk membuat countdown timer pada tombol dwonload tersebut.

jadi jika kalian menggunakan template yang sama dengan saya median-ui 1.5, kalian hanya perlu menggunakan html dan javascriptnya saja karena css nya sudah ada pada template kalian.

untuk demonya silakan klik tombol di bawah ini, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Cara Membuat Countdown Timer Download

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin>

.downloadInfo{max-width:500px;background-color:#fefefe; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%); border:1px solid #eceff1;border-radius:5px; padding:15px;margin-top:20px;margin-bottom:20px; display:flex;align-items:center; line-height:1.8em;font-size:14px}
.downloadInfo a, .downloadInfo .fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:50px;height:50px; padding:10px; background:#f1f1f0;border-radius:10px}
.downloadInfo a{background-color:#f09800;color:#fefefe; margin:0;padding:10px 12px;border-radius:3px; width:auto;height:auto; line-height:20px;font-size:13px}
.downloadInfo a:after{content:attr(aria-label)}
.downloadInfo .fileType:before{content:attr(data-text)}
.downloadInfo .fileName{flex-grow:1; width:calc(100% - 150px);padding:0 15px}
.downloadInfo .fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.downloadInfo .fileSize{line-height:1.4em;font-size:12px;opacity:.8}
.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>")}
.icon{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
.wcTargetLink{display:none} 
@media screen and (max-width:480px){
.downloadInfo{padding:12px}
.downloadInfo a{width:50px;height:50px;border-radius:10px}
.downloadInfo a:after{display:none}
.downloadInfo a .icon{margin:0}} 
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .downloadInfo{background-color:#252526; border:0}
.darkMode .downloadInfo .fileType{background-color:#1e1e1e)} 

dan terakhir salin javascript di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; jika sudah jangan lupa untuk klik simpan.

<script>
//<![CDATA[
// dwonload countdown timer by wendy code
var timeLeft = 10; //atur waktunya di sini
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.wcTargetLink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Harap Tunggu <span>'+timeLeft+'</span> Detik.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
//]]> 
</script>

bagian yang saya tandai anggka 10 silakan di sesuaikan, 10 artinya 10 detik link dwonlaod akan terbuka.

Penulisan Dan Cara Penggunaan

ini adalah cara penulisan untuk tombol dwonloadnya, ubah https://www.wendycode.com dengan link dwonload milik kalian, dan selebihnya silakan sesuaikan sendiri.

<div class='downloadInfo'>
<span class='fileType' data-text='zip'></span>
<div class='fileName'>
<span class='textd'>file_name.zip</span>
<span class='fileSize'>200kb</span>
</div>
<a class='fileLink' aria-label='Download'><i class='icon download'></i></a>
</div>
<div class='wcTargetLink'>https://www.wendycode.com</div>

ok jadi sekian cara membuat countdown timer download di blogger semoga bermanfaat dan terima kasih telah berkunjung.

source css:
https://median-ui.jagodesain.com

Baca juga :
Donasi untuk mendukung creator terus berkarya, mulai seribu rupiah saja

15 komentar

  1. Bikin yang pop up mas
    1. Bukannya sampean sendiri ada buat tutorialnya buat pop up dwonload gitu ? Kok masih minta saya buatkan,

      Jika memang mau buat gitu bisa di aplikasikan dengan pop up yang pernah saya bagikan beberapa waktu lalu
  2. kode js nya error gan, apa kudu di parse dulu ya
    1. Bisa di parse atau jika tidak ingin di parse bisa pakai tag script seperti ini

      <script>
      //<![CDATA[

      //]]>
      </script>
  3. Om mohon bantuannya gimana setelah countdown dia membuka Tab baru.. karena ini langsung menuju link di tab yang sama..
    1. bagian js kode seperti
      window.location.href=e

      ubah menjadi
      window.open(e, '_blank')
    2. Udah berhasil om.. Terimakasih...
      Salam dari www.filebas.com
  4. apakah bisa jika klik selanjutnya waktunya bertambah secara otomatis, misal klik pertama 10 detik terus klik ke 2 jadi 20 detik dan dalam 24 jam bakal reset lagi ke awal??
    1. tidak bisa seperti itu mas
  5. Template UI Median saya tidak memiliki kode "]]>", bagaimana melakukannya?. Sangat mengharapkan bimbingan. Terima kasih!
    1. Setiap template blogger pasti memiliki kode
      ]]></b:skin>

      Atau anda bisa meletakkannya di atas
      </style>
  6. Maaf, saya copy "]]>", ini kalimat postingan lain, kalimat di postingan ini ada spasi, saya copy tapi lupa kalimat ini salah. Sangat menyesal tentang ini!
    1. Ngomomg apa sih, bisa lebih detail lagi saya tidak mengerti
  7. Bang cara matikan masuk link automatis gimana?
    1. maksudnya gimana ya?


image quote pre code
© Wendy Code Developed by Jago Desain

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english