Cara Membuat Butang Muat turun: 11 Langkah (dengan Gambar)

Isi kandungan:

Cara Membuat Butang Muat turun: 11 Langkah (dengan Gambar)
Cara Membuat Butang Muat turun: 11 Langkah (dengan Gambar)

Video: Cara Membuat Butang Muat turun: 11 Langkah (dengan Gambar)

Video: Cara Membuat Butang Muat turun: 11 Langkah (dengan Gambar)
Video: cara buat email baru di hp android 2023 cara buat email baru di hp ~ Dunia Bang Joe 2024, Mungkin
Anonim

Butang muat turun dapat menjadikan laman web anda kelihatan lebih profesional daripada hanya menawarkan muat turun anda melalui pautan. Butang memberikan antara muka yang lebih bersih, dan jika anda ingin merancang sendiri, butang anda boleh menjadi bahagian penting dari reka bentuk halaman anda. Ikuti panduan ini untuk membuat butang HTML atau membuat butang reka bentuk anda sendiri.

Langkah-langkah

Kaedah 1 dari 2: Membuat Butang HTML

Buat Butang Muat turun Langkah 1
Buat Butang Muat turun Langkah 1

Langkah 1. Buat butang dalam penyunting kod

Penyunting teks ringkas seperti Notepad atau TextEdit akan berfungsi dengan sempurna. Masukkan kod berikut ke dalam editor:

Buat Butang Muat turun Langkah 2
Buat Butang Muat turun Langkah 2

Langkah 2. Muat naik fail ke pelayan anda

Sekiranya anda ingin menawarkan fail untuk dimuat turun, anda perlu menghostingnya di pelayan anda sendiri atau menghalakan butang ke fail di tempat lain di web. Gunakan klien FTP untuk memuat naik fail yang ingin anda sediakan ke pelayan laman web anda.

Buat Butang Muat turun Langkah 3
Buat Butang Muat turun Langkah 3

Langkah 3. Pastikan bahawa anda mempunyai kebenaran daripada juruweb jika anda ingin memautkan ke fail yang tidak anda hos sendiri

Buat Butang Muat turun Langkah 4
Buat Butang Muat turun Langkah 4

Langkah 4. Gantikan 'Muat turun Lokasi' dengan URL ke muat turun. Pastikan untuk memasukkan tanda kutip tunggal di sekitar alamat, serta tanda kutip ganda di sekitar "window.location = 'Download Lokasi'". Sertakan awalan seperti HTTP: // atau FTP: // dan juga sertakan peluasan fail seperti sebagai-j.webp" />

Buat Butang Muat turun Langkah 5
Buat Butang Muat turun Langkah 5

Langkah 5. Labelkan butang

Ganti "Teks Butang" dengan perkataan yang anda mahu muncul di butang. Pastikan menyimpan tanda petik berganda di sekitar teks. Pastikan teks butang tetap kecil sehingga butang tidak kelihatan besar dan tidak berat sebelah di halaman.

Buat Butang Muat turun Langkah 6
Buat Butang Muat turun Langkah 6

Langkah 6. Letakkan kod di halaman anda

Anda boleh memasukkan kod butang di mana sahaja ke dalam halaman laman web anda, dan butang akan muncul di lokasi tersebut. Muat naik kod halaman web anda yang berubah, dan uji butang baru anda.

Kaedah 2 dari 2: Membuat Butang Gambar

Buat Butang Muat turun Langkah 7
Buat Butang Muat turun Langkah 7

Langkah 1. Reka butang muat turun anda

Gunakan penyunting gambar pilihan anda, dan buat butang yang sesuai dengan gaya laman web anda. Anda boleh membuat butang sekecil atau sebesar yang anda mahukan.

Buat Butang Muat turun Langkah 8
Buat Butang Muat turun Langkah 8

Langkah 2. Muat naik fail ke pelayan anda dan gambar butang

Sekiranya anda ingin menawarkan fail untuk dimuat turun, anda perlu menghoskannya di pelayan anda sendiri atau menghalakan butang ke fail di tempat lain di web. Gunakan klien FTP untuk memuat naik fail yang ingin anda sediakan ke pelayan laman web anda.

Muat naik gambar butang ke lokasi yang sama di pelayan dengan halaman yang anda masukkan

Buat Butang Muat turun Langkah 9
Buat Butang Muat turun Langkah 9

Langkah 3. Buat kod muat turun anda

Butang muat turun yang ditunjukkan oleh gambar berfungsi dengan cara yang sama seperti semua pautan lain berfungsi dalam HTML. Salin kod berikut ke dalam editor pilihan anda:

Buat Butang Muat turun Langkah 10
Buat Butang Muat turun Langkah 10

Langkah 4. Masukkan maklumat fail dan gambar anda. Gantikan "Lokasi Muat Turun" dengan URL penuh ke muat turun anda, termasuk awalan HTTP: // atau FTP: //. Ganti "Fail Gambar dengan nama fail untuk gambar butang muat turun. Sekiranya fail berada di lokasi yang sama dengan halaman di pelayan anda, anda tidak perlu memasukkan keseluruhan alamat.

  • Ganti "Hover Text" dengan teks yang anda mahu muncul ketika pengguna mengarahkan kursor ke atas gambar.
  • Ganti "X" dan "Y" dengan lebar dan tinggi gambar masing-masing dalam piksel.
  • Pastikan menyimpan tanda kutip berganda di setiap entri.
Buat Butang Muat turun Langkah 11
Buat Butang Muat turun Langkah 11

Langkah 5. Masukkan kod ke dalam halaman anda

Letakkan kod di mana anda mahu butang anda muncul. Muat naik kod baru, dan kemudian muatkan halaman web untuk memastikan butang berfungsi. Periksa bahawa teks hover dimuat dan gambarnya berukuran betul.

Video - Dengan menggunakan perkhidmatan ini, beberapa maklumat dapat dikongsi dengan YouTube

Amaran

  • Memuat naik fail ke pelayan anda sendiri adalah cara yang lebih baik untuk berkongsi fail dalam talian dan bukannya bergantung pada laman web lain untuk menghoskan fail. Sekiranya anda menyalin lokasi pautan dari laman web lain, butang muat turun yang anda buat hanya akan berfungsi selagi lokasi pautan aktif.
  • Jangan sekali-kali memuat naik fail yang melanggar undang-undang hak cipta kerana boleh menyebabkan denda atau penjara.
  • Uji butang muat turun anda secara berkala atau pautan muat turun di laman web dari mana anda mendapat lokasi pautan untuk memastikan bahawa pengguna akan dapat memuat turun fail ketika mereka mengklik butang dan bukannya pergi ke pautan yang rosak di mana fail itu tidak lagi ada.

Disyorkan: