Nível: Iniciante
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:
Copie e cole o código abaixo dentro da TAG <IMG> do seu link:
border=”0″ style=’border:0px;padding:1px;’
1. Folha de estilo (CSS) aplicada à página inteira
Copie e cole o código abaixo dentro da TAG <HEAD></HEAD>:
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>
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 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″
Imagem: Vivaotux
Updated 24/04/2009: Margarete
Updated 01/03/2009 (links): Gregori Pavan
Updated 01/03/2009 (imagem): Gregori Pavan
Código para retirar a borda das imagens no Blogger:
Procure este trecho no código HTML do seu blogue na aba Layout, 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;
}
Pronto! Salve as modificações e note que as bordas de todas as imagens dos artigos não existem mais.
Código para retirar o sublinhado dos links no Blogger:
Procure este trecho no código HTML do seu blogue na aba Layout, 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;
}
Pronto! Salve as modificações e note que o sublinhado de todos os links dos artigos não existem mais.
Margarete
@Rubens: O Blogmania está aqui para ajudar sempre que você precisar. Até rimou! Té logo!
Nossa!!Você 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.
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!:PBlogmania
@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!@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!
Blogmania
À tempos eu não via o blogmania…passarei a seguir para ñ perder de vista mais.como fica lindo o blog sem os sublinhados.valeu por dar o acabamento abraxxx¨¨O¨¨¨¨O¨¨
Valeu 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.Obrigado, e não deixe de postar excelentes tutoriais, adianta a vida de muita gente!!!
Que 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.
Gostei! 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!
Pergunte, responda, discuta, comente, opine! Eu quero saber a sua opinião!