Hur man skapar en nedladdningsknapp: 11 steg (med bilder)

Innehållsförteckning:

Hur man skapar en nedladdningsknapp: 11 steg (med bilder)
Hur man skapar en nedladdningsknapp: 11 steg (med bilder)

Video: Hur man skapar en nedladdningsknapp: 11 steg (med bilder)

Video: Hur man skapar en nedladdningsknapp: 11 steg (med bilder)
Video: How To Quickly Add New Contacts From Email To Outlook Address Book? #short 2024, Maj
Anonim

En nedladdningsknapp kan få din webbplats att se betydligt mer professionell ut än att bara erbjuda din nedladdning via länkar. En knapp ger ett renare gränssnitt, och om du känner för att designa din egen kan dina knappar vara en integrerad del av sidans design. Följ den här guiden för att skapa HTML -knappar eller skapa en knapp i din egen design.

Steg

Metod 1 av 2: Skapa en HTML -knapp

Skapa en nedladdningsknapp Steg 1
Skapa en nedladdningsknapp Steg 1

Steg 1. Skapa knappen i en kodredigerare

En enkel textredigerare som Anteckningar eller TextEdit fungerar perfekt. Ange följande kod i redigeraren:

Skapa en nedladdningsknapp Steg 2
Skapa en nedladdningsknapp Steg 2

Steg 2. Ladda upp filen till din server

Om du vill erbjuda en fil att ladda ner måste du antingen vara värd för den på din egen server eller peka på knappen någon annanstans på webben. Använd en FTP -klient för att ladda upp filen som du vill göra tillgänglig för din webbplats server.

Skapa en nedladdningsknapp Steg 3
Skapa en nedladdningsknapp Steg 3

Steg 3. Se till att du har tillåtelse från webbansvarig om du vill länka till en fil som du inte är värd för själv

Skapa en nedladdningsknapp Steg 4
Skapa en nedladdningsknapp Steg 4

Steg 4. Ersätt 'Hämta plats' med URL till nedladdningen. Se till att inkludera enskilda citattecken runt adressen, liksom dubbla citattecken kring “window.location = 'Download Location'". Inkludera eventuella prefix som HTTP: // eller FTP: // och inkludera även filtillägget som-j.webp" />

Skapa en nedladdningsknapp Steg 5
Skapa en nedladdningsknapp Steg 5

Steg 5. Märk knappen

Ersätt "knapptext" med orden som du vill ska visas på knappen. Se till att behålla dubbla citattecken runt texten. Håll knapptexten liten så att knappen inte visas stor och otymplig på sidan.

Skapa en nedladdningsknapp Steg 6
Skapa en nedladdningsknapp Steg 6

Steg 6. Placera koden på din sida

Du kan infoga knappkoden var som helst i din webbsida, och knappen visas på den platsen. Ladda upp din ändrade webbsidekod och testa din nya knapp.

Metod 2 av 2: Skapa en bildknapp

Skapa en nedladdningsknapp Steg 7
Skapa en nedladdningsknapp Steg 7

Steg 1. Designa din nedladdningsknapp

Använd din föredragna bildredigerare och skapa en knapp som matchar stilen på din webbplats. Du kan göra knappen så liten eller så stor som du vill.

Skapa en nedladdningsknapp Steg 8
Skapa en nedladdningsknapp Steg 8

Steg 2. Ladda upp filen till din server och knappbilden

Om du vill erbjuda en fil att ladda ner måste du antingen vara värd för den på din egen server eller peka på knappen någon annanstans på webben. Använd en FTP -klient för att ladda upp filen som du vill göra tillgänglig för din webbplats server.

Ladda upp knappbilden till samma plats på servern som sidan du lägger den i

Skapa en nedladdningsknapp Steg 9
Skapa en nedladdningsknapp Steg 9

Steg 3. Skapa din nedladdningskod

En nedladdningsknapp som representeras av en bild fungerar på samma sätt som alla andra länkar fungerar i HTML. Kopiera följande kod till din föredragna redigerare:

Skapa en nedladdningsknapp Steg 10
Skapa en nedladdningsknapp Steg 10

Steg 4. Ange din fil- och bildinformation. Ersätt "Hämta plats" med hela URL: en till din nedladdning, inklusive eventuella HTTP: // eller FTP: // prefix. Ersätt “Bildfil med filnamnet för nedladdningsknappbilden. Om filen finns på samma plats som sidan på din server behöver du inte inkludera hela adressen.

  • Ersätt "Hover Text" med all text som du vill ska visas när användaren för markören över bilden.
  • Ersätt "X" och "Y" med bildbredd respektive höjd i pixlar.
  • Se till att behålla de dubbla citaten runt varje post.
Skapa en nedladdningsknapp Steg 11
Skapa en nedladdningsknapp Steg 11

Steg 5. Ange koden på din sida

Placera koden där du vill att din knapp ska visas. Ladda upp den nya koden och ladda sedan webbsidan för att säkerställa att knappen fungerar. Kontrollera att svävartexten laddas och att bilden har rätt storlek.

Video - Genom att använda denna tjänst kan viss information delas med YouTube

Varningar

  • Att ladda upp filer till din egen server är ett bättre sätt att dela filer online istället för att bero på andra webbplatser för att vara värd för filerna. Om du kopierar en länkplats från en annan webbplats fungerar nedladdningsknappen som du skapar bara så länge länkplatsen är aktiv.
  • Ladda aldrig upp filer som bryter mot upphovsrättslagarna eftersom det kan leda till höga böter eller fängelse.
  • Testa regelbundet din nedladdningsknapp eller nedladdningslänken på webbplatsen som du fick länkplatsen från för att se till att användare kommer att kunna ladda ner filen när de klickar på knappen istället för att gå till en trasig länk där filen inte längre finns.

Rekommenderad: