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).

16 dezembro 2007

Cor ou imagem nos titulos da sidebar

Para colocar cor ou mesmo uma imagem nos títulos da sidebar, procure este trecho do código do seu template (lembrando sempre que todos os tutoriais são feitos baseados nos códigos do Mínima, do Blogger - sendo assim, é normal que existam diferenças entre o que apresento aqui e seu próprio template)

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

acrescente abaixo:

.sidebar h2{
color: $sidebartextcolor;
line-height: 1.5em;
background: #000000;
margin: 0px;
padding: 8px 0 0 15px;
text-align: center;
}

Se no seu template já existe este trecho do código, é só colocar background: (valor da cor); e ter certeza de que margin:0px;. Padding afasta o título do topo da coluna - você pode alterar este valor e ir visualizando, até que fique como desejado.

Se você deseja inserir uma imagem, é só colocar:
  • se a imagem tem as mesmas dimensões estabelecidas para .sidebar h2:
    background: url(link da imagem) no-repeat;
  • se a imagem for menor e você deseja que ela se repita:
  • background: url(link da imagem) repeat-x;

Artigos Relacionados

22 comentários:

helio jenné disse...

Olá Ariane, tudo bom?
Fui convidado a participar de um meme para indicar cinco blogs que eu gosto de frequentar e lembrei de indicar o seu. Espero que você aceite a minha indicação. Para ler o convite acesse o link http://heliojenne.blogspot.com/
Um abração, sucesso e muita saúde!

Unknown disse...

Oi Ariane!

Linkei você no meu blog! Depois passa lá pra dar uma conferida.
Beijos, e, mais uma vez, valeu pelas dicas super-úteis!

http://dramabarroco.blogspot.com/

=)

Planet Web disse...

Será que poderia me dar uma luz, já tentei de tudo e até agora não funcionou, a cor ou imagem não fica atrás do texto por nada no mundo, o texto sempre começa grudado na cor ou imagem.
To colocando desta forma

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
padding-top: 10px;
padding-bottom:20px;
background: #000000;
margin: 0px;
padding: 20px 0 0 0;
text-align: center;
color: $sidebartextcolor;
height: 4px;

}


Meu e-mail: brito.tiagos@gmail.com

Valeu

Ariane disse...

planet web, padding está aparecendo duas vezes: são 20px para bottom e 30px para o topo! E só tem 4px de height (altura total). Precisa mudar estes numeros. Coloca um Height de 40px, e padding assim:

padding: 20px 0px 4px 0px;

testa e conta se ficou bom. Abraços!

Planet Web disse...

iuhuuuuuuuuuu, nanananananá,nanananananá. Valeu Ariane, funcionou certinho valeu pela ajuda, não aguentava mais mexer e cada vez piorar.

Obrigado mesmo.

Tiago Brito

Caio Vinicius disse...

O conteudo do post ta invadindo o titulo
olha só como ta

http://img89.imageshack.us/img89/9894/printblogar2.jpg

como faço para afastar?

Sempre Loka disse...

Olá Ariane...
voce poderia me ajudaar?
veja meu blog
http://nandamuiloka.blogspot.com
..
entao.. o fundo das sidebars estao em branco...
vc sabe onde mudo isso?..
ja tentei colocar algumas coisas daqui mas n deu certo n.
se vc kizer posso lhe mandar o template que estou usando.
valeoz. bjus

Anônimo disse...

Olá Ariane,
o que eu necessitava era que os títulos tivessem uma descrição quando passo com o rato, é que deste modo ficam acessíveis às pessoas com deficiência visual que usam leitor de tela. Já agora gostaria de fazer o mesmo para a linkbar.
Obrigado!
Luís Melo

Unknown disse...

olá

eu não entendi nada
o meu blog é do tipo "simple blog bleck"
você poderia por favor demonstrar em uma imagem?
ou me explique de um modo mais fácil pois eu quero colocar mto urgente uma imagem no título do meu blog
seria ótimo se você me ajudasse
mto obrigado

Personagens de Naruto disse...

olá

eu já tentei um montão de veses e a imagem não sai

eu puis assim ó

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
background:/* C:\Meus documentos\persnaruto.jpg */

Ariane disse...

Naruto, pudera que não dá certo...vc tem que hospedar a imagem, no ImageShack, por exemplo, e depois colocar o link alí. Dá umas lidas nos tutoriais, ok?

Anônimo disse...

Oi Ariane,
Fiz conforme vc disse no tutorial e deu tudo certo no Firefox. Quando visualizo o meu blog pelo IE7 as imagens não aparecem na sidebar.
O que fazer?

Selene disse...

Eu fiz uma pergunta ontem mas não consegui achar onde está, ai ai ai rsrs De qualquer forma tenho outra dúvida: Os títulos dos meus gadget não aparecem mesmo q eu use html dentro da área de texto, tem solução isso? Essa eu vou achar pq anotei o link rsrs :D

Haka disse...

Olá.
Preciso de sua ajuda. Não estou conseguindo mudar a cor dos links visitados e dos da sidebar.
Tem como me ajudar?
Obrigada!

Ariane disse...

Haka, dá uma olhada nesta postagem: http://templatesparanovoblogger.blogspot.com/2008/09/como-fazer-um-template-para-o-blogger_22.html

pode ser que ajude. abraços!

Unknown disse...

olá ariane eu adorei a dica e funcionou mas tipo quiria colocar a imagem do lado direito e não no esquerdo pois duficulta a leitura se vc puder mi ajudar eu agradeço muito o quanto antes melhor preciso fazer isso rapido =D
aqui é o blog
www.obanproject.blogspot.com

Anônimo disse...

Ola,Ariane estou gostando muito do seu espaço e aos poucos, aprendendo algumas coisinhas,gostaria se possível, que vc desse-me uma explicação de como eu poderia mudar as cores do sidebar, através do painel de fontes e cores, acho que deu prá entender o que estou querendo, desde já agradeço pela atenção, felicidades,Silma, SSA-BA.

Anônimo disse...

Ariane mais uma vez eu estou aqui rs! Tipo assim o background ficou também na data do post eu queria somente no titulo da sidebar como posso fazer isso rs! O cara xato hahahaha!!!

Ah! E quando eu consegui fazer com que o mesmo ficasse só no titulo da sidebar as fontes ficaram enormes até a da data do post, tipo assim eu queria colocar menor a fonte da data do post e sem background, almentar o texto do titulo da sidebar se puder dar mais essa ajuda eu ficarei muito grato mais uma vez xD.

Anônimo disse...

Utilizei a dica aqui no meu blog e deu certo, recomendo, dá um visual legal, mais bonito. Obrigado!

Universo Artístico! disse...

Olá Ariane!

Meu nome é Hosana, estava fazendo pesquisas para personalizar meu blog e encontrei o seu, que por sinal é muito bonito!
Bom, estou postando por aqui de forma que vc possa me auxiliar no esclarecimento de algumas dúvidas que tenho!
Gostaria muuuuuuito mesmo que, se possível for, vc me explicasse "O que é Sidebar?". Estou um pouco por fora de certos detalhes que podemos colocar num blog, por isso estou fazendo muitas pesquisas, mas agora no momento o que eu gostaria mesmo é de saber sobre Sidebar!!! O que é, qual a finalidade, como colocar, enfim...tudo o que vc souber me informar!!!
Ficaria muito feliz se vc puder esclarecer essas minhas dúvidas!
Desde já agradeço pela sua atenção

Um abraço!!

Karen Moraes disse...

Hooy Ariane . No meu outro blog, eu tinha feito isso e deu super certo no modelo viagem. No meu não tinha /* Sidebar, então coloquei no /*Content. Mas nesse blog novo, estou usando o modelo Simples e já tentei de tudo mas não adianta, olha só:
/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}

a:link {
text-decoration:none;
color: $(link.color);
}

a:visited {
text-decoration:none;
color: $(link.visited.color);
}

a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent $(body.background.gradient.tile) repeat scroll top left;
_background-image: none;
}

.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: $(body.background);
$(body.background.override)
}

.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: none;
}

.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

margin-bottom: 1px;
}

.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}

$(content.background.color.selector) {
background-color: $(content.background.color);
}
P.s.: não tem /* Sidebar Content, o que eu faço?? Me ajuda pf !

Anônimo disse...

Ariane,
Perdoe-me a "má lingua" mas fiquei meio pê da vida por ter encontrado na net uma postagem idêntica a esta sua (copiada e colada), sobre cor/imagem na sidebar. O link para a postagem de que falo é:
http://sandrossoares.forumeiros.com/t79-modificar-cor-ou-imagem-nos-titulos-da-sidebar-no-blogger
Imagino o seu esforço e dedicação para com seu blog e seus leitores, e assim foi que não achei nada "simpático", para dizer o mínimo, esbarrar em um plágio como este, mesmo sendo uma postagem do ano de 2008. É lastimável...
AnyaSoh

Postar um comentário

Os comentários são moderados.