Cabeçalho

O Blog Html e Css tem como objetivo esclarecer todas as tuas dúvidas sobre design, codificação e personalização de blogs. Pede um tutorial, ou tira as tuas dúvidas. Estou aqui para te ajudar e faço-o de bom grado. Sugestões e perguntas são sempre bem-vindas. Obrigado pela visita e volta sempre.
- Zé Pedro Silva.

29/07/2013

Como Fazer um Template - Parte 4

Esta é a última parte do big tutorial "Como Fazer um Template", espero que tenham gostado de todo o tutorial e que o aproveitem. Se tiverem dúvidas, não hesitem em pergunta na aba "Pergunta".

Para terminares de fazer o teu template, faltam apenas alguns pequenos ajustes. Agora vamos personalizar a cor dos link (hiperligações) do blog.

PERSONALIZAR OS LINKS DOS POSTS
No painel, vai a design → editar html → aperta F3 e procura pela seguinte tag: 
a:link {
text-decoration:none;
color: #ff9900;
}
a:visited {
text-decoration:none;
color: #b87209;
}
a:hover {
text-decoration:underline;
color: #ff9900;
}
Depois de achares a tag acima, substitui-a pela tag abaixo, e altera-a conforme os comentários à frente de cada linha de código.
a:link {
text-decoration:none; /*transformação do texto*/
color: #ff9900; /*cor do link em estado normal*/
}
a:visited {
text-decoration:none;  /*transformação do texto*/
color: #b87209; /*cor do link visitado*/
}
a:hover {
text-decoration:none; /*transformação do texto*/
color: #ff9900; /*cor do link em estado hover*/
}

PERSONALIZAR OS LINKS DAS MINIAPLICAÇÕES
No painel, vai a design → editar html → aperta F3 e procura pela seguinte tag: 
.sidebar .widget a:link {
color: #cccccc;
text-decoration: none;
}
.sidebar .widget a:visited {
color: #cccccc;
}
.sidebar .widget a:hover {
color: #cccccc;
text-decoration: underline;
}
Depois de achares a tag acima, substitui-a pela tag abaixo, e altera-a conforme os comentários à frente de cada linha de código.
.sidebar .widget a:link {
color: #cccccc; /*cor do link em estado normal*/
text-decoration: none; /*transformação do texto*/
}
.sidebar .widget a:visited {
color: #cccccc; /*cor do link visitado*/
}
.sidebar .widget a:hover {
color: #cccccc; /*cor do link em estado hover*/
text-decoration: none; /*transformação do texto*/
}

PERSONALIZAR OS LINKS DO RODAPÉ DO BLOG
No painel, vai a design → editar html → aperta F3 e procura pela seguinte tag: 
.footer-inner .widget a:link {
color: #ff9900;
text-decoration: none;
}
.footer-inner .widget a:visited {
color: #b87209;
}
.footer-inner .widget a:hover {
color: #ff9900;
text-decoration: underline;
}
Depois de achares a tag acima, substitui-a pela tag abaixo, e altera-a conforme os comentários à frente de cada linha de código.
.footer-inner .widget a:link {
color: #ff9900; /*cor do link em estado normal*/
text-decoration: none; /*transformação do texto*/
}
.footer-inner .widget a:visited {
color: #b87209; /*cor do link visitado*/
}
.footer-inner .widget a:hover {
color: #ff9900; /*cor do link em estado hover*/
text-decoration: none;  /*transformação do texto*/
}

ÚLTIMOS AJUSTES
Pronto, o template está quase finalizado. Agora vamos aos últimos ajustes do template. Vamos começar por tirar tudo o que está no rodapé das postagens (e a data do post).
No painel, vai a esquema → mensagens de blogue → editar, e desmarca todos os "quadradinhos" que têm uma setinha.

Para tirares a navbar do blogger, basta seguir esta pequena indicação. 
No painel, vai a esquema → navbar → desativada/oculta.
E pronto *-*, o big tutorial está feito. Espero que tenham gostado, pois fi-lo com todo o carinho e dedicação. Se tiverem alguma dúvida, perguntem na aba "pergunta". O big tutorial foi todo feito por mim, por favor NÃO REBLOQUES, E SE USARES CREDITA.

0 Comentários

« »