Leia:
- Como colocar arquivos para download no Blogger
- Como criar links para download de arquivos criados no Google Drive
Construa o link dentro de uma tag span com uma classe de atributo button em seu editor de texto no modo HTML, conforme abaixo:
<span class="button"><a href="URL-DO-LINK">Download</a></span>
Use o alinhamento em seu editor de texto para centralizar ou não o link.
Acrescentando o código CSS:
- Para acrescentar um código CSS no template do Blogger, o jeito mais simples é usar o Designer de modelo, indo em painel de controle >> Modelo >> Personalizar >> Avançado >> Adicionar CSS:
Adicionar legenda |
<b:skin>...</b:skin>
, e colar o código CSS antes de ]]></b:skin>
:Dê um clique na seta para abrir a secção do CSS |
Cole o CSS antes de ]]></b:skin> |
- Outra maneira é adicionar um gadget HTML/Javascript indo em painel de controle >> Layout >> Adicionar um gadget. O código CSS deve ser colocado entre as tags
<style>
e </style>
junto com o link :<style>
INSIRA O CÓDIGO CSS AQUI
</style>
<span class="button"><a href="URL-DO-LINK">Download</a></span>
Portanto, sem mais delongas, vamos a alguns exemplos de botões:
Código CSS de um botão simples:
.button {
border: 1px solid #dddddd;
background: #ccc;
padding: 5px 10px;
color: #ffffff;
font-size: 14px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
background: #eeeeee;
color: #cccccc;
}
.button:active {
background: #dddddd;
}
Exemplo:
Normal e quando passa o mouse por cima |
..button {
border: 1px solid #dddddd;
background: #cccccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
padding: 5px 10px;
color: #ffffff;
font-size: 14px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
..button:hover {
background: #eeeeee;
color: #ccc;
}
..button:active {
background: #dddddd;
}
Exemplo:
Normal e quando passa o mouse por cima |
.button {
border: 1px solid #dddddd;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#eeeeee));
background: -webkit-linear-gradient(top, #cccccc, #eeeeee);
background: -moz-linear-gradient(top, #cccccc, #eeeeee);
background: -ms-linear-gradient(top, #cccccc, #eeeeee);
background: -o-linear-gradient(top, #cccccc, #eeeeee);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 2px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fcfcfc;
font-size: 14px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
background: #eeeeee;
color: #cccccc;
}
.button:active {
background: #dddddd;
}
Exemplo:
Normal e quando passa o mouse por cima |
Obs.:
1 - Apesar de eu ter direcionado este tutorial para estilizar os links de download, ele serve para qualquer outro tipo de botão que você tenha em mente.
2 - Este tutorial está direcionado para os usuários do Blogger. Mas regras de CSS valem também para qualquer outra plataforma.