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

07 julho 2008

Uma imagem para cada item da sidebar

Vou ensinar colocar uma imagem diferente para cada título da sidebar.

Após instalar na Sidebar as widgets (Elementos de Página, como listas de links, imagens, slide, etc,) vá em Editar HTML, e procure pelo trecho do código html da sidebar, onde estão os widgets que você colocou, como na imagem:
 

Anote o nome de cada id dos widgets (sublinhado em vermelho) e acrescente no código CSS, acima de ]]></b:skin>:

#id do widget h2{background: url(link da imagem) center left}

por exemplo:

#Image5 h2{background: url(link da imagem) center left;}

para alinhar a imagem à direita, coloque center right. Se desejar usar uma cor e imagem diferente para cada título, basta:

#Image5 h2 {background: #ccc url(link da imagem 1) center left}
#Image4 h2{background: #000 url(link da imagem 2) center left}

Você pode posicionar as imagens de outras maneiras também:
top left, bottom left, top right, bottom right.

Artigos Relacionados

23 comentários:

Melo disse...

aaaah, eu fis tudo e não consegui, essa dica é a mais legal de todas para mim, mas nao deu certo! vou tentar mais umas mil vezes se ñ der vo na comu do orkut te encomodar mais um pouco. Mas ótimo trabalho, obrigado por sempre estar ajudando! Bejos

Anônimo disse...

nossa
virei fã deste site
tenho 14 anos e ainda estou conhecendo a arte de blogar a fundo,afinal,ter um blog(na minha jovem opiniao) nao eh apenas passar informaçao e ideias aos leitores,mas fornecer um belissimo visual e ao mesmo tempo ser organizado e ter bastante recursos,uma coisa que este blog tem
Voce tah de parabens!!!!!!!!!!

Johnny disse...

Eu estava à procura dessa informação há muito tempo!

Júnior Leite disse...

eu fiz tudo direitinho e deu certo, mais quando eu fui colocar um template novo no meu blog eu tentei colocar de novo e naum deu...
será que é o template?
Olha ae meu site!
http://brasfoot-downloads.blogspot.com,
me manda um email dizendo a falha por favor.
brasfoot.downloads@gmail.com

GAMA disse...

um probleminha e que a imagen que agente usa nas sidebar ele n cobre --' e kuando agente n coloka nome nos elemento ele fika por tras do conteudo das sidebar ¬¬

Uzumaki Dede disse...

O mesmo aconteceu comigo (refiro ao que o GAMA disse) utilizei uma imagem do mesmo tamanho, minha ídeia era por um personagem (tenho um blog de animes) em cada sidebar e ai quando vou ver, aparece apenas a imagem "padrão", teria algum jeito de esconder essa imagem "padrão" ? Ou alguma outra coisa ?

Abraços,
André ^^

Dany disse...

OI vc me ajudou bastante,sou nova mo mundo dos blogs,mais vou tirar minhas dúvidas aqui.
bjs

Anônimo disse...

Olá! Quero dizer que to sempre visitando teu blog e pegando tuas dicas! Quero colocar o link do teu blog no meu mas não achei aqui... x) Podes me passar!? Um beijo!

GAMA disse...

Deesculpe aminha ignorancia na quele coment e que ue n comprendia html antes e agora comprendo melhor o xml do blogger
bem...
respondendo a pergunta do uzumaki dede a unica forma e retirando a imagen padrão do template que se encontra na css da sua sidebar simples assim


bem agora que ja sie como afzer quero pedir muito obrigado pela dica


PERFEITA ME ABRE FRONTEIRAS !

XD

thank's !

Juninho admin disse...

Não achei o lugar do passo numero 1

me adicione por favor! jjbraw@hot !

Ariane disse...

juninho, provavelmente sua widget tem outro nome. use o ctrl+F para encontrar o trecho com maior facilidade

milerfreitas disse...

Arine Como vai? Há algum tempo eu venho ao seu blog em busca de socorro, e muitas vezes consigo o que procuro. Mas desta vez não consegui e por isso resolvi perguntar.

Como faço para que os links externos do meu blog abram em nova janela? Já vi algumas opiniões sobre isto, que é errado e etc. Mas como no meu blog há uma página sobre estudos bíblicos, e coloquei alguns links - ferramentas para o estudo bíblico - Bíblia e dicionário on line, pesquisa de nomes bíblicos e etc. neste caso não é interessante sair da página para usar estes recursos, pois como disse trata-se de uma "ferramenta" auxiliar para o leitor. Então se você puder me ajudar agradeço muitíssimo

Obrigado. milerfreitas@yahoo.com.br

Ariane disse...

Maxmiler: http://templatesparanovoblogger.blogspot.com/2007/12/fazer-com-que-todos-os-links-do-blog.html

Daniel Campos disse...

n consigo encontrar o inicio da 2ª parte
alguem me podia dizer o sitio exacto ou aproximado?

Kyub disse...

Ariane..olá ^^''

Bem, é que ocorreu um problema. Digamos que eu fiz tudo certinho(?³), só que quando eu vou lançar os links das imagens para aparecer bem legalzinho, em vez de aparecer em todas as colunas, só aparece na coluna esquerda o_o' .

bem, eu fiquei verificando o nome das sidebars que eu adicionei, que no caso são seis, só que eu só adicionei mesmo quatro links para saber como ficaria, ai se desse certo eu adicionaria o resto. mas não ficou bom, apesar de eu ter adicionado em alguns códigos da sidebar (div class='link1'), parece que o link aqui (b:if cond='data:title') não esta presente em todos os códigos das sidebars que lá estão adicionadas.

^^'...bem, acho que não fui muito clara, e descupe se atrapalhei ou coisa do tipo, só gostaria alguma forma de ajuda pra essa causa. !!! ._.'

abs \o

Douglas disse...

achei o tuto q eu tava me matando no google pra achar mais naum presto :(
aki eu faço tudo certo mais a imagem q eu boto num aparece
me ajuda.....
tem outro geito??

me add no msn
slipknot_douglasheavymetal@hotmail.com

por favor me add to loko tentando fazer isso

Douglas disse...

pq vc naum publico minha duvida =(

Coração Valente disse...

nao consegui axar esse trecho do passo 1

Coração Valente disse...

nao consegui fazer
me ajudaa fazer por favoor

Unknown disse...

Ariane pode me da uma ajuda?
eu fiz certinho do gieot que ensina no tutorial..
Mais a imagem não aparece...
Porem quano clico com o botão direito do mouse na parte onde éra pa aparece a imagem, e clico em exibir imagem. ele aparece ;O

O que pode ser?

Anônimo disse...

Olá, queria saber se vcs tewm um tutorial para eu colocar uma imagem ao inves só do fundo, queria uma substituição.

Thiago disse...

adorei este tutorial,funcionou certinho ;)

Anônimo disse...

to me matando pra achar o codigo daonde estão os nomes dos widgetes, como eu faço? me ajuda!

Postar um comentário

Os comentários são moderados.