Een downloadknop maken: 11 stappen (met afbeeldingen)

Inhoudsopgave:

Een downloadknop maken: 11 stappen (met afbeeldingen)
Een downloadknop maken: 11 stappen (met afbeeldingen)

Video: Een downloadknop maken: 11 stappen (met afbeeldingen)

Video: Een downloadknop maken: 11 stappen (met afbeeldingen)
Video: How To Quickly Add New Contacts From Email To Outlook Address Book? #short 2024, Mei
Anonim

Een downloadknop kan ervoor zorgen dat uw website er aanzienlijk professioneler uitziet dan alleen uw download via links aan te bieden. Een knop zorgt voor een schonere interface en als u er zelf een wilt ontwerpen, kunnen uw knoppen een integraal onderdeel zijn van het ontwerp van uw pagina. Volg deze handleiding om HTML-knoppen te maken of om een knop naar uw eigen ontwerp te maken.

Stappen

Methode 1 van 2: Een HTML-knop maken

Maak een downloadknop Stap 1
Maak een downloadknop Stap 1

Stap 1. Maak de knop in een code-editor

Een eenvoudige teksteditor zoals Kladblok of Teksteditor zal perfect werken. Voer de volgende code in de editor in:

Maak een downloadknop Stap 2
Maak een downloadknop Stap 2

Stap 2. Upload het bestand naar uw server

Als u een bestand wilt aanbieden om te downloaden, moet u het ofwel op uw eigen server hosten of de knop naar het bestand ergens anders op internet verwijzen. Gebruik een FTP-client om het bestand dat u beschikbaar wilt stellen aan de server van uw website te uploaden.

Maak een downloadknop Stap 3
Maak een downloadknop Stap 3

Stap 3. Zorg dat je toestemming hebt van de webmaster als je wilt linken naar een bestand dat je niet zelf host

Maak een downloadknop Stap 4
Maak een downloadknop Stap 4

Stap 4. Vervang 'Downloadlocatie' door de URL naar de download. Zorg ervoor dat u de enkele aanhalingstekens rond het adres opneemt, evenals de dubbele aanhalingstekens rond "window.location='Download Location'". Voeg eventuele voorvoegsels toe zoals HTTP:// of FTP:// en ook de bestandsextensie zoals als-j.webp" />

Maak een downloadknop Stap 5
Maak een downloadknop Stap 5

Stap 5. Label de knop

Vervang "Knoptekst" door de woorden die u op de knop wilt laten verschijnen. Zorg ervoor dat de dubbele aanhalingstekens rond de tekst blijven staan. Houd de knoptekst klein, zodat de knop niet groot en onpraktisch op de pagina wordt weergegeven.

Maak een downloadknop Stap 6
Maak een downloadknop Stap 6

Stap 6. Plaats de code in je pagina

U kunt de knopcode overal in de hoofdtekst van uw webpagina invoegen en de knop zal op die locatie verschijnen. Upload uw gewijzigde webpaginacode en test uw nieuwe knop.

Methode 2 van 2: Een afbeeldingsknop maken

Maak een downloadknop Stap 7
Maak een downloadknop Stap 7

Stap 1. Ontwerp je downloadknop

Gebruik uw favoriete afbeeldingseditor en maak een knop die past bij de stijl van uw website. U kunt de knop zo klein of zo groot maken als u wilt.

Maak een downloadknop Stap 8
Maak een downloadknop Stap 8

Stap 2. Upload het bestand naar uw server en de afbeelding van de knop

Als u een bestand wilt aanbieden om te downloaden, moet u het ofwel op uw eigen server hosten of de knop naar het bestand ergens anders op internet verwijzen. Gebruik een FTP-client om het bestand dat u beschikbaar wilt stellen aan de server van uw website te uploaden.

Upload de knopafbeelding naar dezelfde locatie op de server als de pagina waarop u deze plaatst

Maak een downloadknop Stap 9
Maak een downloadknop Stap 9

Stap 3. Maak uw downloadcode aan

Een downloadknop weergegeven door een afbeelding werkt op dezelfde manier als alle andere links in HTML. Kopieer de volgende code naar uw favoriete editor:

Maak een downloadknop Stap 10
Maak een downloadknop Stap 10

Stap 4. Voer uw bestands- en afbeeldingsinformatie in. Vervang "Downloadlocatie" door de volledige URL naar uw download, inclusief eventuele HTTP://- of FTP://-voorvoegsels. Vervang "Beeldbestand door de bestandsnaam voor de afbeelding van de downloadknop. Als het bestand zich op dezelfde locatie bevindt als de pagina op uw server, hoeft u niet het hele adres op te nemen.

  • Vervang "Hover-tekst" door elke tekst die u wilt weergeven wanneer de gebruiker de cursor over de afbeelding beweegt.
  • Vervang "X" en "Y" door respectievelijk de breedte en hoogte van de afbeelding in pixels.
  • Zorg ervoor dat u de dubbele aanhalingstekens rond elk item plaatst.
Maak een downloadknop Stap 11
Maak een downloadknop Stap 11

Stap 5. Voer de code in op uw pagina

Plaats de code waar u uw knop wilt laten verschijnen. Upload de nieuwe code en laad vervolgens de webpagina om ervoor te zorgen dat de knop werkt. Controleer of de zweeftekst wordt geladen en of de afbeelding de juiste grootte heeft.

Video - Door deze service te gebruiken, kan bepaalde informatie worden gedeeld met YouTube

Waarschuwingen

  • Het uploaden van bestanden naar uw eigen server is een betere manier om bestanden online te delen in plaats van afhankelijk te zijn van andere websites om de bestanden te hosten. Als u een linklocatie van een andere website kopieert, werkt de door u gemaakte downloadknop alleen zolang de linklocatie actief is.
  • Upload nooit bestanden die in strijd zijn met de auteursrechtwetten, omdat dit kan leiden tot hoge boetes of gevangenisstraf.
  • Test regelmatig uw downloadknop of de downloadlink op de website waar u de linklocatie vandaan hebt gehaald om er zeker van te zijn dat gebruikers het bestand kunnen downloaden wanneer ze op de knop klikken in plaats van naar een verbroken link te gaan waar het bestand niet meer bestaat.

Aanbevolen: