21 de julho de 2010

7

Como colocar bordas no titulo da postagem.

A dica de hoje é para quem deseja colocar bordas no título da postagem. É um efeito interessante pois dá um destaque no título da postagem. Vamos ao tutorial:

VIP lápis

Lembrando que antes de realizar qualquer mudança no template é essencial fazer um backup do seu modelo. Assim se algo der errado, você poderá coltar ao seu antigo modelo facilmente. Se não souber como fazer backup, clique aqui e aprenda a fazer um backup do seu template.

  • Faça login no Painel do blogger
  • Selecione a aba “Design”
  • Editar HTML
  • Procure pelo seguinte código: “.post h3 { (se não encontrar, retire o espaço entre h3 e a chave e tente novamente)

OBS.: Para encontrar o código no seu template, você pode usar as teclas CONTROL + F, bastando depois disso digitar o texto/código que procura no campo de pesquisa que abrir-se-á.

  • Cole após ele o seguinte código:

border-top: 2px solid #a89ffe;
border-left: 2px solid #d301e0;
border-right: 2px solid #01e001;
border-bottom: 2px solid #e02b01;
background: #000000;
margin:.25em 0 0;
padding:0 0 0 8px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Se você quiser customizar as bordas, segue aqui uma lista dos estilos de bordas. Para modificar a borda, basta você substituir a parte do código acima onde tem escrito “SOLID” por algum dos códigos relacionados abaixo, conforme seu agrado:

- solid: borda contínua
- groove: borda entalhada
- dashed: borda tracejada
- dotted: borda pontilhada
- double: borda dupla
- inset: borda em baixo relevo
- outset: borda em alto relevo
- ridge: borda em ressalto

Desvendando o código:

    1. A parte denominada 2px das bordas refere-se à largura das mesmas.
    2. #a89ffe, #01e001 e #e02b01 são as cores
    3. background: #000000 refere-se a cor, que pode ser substituida por uma imagem, se desejado.
    4. Padding: ‘margem’
    5. font-size: tamanho da letra.

Visualize antes de salvar. Se gostar é só salvar o modelo, do contrário bastará limpar as edições.

Facílimo né? Assim são nossos tutoriais e dicas. Todos muito fáceis para que todos possam acessar e fazer em seus blogs.

Seja VIP, receba as novidades no seu email, clique no ícone...
Início

7 comentários:

AmoAndreiaJoias disse...

Oiii
ótima dica! adorei!
bjs

SOSVIP disse...

Amo Jóias: Que bom que gostou. Aqui você encontra muito mais:
http://sosvip.blogspot.com/search/label/Ferramentas%20e%20Dicas%20para%20Blog?max-results=5
Abraço.

Anônimo disse...

Olá, Marcelo.
Cara, o teu blog é ótimo! Bastante diversificado. Este post amplia os meus conhecimentos sobre o que enfoca, e de maneira clara e objetiva. Ah... Mui grato pela proposta de amizade feita via 'Ver!'.

SOSVIP disse...

Assis Sales: Obrigado Assis. O objetivo nosso é exatamente ajudar, divertir e informar, fazendo isso da maneira mais simples e direta possível. Volte sempre.
Abração.

Wallison Oliveira disse...

Olas.. Estou querendo muito colocar bordas nos titulos de minhas postagens para que fique mais facil pro leitor identificar o inicio de cada uma.
POrem estou tendo uma tremenda dificuldade pois nao encontro as referencias (.post h3 {) para que possa inserir o comando.acredito que seja devido ao meu template.utilizo uma opcao do proprio BLogger de nome Blogger Template Style
Name: Travel.. Sera que pode me ajudar com isso??

Meu Mail é wallisonlau@hotmail.com

http://odeclinardosonhos.blogspot.com disse...

Eu fiz td como você mandou mas quando salvo não fica nada diferente.Será que tou errando em algo?

SOSVIP disse...

Ana Costa: Verifica se os códigos aparecem exatamente como descrito no post. Se tudo estiver conforme descrito, veja se não deixou uma aspas, vírgula ou qualquer outra coisa de fora do código, pois tem de ser EXATAMENTE como descrito.

Postar um comentário

Agora você é VIP. A palavra está com você agora. Aproveite e faça seu comentário!
PS.: Se for xingar, ofender ou usar palavras de baixo calão, não perca o seu tempo pois CERTAMENTE excluiremos seu comentário!
Sinta-se a vontade.

Related Posts with Thumbnails