Cara Membuat Tombol Download Box Median UI

Tutorial cara membuat tombol box download pada postingan blog median ui
blog.bhaonks.eu.org
Cara membuat tombol download box pada postingan template Median Ui

Di bawah ini adalah tutorial bagaiman membuat Download Card / Download Box pada Template Median UI v 1.6 dan 1.7

Untuk tampilan nya bisa di lihat dibawah.

nama_file.zip 200kb
nama_file.zip 200kb

Tombol Text

Untuk menggunakannya silahkan copy kode dibawah lalu tempel pada postingan.

<div class='dlBox'>
  <!--[ Ganti data-text='...' atribute dengan jenis file ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ Nama file ]-->
    <span>nama_file.zip</span>
    <span class='fS'>200kb</span>
  </div>
    
  <!--[ Download link (ganti href='...' atribute dengan link download) ]-->
  <a class='button' aria-label='Download' href='your_url'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  </a>
</div>

Tombol Gambar

<div class='dlBox'>
  <!--[ Ganti data-text='...' atribute dengan jenis file ]-->
  <span class='fT lazy' data-text='zip' data-style='background-image: url(https://blogger.googleusercontent.com/img/.../image.png)'></span>
  <div class='fN'>
    <!--[ Nama File ]-->
    <span>nama_file.zip</span>
    <span class='fS'>200kb</span>
  </div>
    
  <!--[ Download link (ganti href='...' atribute dengan link download) ]-->
  <a class='button' aria-label='Download' href='your_url'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  </a>
</div>

Silahkan ganti url gambar dengan url gambar milik kalian.

Demikikan postingan kali ini tentang cara membuat tombol download bix pada median ui, semoga dapat bermanfaat

Baca juga
Gabung dalam percakapan

Posting Komentar