Como Personalizar os Links do Blog?

CONSIDERAÇÕES INICIAIS

Nesse tutorial, confira como personalizar todos os links do blog ou apenas aqueles disponíveis nos widgets ao lado das postagens.

Esse tutorial é indicado para os blogs que utilizam o tema Awesome Inc. ou Espetacular Ltda na plataforma do Blogger. Para baixar um modelo no tema Awesome, clique aqui.

Antes de realizar qualquer um dos procedimentos a seguir, primeiramente faça um backup do seu blog. Se ocorrer algum problema durante o procedimento, o blog poderá ser restaurado com o arquivo do backup realizado. Se tiver alguma dúvida sobre o backup, clique aqui.

COMO PERSONALIZAR TODOS OS LINKS DO BLOG?

Confira como personalizar todos os links do seu blog adicionando efeito de sombra e alterando o plano de fundo em 11 passos.

01º Passo: acesse à página inicial do Blogger.

02º Passo: clique em Tema.

03º Passo: clique na seta ao lado do botão Personalizar e escolha a opção Editar HTML.

04º Passo: clique em qualquer local dentro do HTML do blog.

05º Passo: no teclado, pressione as teclas CRTL e F para abrir a caixa de pesquisa do HTML.

06º Passo: pesquise pelo trecho abaixo:

a:hover {

Clique aqui para copiar o trecho acima.

Observação: caso apareça mais de um resultado na pesquisa, escolha o primeiro resultado, onde o trecho pesquisado apareço só na linha de código.

07º Passo: clique na frente desse trecho e pressione a tecla Enter para inserir uma linha em branco abaixo desse trecho.

08º Passo: abaixo do trecho pesquisado, escreva o código:

text-shadow: 0px 0px 10px #ffffff;

background: url(URL DA IMAGEM) top center no-repeat;

Clique aqui para copiar o código acima.

09º Passo: substitua o trecho URL DA IMAGEM pelo URL da imagem desejada.

O código do seu blog era assim:

a:hover {   text-decoration: underline;

Depois que digitar o código, vai ficar assim:

a:hover { text-shadow: 0px 0px 10px #ffffff; background: url(URL DA IMAGEM) top center no-repeat;   text-decoration: underline;

Depois que substituir o URL da imagem, vai ficar assim:

a:hover { text-shadow: 0px 0px 10px #ffffff; background: url(https://blogger. EXEMPLO DE URL .jpg) top center no-repeat;   text-decoration: underline;

Dica: se tiver alguma dúvida sobre como obter o URL de uma imagem salva no seu computador, clique aqui e acesse o tutorial como alterar o plano de fundo das postagens e dos widgets do blog. Os 15 primeiros passos desse tutorial mostram detalhadamente como enviar uma imagem para o Blogger e obter a URL dessa imagem.

10º Passo: clique em Visualizar para conferir o resultado.

11º Passo: para finalizar, clique em Salvar.

 

No código disponibilizado, o trecho text-shadow: 0px 0px 10px #ffffff; possui a função de adicionar o efeito da sombra no link, enquanto o trecho background: url(URL DA IMAGEM) top center no-repeat; possui a função de adicionar uma imagem como plano de fundo do link.

É possível alterar o brilho da sombra, substituindo o trecho 10px por um valor maior para aumentar o brilho ou por um valor menor para diminuir o brilho, como por exemplo: o valor 5px indica um brilho menor e o valor 15px indica um brilho maior.

É possível alterar a cor da sombra, substituindo o trecho #ffffff pelo código hexadecimal da cor desejada. Além da cor branca (#ffffff), também é possível aplicar as cores azul celeste (#04b8fb), azul marinho (#0f2ee6), azul claro (#b1e8f8), azul escuro (#0d0b57), verde claro (#00fe00), verde escuro (#307312), laranja (#fa9246), amarelo (#ffd200), prata (#ababab), preto (#000000), entre outras cores.

Clique aqui para copiar o código hexadecimal das cores acima e de outras cores disponíveis.

É possível substituir o trecho top por bottom.

Top: deixa a imagem adicionada alinhada com a parte superior do link.

Bottom: deixa a imagem adicionada alinhada com a parte inferior do link.

É possível substituir o trecho center por left ou right.

Center: deixa a imagem adicionada alinhada no centro do link.

Left: deixa a imagem adicionada alinhada no lado esquerdo do link.

Right: deixa a imagem adicionada alinhada no lado direito do link.

É possível substituir o trecho no-repeat por repeat.

No-repeat: evita a repetição da imagem adicionada.

Repeat: ativa a repetição da imagem adicionada.

É possível substituir a imagem por uma cor sólida no plano de fundo. No entanto, deve substituir o trecho url(URL DA IMAGEM) top center no-repeat pelo código hexagonal da cor desejada, conforme no exemplo abaixo.

Código do link personalizado com imagem no plano de fundo:

text-shadow: 0px 0px 10px #ffffff; background: url(URL DA IMAGEM) top center no-repeat;

Código do link personalizado com cor sólida azul no plano de fundo:

text-shadow: 0px 0px 10px #ffffff; background:#58c0f0;

Clique aqui para copiar o código acima que deixa o link personalizado com uma cor sólida azul no plano de fundo.

Clique aqui e confira os códigos hexadecimais de outras cores para adicionar no plano de fundo do link personalizado.

COMO PERSONALIZAR OS LINKS DOS WIDGETS LATERAIS DO BLOG?

Para personalizar apenas os links do seu blog que aparecem nos widgets do lado da postagem, adicionando um efeito de sombra e alterando o plano de fundo de links, realize o procedimento anterior alterando apenas o sexto passo.

06º Passo: pesquise pelo trecho abaixo:

.sidebar .widget a:hover {

Clique aqui para copiar o trecho acima.

Por fim, escreva o código do link personalizado abaixo do trecho acima (clique aqui para copiar o código), substitua o trecho URL DA IMAGEM e clique em Salvar.

 

OUTROS MODELOS DE CÓDIGOS PARA LINKS PERSONALIZADOS

 

 

CONSIDERAÇÕES FINAIS

Dessa forma, adicionando o código mencionado abaixo do trecho a:hover { é possível personalizar todos os links do blog. Da mesma forma, adicionando o código abaixo de .sidebar .widget a:hover { é possível personalizar os links que aparecem nos widgets ao lado das postagens.

Portanto, esse tutorial visou compartilhar um pouco de nossos conhecimentos sobre a personalização dos links do blog, adicionando o efeito da sombra ao texto e uma imagem no plano de fundo para melhorar o visual.

 

TUTORIAIS RECOMENDADOS

 

Por: Santos. Elaborado em: 19/12/2025. Publicado em: 19/12/2025. Atualizado em: 19/12/2025. Obrigado pela sua atenção, qualquer dúvida, falha ou sugestão, deixe seu comentário ou entre em contato conosco.