Cara Membuat Kotak Download Dengan Hitungan Mundur Template Plus UI

Tugasiswa.com - Kotak Download atau Download Box yang memiliki hitungan mundur (countdown) sangatlah menarik untuk digunakan. Namun banyak Blogger yang tidak tahu cara membuatnya. Nah, khusus kalian yang sudah membeli template Plus UI. Silakan ikuti tutorial berikut.

BAHAN 

Sebelum masuk ke tutorialnya, siapkan dulu bahan-bahan berikut ini:

1. URL gambar thumbnail
   Contoh: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpsQKCXh3JnjbZLfYuAACNAUdQug3lwBRDOQUVST4gVLTpKK_5Ih0PqTXTO_6XbeLyzDKlMi2H7fssIVDufh6xNxN90Kbi_uGGpaI5Js3cTsR97EYiBzx7RZEeIshDzx1ofKBRWm-WFlRz7p6ASHWYoMEI9hAdkG-AsXm3MlSsceKI8vE6l8VbMyD_A/s1600/Sholawat-Jibril.png
   
   
2. URL file download
   Contoh: https://github.com/saifullahtv/Saifullah/raw/master/Shalawat%20Jibril%20-%20Amalan%20Pembuka%20Rezeki%20dan%20Pengabul%20Doa%20-%20Saifullah%2Cid.m4a

TUTORIAL 

1. Buka Dashboard Blogger
2. Tekan + POSTINGAN BARU
   
   
   
   
   
3. Pilih Edit HTML
   
   
   
4. Masukkan kode berikut
   

   <div class='dldCo' id='download1'>

     <div class='dldBx'>

       <div class='dldTp'>

         <div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>

           <svg class='dldSv' viewBox='0 0 34 34'>

             <circle class='b' cx='17' cy='17' r='15.92' />

             <circle class='c dldPg' cx='17' cy='17' r='15.92' />

           </svg>

         </div>

         <div class='dldIn'>

           <span data-text='Name'>Music_Wallpaper.png</span>

           <span data-text='Category'>Music</span>

           <span data-text='Size'>3.05MB</span>

           <span data-text='Resolution'>1920×1080</span>

           <span data-text='Extension'>.png</span>

         </div>

       </div>

       <button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg class='line' 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='dldBt dldRt'><svg class='line' 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='dldSl'>

       <div class='dldMe'></div>

     </div>

   </div>
5. Ganti kode yang berwarna kuning sesuai panduan berikut:
1. image_url_here : URL Gambar Thumbnail
2. Music_Wallpaper.png : Nama File
3. Music : Kategori
4. 3.05MB : Ukuran file
5. 1920×1080 : Resolusi gambar
   
6. .png : Ekstensi file (mp3, rar, zip, exe, apk, .jpg, m4a, dll)
7. # : URL file (Drive, Github, dll)
8. 10 : Waktu hitungan mundur dalam hitunga detik
9. False : Tidak download otomatis (true/false)
6. Tekan Publikasikan
7. Selesai

VIDEO TUTORIAL

DEMO

Demikian Cara Membuat Kotak Download Dengan Hitungan Mundur Template Plus UI, jika bermanfaat berikan bintang 5 pada kotak Donasi di bawah. Semoga bermanfaat.