Titulos na barra lateral

Na minha opinião, um titulo na barra lateral que se destaque do resto do texto, nela incluido, facilita bastante a "navegação" na nossa página.
A configuração desses titulos num blog do blogger são normalmente configurados pela tag h2 que é partilhada por outras partes do blog, por exemplo a data do artigo. Resumindo, se quisermos modificar uma parte acabamos por modificar a outra também.

Para que isso não aconteça, podemos adicionar algo mais aos estilos do blog e assim configurar as duas parte independentemente.

Para isso temos que entrar no código fonte do blog e procurar a parte onde estão incluidos os estilos da barra lateral.

/* Sidebar Content
----------------------------------------------- */
Nessa parte procuramos por
.sidebar h2{
e se não existir, criamos esse estilo.
Depois de criada, basta apenas inserir os estilos desejados.
Para dar um exemplo, mostro aqui a configuração dos titulos do meu blog Pensamento pró fundo
.sidebar h2{
-moz-border-radius:5px;
text-align:center;
background: url(http://i482.photobucket.com/albums/rr190/vicioprofundo/navbar4.jpg) top left repeat-x;
margin:0 0 5px 0;
border:1px solid;
padding:0px 0 0 0px;
font:normal bold 100% Calibri, Arial;
color:#eee;
text-transform:uppercase;
}
A explicação para estes estilos é a seguinte:
  • A primeira linha define o arredondamento dos cantos (apenas visível no Firefox) 
  • text-align define que o texto a incluir fica centrado, mas podem ser usadas as variantes left ou right
  • background: define a imagem de fundo que no meu caso é esta . Pode ser usada apenas uma cor em vez de uma imagem e para isso basta que insiram o código da cor desejada logo depois de background: (existe uma tabela de cores neste blog) 
  • margin: define a distancia da área do titulo ao restante conteúdo. No meu caso apenas defini 5px de margem inferior para que o conteúdo do widget não ficasse encostado.
  • border: define o tipo de contorno que desejamos
  • padding: define a distancia entre o texto que inserimos e a borda.
  • font: define o tipo de letra a usar
  • color: define a cor do texto
  • text-transform: define a tranformação do texto. Neste caso usei a transformação em maiusculas.

Depois disto tudo é necessário fechar a chaveta.
O resultado final é este:

3 comentários:

Iscte 72-77 disse...

Olá, não quero ser chata mas.. estas mensagens são muito dificeis....Muitos passos juntos...perco-me no meio. Acho sempre estes artigos tão interessantes qto dificeis.
Acho mesmo que tu sabes demais!! Lembro-me sempre dos livros de culinária que são feitos para quem já sabe fazer todos os pratos.
Ando há que tempos para aprender a colocar uma imagem minha como fundo do blog mas lamentavelmente não chego lá pois com as tuas explicações perco-me...
Sorry mas tinha que te dizer isto...Obg

Anónimo disse...

Quero informar que a dica funcionou 100%!!!

E dizer que essa dica tbm serve para o TITULO DOS POST!!!

Para colocar nos Títulos dos post fiz da seguinte maneira

Retirei algumas partes do código e ficou dessa forma:

.post h3 {
margin-top: 5px;
font-size: 120%;
-moz-border-radius:5px;
text-align:center;
background: url(http://i482.photobucket.com/albums/rr190/vicioprofundo/navbar4.jpg) top left repeat-x;
text-transform:uppercase;
}

Podem conferir no meu blog o resultado
www.humornomundo.blogspot.com

Abraços e parabens!

Anónimo disse...

Como informei no post anterior que havia colocado essa dica no Títulos dos post, agora utilizei da mesma dica para colocar na BARRA DE MENUS!

Gostei muito da dica, me foi bastante útil.

Podem conferir no meu blog o resultado
www.humornomundo.blogspot.com

Abraços e parabéns!

Enviar um comentário

Para esclarecimento de duvidas podem deixar um comentário ou enviar um email para o endereço que está no meu perfil.
Vou tentar responder a todos.

É aconselhável deixar endereço de correio