Visual Dicas

segunda-feira, 25 de janeiro de 2016

Visual Dicas

Como criar um sistema de download no seu Blogger

Posted: 24 Jan 2016 02:08 PM PST

1) Sistema de download de arquivos.

Muita gente que utiliza o Blogger não acredita que é possível criar um sistema de downloads de arquivos nesta plataforma. E o melhor, com o nosso tutorial, você não precisará adquir nenhum serviço de hospedagem pago. Tudo é gratuito e bem simples.

Sistema de download de arquivos: Sistema onde o usuário pode baixar arquivos da internet para o seu computador. Isto é muito útil para você oferecer aos seus leitores arquivos de aplicativos como o excel, word, pdf, etc, arquivos de imagens, vídeos, softwares, games, etc.

Veja o nosso sistema em ação:

Clique para fazer o download:

Veja a seguir como montar o seus sistema de dowloads no Blogger.

2) Criando seu servidor

Para o nosso servidor, vamos utilizar o Google Sites. Basta você ter uma conta no Google (Gmail, Google+ ou Youtube) para que você receba 100 Mb gratuito de hospedagem para cada site criado.

Para criar o seu servidor siga as instruções do nosso tutorial: Usando o Google Sites como servidor de arquivos para blogs e sites

3) Alimentando seu servidor Google Sites

Após criar o seu servidor, vamos agora alimentá-lo com arquivos que serão fornecidos aos seus leitores para o download. No nosso exemplo vamos utilizar 3 arquivos para teste, sendo: 1 arquivo do Excel, 1 arquivo de imagem e 1 arquivo zip (arquivos executáveis não são permitidos, portanto teremos que compactá-los).

Para compactar um arquivo

Acesse o site: Google Sites

Faça o login utilizando a sua conta do Google.

Acesse o seu site servidor (site que você criou para funcionar como um servidor de hospedagem: Usando o Google Sites como servidor de arquivos para blogs e sites).

Vamos enviar primeiro o nosso arquivo Excel. Abra a pasta desejada.

Obs.: O sistema de pastas mostrado serve apenas como exemplo. Você poderá montar seu sistema de pastas da maneira que desejar.

Clique no link [Adicionar Arquivos].

Selecione o arquivo desejado e clique no botão [Abrir].

Aguarde alguns instantes para o upload e seu arquivo estará hospedado no Google Sites.

Repita esta operação para os demais arquivos.

ATENÇÃO: Arquivos executáveis (.exe, .bat, .cmd e .vbs) não são permitidos no Google Sites.

Dica: Para que você possa fazer o upload de arquivos executáveis, precisará primeiro convertê-los para uma arquivo compactado, tipo .zip ou .rar, através de softwares como: PKZIP, WinZip, 7-Zip e WinRar. No nosso exemplo vamos compactar o arquivo .exe utilizando o software WinRar.

Compactando arquivos executáveis – usando o WinRar

a) Instale o software – http://www.winrarbrasil.com.br/winrar/download.mv

b) Clique com o botão direito sobre o arquivo que será compactado. Selecione a opção [Add to archive…].

c) Selecione ZIP em Archive format e clique no botão [OK]

d) Agora, da mesma maneira que mostramos anteriormente, faça o upload do arquivo .zip para o Google Sites.

4) Colocando o botão de download nas postagens.

Abra o editor de postagem do Blogger (ou qualquer outro editor para criar e modificar postagens como o Open Live Write), acesse o Editor HTML. (No nosso exemplo vamos criar nossos botões de download através do editor do Blogger).

Coloque o código HTML padrão:

<button onclick="window.open('LINK DO GOOGLE SITE')">TEXTO DO BOTÃO</button>

Volte para o seu servidor Google Sites e localize arquivo que você quer disponibilizar para o download.

Clique com o botão direito do mouse sobre a seta que aparece ao lado do arquivo escolhido. Clique em [Copiar link].

Agora, no código HTML padrão, substitua o LINK DO GOOGLE SITE pelo link copiado. Coloque também um texto para o botão. O nosso código ficará assim.

<button onclick="window.open('https://sites.google.com/site/servidorvisualdicas/arquivos-excel/Data_validade.xlsx?attredirects=0&d=1')">DOWNLOAD EXCEL</button>

Veja o código no editor do Blogger.

Repita a operação acima para os demais arquivos que você colocar na postagem para download.

Coloque um texto + código <br/> para dar início a sua postagem, como por exemplo: Comece aqui <br/>

Clique no botão [Escrever] para voltar para o modo de edição de texto.

Agora digite o texto da sua postagem da maneira que desejar…

Veja como ficou a nossa postagem.

Obs.: Se você já utiliza o editor HTML poderá colocar os botões para download em qualquer momento em que estiver escrevendo a sua postagem.

5) Posicionado os botões de download

a) Para colocar um texto na frente do botão acrescente as tags <p> </p> como no nosso exemplo:

<p> Clique no botão: <button onclick="window.open('https://sites.google.com/site/servidorvisualdicas/arquivos-excel/Data_validade.xlsx?attredirects=0&amp;d=1')">DOWNLOAD EXCEL</button></p>

Veja como fica no editor de texto do Blogger:

b) Para centralizar o botão, acrescente as tags <p style="text-align:center"> </p> como no exemplo abaixo:

<p style="text-align:center"><button onclick="window.open('https://sites.google.com/site/servidorvisualdicas/arquivos-excel/Data_validade.xlsx?attredirects=0&d=1')">DOWNLOAD EXCEL</button></p>

Veja como fica no editor de texto do Blogger:

c) Da mesma forma que o exemplo anterior, acrescente as tags <p style="text-align:right"> </p> para posicionar o botão à direita. Para posicionar à esquerda, use as tags <p style="text-align:left"> </p> .

E no editor de texto do Blogger:

Observação: Você poderá utilizar as tags <div> </div> no lugar de <p> </p> para ter o mesmo efeito neste caso.

6) Botão de download personalizado

Se você desejar fazer uma firula e criar configurações personalizadas para seus botões de download, crie primeiro as classes conforme o nosso tutorial: Crie botões personalizados para o seu Blogger

Depois é só adicionar a classe na tag <button>, como no exemplo a seguir:

<div style="text-align: center;">  

<button class="bt bt-vm" onclick="window.open('https://sites.google.com/site/servidorvisualdicas/arquivos-excel/Data_validade.xlsx?attredirects=0&amp;d=1')">DOWNLOAD EXCEL</button></div>

Veja o botão pronto:

7) Finalizando e publicando sua postagem

Antes de publicar sua postagem, visualize para verificar se o layout e posições dos seus botões de download. Clique no botão [Visualizar] e depois se tudo estiver correto em [Publicar].