Como criar um botão de download: 11 etapas (com imagens)

Índice:

Como criar um botão de download: 11 etapas (com imagens)
Como criar um botão de download: 11 etapas (com imagens)

Vídeo: Como criar um botão de download: 11 etapas (com imagens)

Vídeo: Como criar um botão de download: 11 etapas (com imagens)
Vídeo: COMO ESCREVER UM E-MAIL FORMAL / PROFISSIONAL | 9 DICAS 2024, Abril
Anonim

Um botão de download pode tornar seu site significativamente mais profissional do que simplesmente oferecer o download por meio de links. Um botão fornece uma interface mais limpa e, se você quiser criar o seu próprio, seus botões podem ser partes integrantes do design de sua página. Siga este guia para criar botões HTML ou faça um botão com seu próprio design.

Passos

Método 1 de 2: Criando um botão HTML

Crie um botão de download, etapa 1
Crie um botão de download, etapa 1

Etapa 1. Crie o botão em um editor de código

Um editor de texto simples como o Notepad ou TextEdit funcionará perfeitamente. Insira o seguinte código no editor:

Crie um botão de download, etapa 2
Crie um botão de download, etapa 2

Etapa 2. Faça upload do arquivo para o seu servidor

Se quiser oferecer um arquivo para download, você precisará hospedá-lo em seu próprio servidor ou apontar o botão para o arquivo em outro lugar na web. Use um cliente FTP para fazer upload do arquivo que deseja disponibilizar para o servidor do seu site.

Crie um botão de download, etapa 3
Crie um botão de download, etapa 3

Etapa 3. Certifique-se de ter a permissão do webmaster se desejar vincular a um arquivo que não está hospedando você mesmo

Crie um botão de download, etapa 4
Crie um botão de download, etapa 4

Passo 4. Substitua 'Local de download' pelo URL do download. Certifique-se de incluir aspas simples ao redor do endereço, bem como as aspas duplas ao redor de “window.location = 'Download Location'". Inclua quaisquer prefixos como HTTP: // ou FTP: // e também inclua a extensão do arquivo, como como-j.webp" />

Crie um botão de download, etapa 5
Crie um botão de download, etapa 5

Etapa 5. Identifique o botão

Substitua “Texto do botão” pelas palavras que deseja que apareçam no botão. Certifique-se de manter as aspas duplas ao redor do texto. Mantenha o texto do botão pequeno para que ele não pareça grande e difícil de manejar na página.

Crie um botão de download, etapa 6
Crie um botão de download, etapa 6

Etapa 6. Coloque o código em sua página

Você pode inserir o código do botão em qualquer lugar no corpo da sua página da web e o botão aparecerá nesse local. Faça upload do código alterado da página da web e teste seu novo botão.

Método 2 de 2: Criando um botão de imagem

Crie um botão de download, etapa 7
Crie um botão de download, etapa 7

Etapa 1. Projete seu botão de download

Use o seu editor de imagens preferido e crie um botão que corresponda ao estilo do seu site. Você pode tornar o botão tão pequeno ou tão grande quanto desejar.

Crie um botão de download, etapa 8
Crie um botão de download, etapa 8

Etapa 2. Carregue o arquivo para o seu servidor e a imagem do botão

Se quiser oferecer um arquivo para download, você precisará hospedá-lo em seu próprio servidor ou apontar o botão para o arquivo em outro lugar na web. Use um cliente FTP para fazer upload do arquivo que deseja disponibilizar para o servidor do seu site.

Faça upload da imagem do botão para o mesmo local no servidor da página em que você o está colocando

Crie um botão de download, etapa 9
Crie um botão de download, etapa 9

Etapa 3. Crie seu código de download

Um botão de download representado por uma imagem funciona da mesma maneira que todos os outros links funcionam em HTML. Copie o seguinte código em seu editor preferido:

Crie um botão de download, etapa 10
Crie um botão de download, etapa 10

Passo 4. Insira suas informações de arquivo e imagem. Substitua “Local de download” pelo URL completo do download, incluindo qualquer prefixo HTTP: // ou FTP: //. Substitua “Arquivo de imagem pelo nome do arquivo para a imagem do botão de download. Se o arquivo estiver no mesmo local que a página em seu servidor, você não precisa incluir o endereço completo.

  • Substitua “Hover Text” por qualquer texto que você deseja que apareça quando o usuário passa o cursor sobre a imagem.
  • Substitua “X” e “Y” pela largura e altura da imagem respectivamente em pixels.
  • Certifique-se de manter as aspas duplas ao redor de cada entrada.
Crie um botão de download, etapa 11
Crie um botão de download, etapa 11

Etapa 5. Insira o código em sua página

Coloque o código onde deseja que o botão apareça. Faça upload do novo código e carregue a página da web para garantir que o botão funcione. Verifique se o texto flutuante é carregado e se a imagem tem o tamanho correto.

Vídeo - Ao usar este serviço, algumas informações podem ser compartilhadas com o YouTube

Avisos

  • Carregar arquivos em seu próprio servidor é a melhor maneira de compartilhar arquivos online em vez de depender de outros sites para hospedar os arquivos. Se você copiar o local de um link de outro site, o botão de download que você criar só funcionará enquanto o local do link estiver ativo.
  • Nunca envie arquivos que violem as leis de direitos autorais, pois isso pode resultar em multas pesadas ou prisão.
  • Teste periodicamente seu botão de download ou o link de download no site de onde você obteve o link para ter certeza de que os usuários conseguirão fazer o download do arquivo quando clicarem no botão, em vez de acessar um link corrompido onde o arquivo não existe mais.

Recomendado: