Cara Membuat Tombol Unduh: 11 Langkah (dengan Gambar)

Daftar Isi:

Cara Membuat Tombol Unduh: 11 Langkah (dengan Gambar)
Cara Membuat Tombol Unduh: 11 Langkah (dengan Gambar)

Video: Cara Membuat Tombol Unduh: 11 Langkah (dengan Gambar)

Video: Cara Membuat Tombol Unduh: 11 Langkah (dengan Gambar)
Video: Cara Menambah Alamat Email Pemulihan di Akun Google 2024, Mungkin
Anonim

Tombol unduh dapat membuat situs web Anda terlihat jauh lebih profesional daripada sekadar menawarkan unduhan Anda melalui tautan. Sebuah tombol menyediakan antarmuka yang lebih bersih, dan jika Anda ingin mendesain sendiri, tombol Anda dapat menjadi bagian integral dari desain halaman Anda. Ikuti panduan ini untuk membuat tombol HTML atau membuat tombol dengan desain Anda sendiri.

Langkah

Metode 1 dari 2: Membuat Tombol HTML

Buat Tombol Unduh Langkah 1
Buat Tombol Unduh Langkah 1

Langkah 1. Buat tombol di editor kode

Editor teks sederhana seperti Notepad atau TextEdit akan bekerja dengan sempurna. Masukkan kode berikut ke dalam editor:

Buat Tombol Unduh Langkah 2
Buat Tombol Unduh Langkah 2

Langkah 2. Unggah file ke server Anda

Jika Anda ingin menawarkan file untuk diunduh, Anda harus menyimpannya di server Anda sendiri atau mengarahkan tombol ke file di tempat lain di web. Gunakan klien FTP untuk mengunggah file yang ingin Anda sediakan ke server situs web Anda.

Buat Tombol Unduh Langkah 3
Buat Tombol Unduh Langkah 3

Langkah 3. Pastikan Anda memiliki izin dari webmaster jika Anda ingin menautkan ke file yang bukan Anda hosting sendiri

Buat Tombol Unduh Langkah 4
Buat Tombol Unduh Langkah 4

Langkah 4. Ganti 'Unduh Lokasi' dengan URL untuk mengunduh. Pastikan untuk menyertakan tanda kutip tunggal di sekitar alamat, serta tanda kutip ganda di sekitar “window.location='Download Location'". Sertakan awalan apa pun seperti HTTP:// atau FTP:// dan juga sertakan ekstensi file seperti sebagai-j.webp" />

Buat Tombol Unduh Langkah 5
Buat Tombol Unduh Langkah 5

Langkah 5. Beri label tombol

Ganti "Teks Tombol" dengan kata-kata yang ingin Anda tampilkan di tombol. Pastikan untuk menyimpan tanda kutip ganda di sekitar teks. Jaga agar teks tombol tetap kecil sehingga tombol tidak tampak besar dan berat di halaman.

Buat Tombol Unduh Langkah 6
Buat Tombol Unduh Langkah 6

Langkah 6. Tempatkan kode di halaman Anda

Anda dapat memasukkan kode tombol di mana saja ke dalam isi halaman web Anda, dan tombol akan muncul di lokasi itu. Unggah kode halaman web Anda yang telah diubah, dan uji tombol baru Anda.

Metode 2 dari 2: Membuat Tombol Gambar

Buat Tombol Unduh Langkah 7
Buat Tombol Unduh Langkah 7

Langkah 1. Rancang tombol unduh Anda

Gunakan editor gambar pilihan Anda, dan buat tombol yang sesuai dengan gaya situs web Anda. Anda dapat membuat tombol sekecil atau sebesar yang Anda inginkan.

Buat Tombol Unduh Langkah 8
Buat Tombol Unduh Langkah 8

Langkah 2. Unggah file ke server Anda dan gambar tombol

Jika Anda ingin menawarkan file untuk diunduh, Anda harus menyimpannya di server Anda sendiri atau mengarahkan tombol ke file di tempat lain di web. Gunakan klien FTP untuk mengunggah file yang ingin Anda sediakan ke server situs web Anda.

Unggah gambar tombol ke lokasi yang sama di server sebagai halaman tempat Anda meletakkannya

Buat Tombol Unduh Langkah 9
Buat Tombol Unduh Langkah 9

Langkah 3. Buat kode unduhan Anda

Tombol unduh yang diwakili oleh gambar bekerja dengan cara yang sama seperti semua tautan lain bekerja dalam HTML. Salin kode berikut ke editor pilihan Anda:

Buat Tombol Unduh Langkah 10
Buat Tombol Unduh Langkah 10

Langkah 4. Masukkan informasi file dan gambar Anda. Ganti "Lokasi Unduhan" dengan URL lengkap untuk unduhan Anda, termasuk awalan HTTP:// atau FTP://. Ganti “File Gambar dengan nama file untuk gambar tombol unduh. Jika file berada di lokasi yang sama dengan halaman di server Anda, Anda tidak perlu menyertakan seluruh alamat.

  • Ganti "Hover Text" dengan teks apa pun yang ingin Anda tampilkan saat pengguna mengarahkan kursor ke gambar.
  • Ganti "X" dan "Y" dengan lebar dan tinggi gambar masing-masing dalam piksel.
  • Pastikan untuk menyimpan tanda kutip ganda di sekitar setiap entri.
Buat Tombol Unduh Langkah 11
Buat Tombol Unduh Langkah 11

Langkah 5. Masukkan kode ke halaman Anda

Tempatkan kode di mana Anda ingin tombol Anda muncul. Unggah kode baru, lalu muat halaman web untuk memastikan tombol berfungsi. Periksa apakah teks hover dimuat dan gambar berukuran tepat.

Video - Dengan menggunakan layanan ini, beberapa informasi dapat dibagikan dengan YouTube

Peringatan

  • Mengunggah file ke server Anda sendiri adalah cara yang lebih baik untuk berbagi file secara online daripada bergantung pada situs web lain untuk menghosting file. Jika Anda menyalin lokasi tautan dari situs web lain, tombol unduh yang Anda buat hanya akan berfungsi selama lokasi tautan aktif.
  • Jangan pernah mengunggah file yang melanggar undang-undang hak cipta karena dapat menyebabkan denda berat atau hukuman penjara.
  • Uji tombol unduh atau tautan unduhan Anda secara berkala di situs web tempat Anda mendapatkan lokasi tautan untuk memastikan bahwa pengguna dapat mengunduh file saat mereka mengklik tombol alih-alih membuka tautan rusak di mana file tidak ada lagi.

Direkomendasikan: