Tombol Download Animasi CSS (dengan Nama & Ukuran File) di Blogger

Membuat Tombol Download Animasi CSS di Blogger

Halo kawan! Sebuah halaman blog biasanya diisi dengan berbagai artikel dan tulisan sesuai yang diinginkan oleh pemiliknya. Tidak terkecuali saat ini kebanyakan blog diisi dengan link download dan tempat untuk mendapatkan sebuah aplikasi atau sebuah file dari internet.

Oleh karena itu tidak jarang berbagai blog menggunakan animasi tombol download untuk memberikan tampilan yang lebih menarik dan memudahkan pengunjungnya untuk mengetahui bahwa itu adalah tombol atau tempat untuk mendapatkan link download. Salah satunya yaitu tombol animasi yang terlihat seperti gambar berikut:

Membuat Tombol Download Animasi CSS di Blogger

Lihat demo di sini

Tombol download seperti di atas mempunyai kelebihan yang bisa memudahkan pengunjung blog yaitu sudah tersedianya nama file yang akan di download oleh pengunjung serta sudah tersedia juga ukuran file tersebut. Sehingga pengunjung bisa tau file apa dan ukurannya berapa yang akan mereka download.

Untuk memasang tombol download dengan animasi yang memunculkan nama file dan ukuran file yang di download kamu bisa mengikuti langkah-langkah berikut ini. Tetapi perlu kamu ketahui bahwa nama file dan ukuran file yang muncul pada keterangan file tersebut dituliskan secara manual. Ikuti langkah di bawah:
  1. Buka Blogger
  2. Pada bagian Tema klik tombol Edit HTML
  3. Temukan kode </head> dan tambahkan kode berikut ini di atasnya
  4. <link rel="stylesheet" href="https://code.maringngerrang.com/dl-button.css" />
  5. Tekan tombol Simpan
  6. Gunakan kode berikut untuk memasang tombol pada postingan di blog kamu
  7. <div class="dlbutton">
    <a href="#" target="_blank">Download</a>
    <div class="slide top">
    Nama File.rar</div>
    <div class="slide bottom">
    Size : 1.5 MB</div>
    </div>
  8. Ganti bagian yang ditandai sesuai keinginan kamu

Itulah beberapa langkah yang bisa kamu lakukan untuk memasang tombol download dengan keterangan nama file dan ukuran file, serta dengan animasi kode CSS yang mudah digunakan di Blogger. Semoga artikel ini bisa bermanfaat untuk kamu. Jika ada hal yang kurang jelas, maka jangan sungkan untuk menanyakannya pada komentar di bawah atau melalui halaman contact blog ini. Terima kasih dan sampai jumpa!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel