Link sem sublinhado e imagem sem borda
 |
| Imagem de Pexels por Pixabay |
Link sem sublinhado e imagem sem borda
Nível: InicianteAtualizado: 10/07/2022
Imagine que você acabou de construir a sua página, mas restou um pequenino detalhe. Os seus links ficaram com sublinhado e as suas imagens estão com uma borda azul em volta, isto aparece em todos os navegadores e você não sabe como retirá-los. Webmasters mais experientes provavelmente já sabem retirá-los. Se você, assim como eu, se deparou com o problema de como retirar o sublinhado dos links e a borda azul das imagens, seus problemas acabaram. É possível fazer isto com código HTML (Hyper Text Markup Language) e/ou Folhas de estilos em cascata (CSS - Cascade Style Sheet).
HTML (Hyper Text Markup Language) é a linguagem (código) usada para criar páginas Web.
Folhas de estilos em cascata (CSS - Cascade Style Sheet) é a linguagem (código) usada para modificar a aparência das páginas Web.
Escolha o código abaixo que mais se adequa com as suas necessidades, copie e cole no seu código:
HTML (Hyper Text Markup Language) é a linguagem (código) usada para criar páginas Web.
Folhas de estilos em cascata (CSS - Cascade Style Sheet) é a linguagem (código) usada para modificar a aparência das páginas Web.
Escolha o código abaixo que mais se adequa com as suas necessidades, copie e cole no seu código:
Código para retirar a borda das imagens no Blogger
1. Folha de estilo (CSS) aplicada à página inteira
Copie e cole o código abaixo dentro da TAG <HEAD></HEAD>:
Opção A: Código para retirar o sublinhado dos links e a borda das imagens:
<style type="text/css">
A:link {text-decoration:none}
A:visited {text-decoration:none}
A:active {text-decoration:none}
A:hover {text-decoration:none}
a img { border-width:0;
}
</style>
Opção B: Código para retirar a borda das imagens no Blogger:
Procure este trecho no código HTML do seu blogue na aba Modelo, Editar HTML.
.post img {
margin-top:0;
margin-$endSide:0;
margin-bottom:5px;
margin-$startSide:0;
padding:4px;
border:1px solid $borderColor;
}
Substitua o "1" em "border:1px solid" pelo 0. Observe:
.post img {
margin-top:0;
margin-$endSide:0;
margin-bottom:5px;
margin-$startSide:0;
padding:4px;
border:0px solid $borderColor;
}
Código para retirar o sublinhado dos links no Blogger:
Procure este trecho no código HTML do seu blogue na aba Modelo, Editar HTML.
/* Links
----------------------------- */
a:link {
color: $mainLinkColor;
}
a:visited {
color: $mainVisitedLinkColor;
}
a:hover {
color: $mainVisitedLinkColor;
}
a img {
border-width:0;
}
Acrescente "text-decoration: none;", salve e pronto. Observe:/* Links
----------------------------- */
a:link {
text-decoration: none;
color: $mainLinkColor;
}
a:visited {
text-decoration: none;
color: $mainVisitedLinkColor;
}
a:hover {
text-decoration: none;
color: $mainVisitedLinkColor;
}
a img {
border-width:0;
}
2. Folha de estilo (CSS) aplicada somente à própria tag
Copie e cole o código abaixo dentro da TAG <IMG> do seu link:
Código para retirar o sublinhado dos links: style="text-decoration: none"
Código para retirar a borda das imagens: style="border-width: 0px;"
Código para retirar a borda das imagens no Blogger: style='border: 0px; padding: 1px;'
3. HTML e Folha de estilo (CSS) aplicado somente à própria tag
Copie e cole o código abaixo dentro da TAG <IMG> do seu link:
Código para retirar a borda das imagens: border="0"
Copie e cole o código abaixo dentro da TAG <IMG> do seu link:
border="0" style='border:0px;padding:1px;'Pronto! Salve as modificações e note que o sublinhado de todos os links dos artigos não existem mais.
Postagens
Pergunte, responda, discuta, comente, opine! Eu quero saber a sua opinião!
ResponderExcluirGostei! Toda vez que eu crio um blog no Blogspot eu visito esse blog para pegar esses códigos! Axu que nessa semana já vim aqui umas 5 vezes. Foi bom vc ter atualizadu o post... Valew!
ResponderExcluirObrigada!
ExcluirQue bom que você gostou! O conteúdo deste blogue é feito pensando em seus leitores mesmo! No futuro todos os posts serão atualizados e outros serão criados visando a excelência, a qualidade e a relevância.
ResponderExcluirValeu mesmo esse tutorial! Procurei em diversos lugares antes e não tinha resolvido o problema de uma borda azul maldita que apareceu quando instalei um novo template. Já estava perto de desistir quando encontrei seu blog, e tudo se resolveu rapidamente e bem.
ResponderExcluirObrigado, e não deixe de postar excelentes tutoriais, adianta a vida de muita gente!!!
Obrigada! Pode deixar! ; )
ExcluirÀ tempos eu não via o blogmania...
ResponderExcluirpassarei a seguir para ñ perder de vista mais.
como fica lindo o blog sem os sublinhados.
valeu por dar o acabamento abraxxx¨¨O¨¨¨¨O¨¨
Obrigada! Abraços!
Excluir@Pipocadebits: Esta borda azul é horrível mesmo! Que bom que você encontrou o meu blogue antes de desistir! Ela acaba com o layout de qualquer template!
ResponderExcluir@Nando for fun: Que bom que você voltou ao Blogmania! Espero que agora você esteja sempre lendo os nossos artigos e prestigiando o Blogmania com a sua presença!
:P
Blogmania
Eu não tinha reparado que eu repeti a expressão "Que bom!" tantas vezes! Que vício de linguagem! Vou tentar me controlar da próxima vez!
ResponderExcluir:P
Blogmania
Nossa!!
ResponderExcluirVocê não sabe como me ajudou ...
Já estava ficando desanimado com este sublinhado horrível.
Fou ficar freguês e vou colocar num link que vou criar mais a noite: "Links Úteis!"
Muito Obrigado.
Gratidão! : )
Excluir@Rubens: O Blogmania está aqui para ajudar sempre que você precisar. Até rimou! Té logo!
ResponderExcluircanal da sua vida, esse cod (; thanks
ResponderExcluirGostaria se for possivel da indicação de onde colocar a assinatura nos posts no blog tipo (entre quais tags): Bjs, by fulana. E se tenho a opção de borda para minhas fotos, como faço para que a assinatura no final dos posts(com figura)não apareça com a borda. Obrigado
ResponderExcluirVlw mesmo, tava caçando ja faz horas, e consegui achar! obrigado!! blog ta perfeito!
ResponderExcluirAté mais
Obrigada! ; )
Excluir