Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

29 novembro 2010

Estilo para os titulos da sidebar

Antes de tudo, preciso avisar que este tutorial serve para os modelos de layout (não testei os novos modelos) e foi usado um template Mínima.

A classe a que pertencem os títulos da sidebar é h2 e no template Mínima existe um trecho do código para h2, que engloba os títulos da sidebar e a data dos posts:

/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;}

Mas você pode dar outros estilos para os títulos da sidebar, inclusive usando imagens e cores diferentes para cada um, bastando acrescentar um pouquinho mais de css.

Sidebar sem estilo:


Primeiro, localize no código CSS, o trecho:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;}

Logo depois, acrescente:

.sidebar h2{   }

é entre as chaves que você irá acrescentar o estilo que pretende dar aos títulos da sidebar. Por exemplo:

.sidebar h2{
font-size: 22px;
color: red;}

resultado:



Você pode acrescentar aqui estilos para a fonte e cores do plano de fundo (ou até mesmo uma imagem para o background). Pode, por exemplo, determinar que a primeira letra de cada titulo seja diferente do restante:

.sidebar h2{
font-size: 17px;
color: #777e95;
font-family: Tahoma;}

.sidebar h2:first-letter {
font-family:Tangerine;
color:#8262ae;
font-size:38px;
font-weight: bold}

resultado:

Posso criar e acrescentar uma imagem de fundo (aqui criei uma imagem 320 x 50):

.sidebar h2{
width: 320px;
height: 50px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png)  no-repeat;
}

resultado:


Note como os títulos não ficaram centrados (estão muito 'para cima'). Então, não basta colocar a medida da imagem, é preciso usar um pouco de padding:

.sidebar h2{
width: 320px;
height: 35px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png)  no-repeat;
padding-top: 15px;}

resultado:

 Veja que eu subtrai de height o valor que coloquei em padding-top.

Mas o titulo ainda está 'grudado' no limite à esquerda da imagem. Preciso usar padding aqui? Não. Basta acrescentar text-indent:

.sidebar h2{
width: 320px;
height: 35px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png)  no-repeat;
padding-top: 15px;
text-indent: 10px;}

resultado:

Agora eu quero usar um ícone diferente para cada título da sidebar. Como expliquei aqui, procure o id de cada widget que acrescentou na sidebar. No meu caso, são:


Anote as ID's e acrescente lá no CSS:

#CustomSearch1 h2{
background: #ccc url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPjWZXr1wI/AAAAAAAAQ9g/5Qkq22EfRUQ/s1600/Find+Search_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Veja que já não vale mais o background que coloquei em .sidebar h2. O que fiz aqui foi colocar uma cor de fundo e o ícone posicionado, 10px de distância do topo do espaço ocupado pelo título e 280px de distância da esquerda, além de uma borda arredondada de 5px (código em vermelho):



Faça o mesmo para cada widget da sidebar e em cada um coloque uma imagem e cor  diferente:
#CustomSearch1 h2{
background: #DAF2FE url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPjWZXr1wI/AAAAAAAAQ9g/5Qkq22EfRUQ/s1600/Find+Search_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px; }

#Profile1 h2{
background: #E3FDB3 url(http://1.bp.blogspot.com/_YGpl3rQPSzI/TPPjxoHvnII/AAAAAAAAQ9k/7oDcQSHmh4A/s1600/Buddy+Chat_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px;}

#Label1 h2{background: #FCF1B4 url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPj1QzXk3I/AAAAAAAAQ9w/kgBQ1cSLbeo/s1600/Tag_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px;}

resultado:
Invertendo a posição do ícone:

#CustomSearch1 h2{
background: #DAF2FE url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPjWZXr1wI/AAAAAAAAQ9g/5Qkq22EfRUQ/s1600/Find+Search_32.png)  no-repeat 4px 10px;
text-indent: 36px;
-moz-border-radius: 5px;
border-radius: 5px; }
Para completar, veja este tutorial no blog Vagabundia, que ensina como usar span para dar estilos diferentes para um mesmo título.

Artigos Relacionados

16 comentários:

Max Martins disse...

Oi, Ariane

Sensacional! Era isso que eu queria fazer.
Antes de mais nada, preciso dizer que li o post mas ainda não testei e que esse comentário é baseado no que andei fazendo.

Como eu disse, ainda não consegui mover a imagem porque faltou alguma coisa no código.
Quando coloco uma cor de fundo, a imagem/ícone some. Quando tiro o código #123456, a imagem volta.
Não consigo deslocar a imagem para direita nem colocando o código "center right". Continua a esquerda.

Tenho um compromisso agora. O que é uma pena, pois não vejo a hora de testar esse tutorial.

Muito obrigado por dividir essa dica.

Abraços =)

Anônimo disse...

Ariane blx, eu já sabia disso pq eu mecho com css, mas minha duvida é outra, eu queria saber por que meu gagdget dos seguidores não e~stão funcionando eu não coloquei nemhuma class nele e não modifique nada , é por que esse blog é novo assim eu não sei pq esse gadgets não ta funcionando nele, me ajuda ?

Aldéryck Riptor disse...

Gostei muito, muito mesmo do tópico. Sua tendência de exemplificar diversas possibilidades nos códigos juntamente com seu respectivo resultado, é uma ótima abordagem didática. Você sem dúvidas tem o dom de ensinar. Parabéns.

Ranulfo disse...

Oi Ariane

Tenho visitado seu blog e noto que tem auxiliado muito outros blogs.

Será que pode me ajudar?
Quero diminuir a distância do menu e das postagens do meu blog.

Agradeço se me der uma ajuda.

abç

ranulfo

http://nadiversidade.blogspot.com/

Ariane disse...

Ranulfo no seu blog existe uma div entre o menu e os posts que se chama 'header-bottom'. Procure por: < div id="header-bottom" style="padding: 10px;" >
e deixe padding com valor = 0

Dulce Miller disse...

"A Melhor mensagem de Natal é aquela que sai em silêncio
de nossos corações e aquece com ternura os corações daqueles que nos acompanham em nossa caminhada pela vida"

Desejo um Feliz Natal pra ti, querida Ariane, cheio de Paz,Amor, Saúde e Amizade!

Beijos n'alma!

Janaína Macedo disse...

Olá, Ariane!
Com esse post pude dar um toque bem delicado ao meu blog. Você tem um jeito todo especial de ensinar! Parabéns!
Um novo ano de muita paz e sucesso para você!
( :

R.Wesley disse...

oi to postando aqui um feliz ano novo

Emerson Melo™ disse...

excelente tutorial obrigado e parabéns pelo site!!

Anônimo disse...

Oi Ariane!

Adorei suas dicas! Era isso que eu estava procurando.
Parabéns pelo Blog!

Orion disse...

Ariane, Muito Obrigado !

Esses tutoriais me ajudaram, apesar que eu já sabia fazer, vi novos truques e maneiras que facilitam. E como de costume, salvei seu post no Word, afinal, decorar tudo assim é meio complicado.

Abraços, visite o blog da minha mãe cujo template eu fiz (meu primeiro), ficarei feliz.

Obrigado novamente .

Orion disse...

Desculpe, fui entrar na minha google account e esqueci de escrever o endereço do blog: bmaryanne.blogspot.com

Obrigado.

J. Rubens Alves disse...

Muito bom gosto no seu Blog e conhecimento sobre o assunto.
Respostas obbjetivas.
Gostaria de saber como se constrói um navbar como o seu, com imagens, etc... não tenho muita afinidade com a construção técnica do blog. Grato
www.motivandocomespiritualidade.blogspot.com
ou
jralborges@hotmail.com

J. Rubens Alves disse...

Muito bom gosto no seu Blog e conhecimento sobre o assunto.
Respostas obbjetivas.
Gostaria de saber como se constrói um navbar como o seu, com imagens, etc... não tenho muita afinidade com a construção técnica do blog. Grato
www.motivandocomespiritualidade.blogspot.com
ou
jralborges@hotmail.com

Mwana Ngangu Na Bulungu di Mpindi disse...

tentei mudar de template e com isso ao trabalhar no frontpage como editor, estraguei,e nao consigo repor o blogue, que faço, criar outro blogue.tenho o template preferido, mas nao sei que instruçoes devo mudar.

Alisson Lopes disse...

Ariane, tudo bem? sigo os passos que você postot para alterar o sidebar de meu blog, mais infelizmente não estou consiguindo altera-los, porque!? meu blogger é a versão nova!

por favor me ajude:

e-mail: alisson.tur@hotmail.com
beiramarteturismo@gmail.com

Postar um comentário

Os comentários são moderados.