Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai cara membuat box download beserta penghitung waktu yang keren di blogger
Info: Jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Box download
Pada postingan sebelumnya juga admin telah membahas hal yang sama, yakni cara membuat tombol download beserta penghitung waktu menggunakan notifikasi popup, sobat bisa pelajari lebih lanjut disini, nah untuk kali ini juga memiliki fungsi yang sama namun memiliki tampilan dan settingan yang berbeda, silahkan di baca hingga selesai agar paham
Penghitung waktu
Menariknya box download di blogger kali ini akan menggunakan fungsi penghitung waktu lebih tepatnya penghitung waktu mundur dari batas waktu yang bisa di sesuaikan sesuka hati, nah selain itu penggunaan svg dan progres loading juga akan di fungsikan saat proses download di jalankan, dan pada kolom box download nantinya sobat bisa menampilkan berbagai deskripsi file atau informasi dari file dokument download tersebut, sangat mengesankan
Menggunakan Javascript
Penggunaan javascript atau js diutamakan dalam proses pembuatan box download beserta countdown time kali ini, kode javascript yang digunakan sangat aman dan telah di sederhanakan sehingga proses pemuatan blog tidak terganggu akibat kode javascript yang berlebihan
Contoh Tampilan
Dari pada penasaran aja, silahkan periksa bagaimana sih tampilan dari box download beserta penghitung mundur di blogger yang di buat menggunakan javascript murni, silahkan periksa sendiri menggunakan tombol yang telah admin sediakan di bawah ini
Info: Bagaimana sobat dengan contoh tampilan nya pastinya keren sekali ah
Cara pembuatan
Baiklah sobat sekarang saatnya admin akan menjabarkan mengenai cara membuat box download beserta count down timer nya, silahkan baca dan ikuti setiap arahan yang admin jelskan sebentar lagi
Kode Javascript
Langkah pertama silahkan salin dan tempelkan kode javascript di bawah ini, kemudian letakkan di atas kode </body>
<script>
/*<![CDATA[*/
var rahtxdnfirst = 'Starting download in'; /* The first text */
var rahtxdnlast = 'seconds'; /* The last text */
var rahtxwait = 'Please wait...'; /* The text on wait */
/*]]>*/</script>
<script src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/rahdn53.js'></script>Info: Kamu bisa mengubah bagian text yang akan muncul saat tombol download di klikmatau di jalankan pada kode javascript yang admin berikan di atas
Kode HTML
Kode HTML di bawah ini berfungsi untuk menampilkan box download beserta penghitung waktunya, silahkan salin kode HTML di bawah ini, kemudian gunakan saat kamu memposting artikel pada mode HTML bukan mode Compose alias mode penulisan
<div class='rahdwnW' id='download53'>
<div class='rahdwnC'>
<div class='rahdwnIn'>
<div class='rahdwnP' data-text='.png' style='background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEQFCuFpjnDju2TIRYh0ZmqWnNVrHiFysef9GD0s4JhdC3glSrUbqhLLCjKxN4DNuOlwhAMdT7g_R3zdokU7vQHBYHLWGQaA6JUp1yI3gxHdxhi-H7L6u1C3tXUW6l9iG3YJUie3Jij6Y/s0/4_20210906_020205_0003.png)'>
<svg class='rahdwnS' viewBox='0 0 34 34'>
<circle class='b' cx='17' cy='17' r='15.92' />
<circle class='c rahdwnPg' cx='17' cy='17' r='15.92' />
</svg>
</div>
<div class='rahdwnD'>
<span data-text='Name'>Icloudice.png</span>
<span data-text='Category'>Apps</span>
<span data-text='Size'>3.05MB</span>
<span data-text='Os'>Android</span>
<span data-text='Varsion'>1.53</span>
</div>
</div>
<button onclick='download("/", "35", "false", "#download53")' class='rahdwnB rahdwnH'><svg viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
<button class='rahdwnB rahdwnRt'><svg viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
</div>
<div class='rahdwnOtp'>
<div class='rahdwnOtpIn'></div>
</div>
</div>Important: Kamu bisa mengedit atau mengubah kode HTML di atas pada bagian gambar, nama file, deskripsi file dan lain sebagainya, atau pada bagian proses waktu loading link yakni onclick='download("/", "35", "false", "#download53")', oke semoga bermanfaat
Penjelasan singkat
Belum tau atau belum mengerti, eitsss.... jangan khawatir dong! jika pengen menggunakan box download tersebut tapi bingung sama penjelasan, bagini aja..! admin jelaskan secara perlahan, pada tahap pertama sisipkan terlebih dahulu kode javascriptnya di atas kode </body>, sampai disitu selesai....., selanjutnya agar bix download nya tampil silahkan gunakan kode HTML nya kemudian posting di dalam artikel anda (biasanya sih fungsi box download digunakan untuk artikel download juga, misal aplikasi mod, file ilegal dan sebagainya haha), terus pada kode HTML nya bisa kamu ubah keterangan misal, gambar file, nama file, size file, ya begitulah
Dan pada bagian download("/", "35", "false", "#download53") adalah untuk menetukan link tujuan download, waktu loading download, dan menentukan pembukaan link newtab atau tidak, belum paham lihat tabel di bawah ini
| No | Perintah | Fungsi dan kegunaan | Contohnya |
|---|---|---|---|
| 1 | / | Berfungsi untuk mengarahkan halaman web ke url download yang di tentukan | https://www.icloudice.com/download.html |
| 2 | 35 | Berfungsi untuk menetukan batas waktu jeda saat tombol download di klik | 20 |
| 3 | false | Berfungsi untuk menentukan apakah url download akan terbuka pada tab baru atau tidak | true |