Hallo guys, kali ini admin Mrchllaja akan membagikan artikel yaitu Widget Download Box untuk kalian.
Sebelumnya saya sudah membagikan artikel Widget Countdown Download Box dengan menggunakan timer.
Untuk demo kalian bisa klik tombol dibawah ini.
Cara Memasang Widget Download Box
Ikuti langkah - langkah yang ada dibawah ini agar widget berjalan dengan benar.
Penting!
Sebelum memulai, disarankan untuk mencadangkan template blogger kalian. Jika terjadi kesalahan kalian bisa memulihkan template kalian.
Langkah 1: pergi ke Dashboard Blogger
Langkah 2: klik Tema
Langkah 3: pilih Edit HTML
Memasang Kode CSS
Langkah 4: salin kode dibawah ini, lalu paste diatas kode </style> atau ]]></b:skin>
/*
- Widget Download Box by mrchllaja.blogspot.com
- Website : https://mrchllaja.blogspot.com
*/
.mrchllBox {
--buttonR: 50px; /* Border Radius */
--linkB: #2a7ce8; /* Warna Button */
--darkBa: #2d2d30; /* Warna Saat Dark Mode */
}
.button{display:inline-flex;align-items:center; margin:10px 0;padding:12px 15px;outline:0;border:0; border-radius:var(--buttonR);line-height:20px; color:#fffdfc; background:var(--linkB); white-space:nowrap;overflow:hidden;max-width:320px}
.icon{flex-shrink:0;display:inline-flex}
.icon::before{content:'';width:18px;height:18px;background-size:18px;background-repeat:no-repeat;background-position:center}
.icon::after{content:'';padding:0 6px}
.icon.dl::before, .drK .button.ln .icon.dl::before{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'><polyline points='8 17 12 21 16 17'/><line x1='12' y1='12' x2='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.ln .icon.dl::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308102b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><polyline points='8 17 12 21 16 17'/><line x1='12' y1='12' x2='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>")}
.mrchllBoxDL{max-width:500px;background:#f1f1f0;border-radius:10px;padding:12px;margin:1.7em 0; display:flex;align-items:center; font-size:14px}
.mrchllBoxDL .fT{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:45px;height:45px; padding:10px; background:rgba(0,0,0,.1);border-radius:var(--buttonR)}
.mrchllBoxDL .fT::before{content:attr(data-text);opacity:.7}
.mrchllBoxDL .fT.lazy{background-size:cover;background-position:center;background-repeat:no-repeat}
.mrchllBoxDL .fT.lazy::before{display:none}
.mrchllBox a{flex-shrink:0;margin:0;padding:10px 12px;border-radius:var(--buttonR);font-size:13px}
.mrchllBoxDL a::after{content:attr(aria-label)}
.mrchllBoxDL .fN{flex-grow:1; width:calc(100% - 200px);padding:0 15px}
.mrchllBoxDL .fN >*{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrchllBoxDL .fS{line-height:16px;font-size:12px;opacity:.8}
/* CSS Darkmode, Sesuaikan (.drK) dengan css darkmode template kalian agar bisa berfungsi */
.drK .mrchllBoxDL{background:var(--darkBa)}Keterangan
| Value | Keterangan |
| --darkBa | Warna Background Saat Darkmode |
| --buttonR | Border Radius |
| --linkB | Warna Button Download |
Jika Sudah Klik Simpan.
Cara Menggunakan Widget Download Box
Salin kode dibawah ini, lalu tempel dimanapun kalian ingin menampilkan widget tersebut.
<div class='mrchllBoxDL'>
<!--[ Change data-text='...' atribute to add new file type ]-->
<span class='fT lazy' data-style='background-image: url(link_gambar_disini)'></span>
<div class='fN'>
<!--[ File name ]-->
<span>Nama_File.png</span>
<span class='fS'>10kb</span>
</div>
<!--[ Download link (change href='...' atribute to add link download) ]-->
<a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>Bagian - bagian yang saya beri tanda, sesuaikan dengan selera kalian masing - masing.
Sekian, tutorial Widget Download Box ini, semoga bermanfaat bagi kalian. Dan terimakasih sudah berkunjung di blog ini..
Apa Reaksimu Setelah Membaca Artikel Ini?