Download Template Plus UI + mode Translate v3

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

Periksa

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

Icloudice.png Apps 3.05MB Android 1.53