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

25 abril 2011

Colocar imagem nos títulos da sidebar - Novos Modelos

Este tutorial se aplica aos novos modelos de templates (Designer de Modelo).

Colocar uma imagem junto aos títulos dos widgets da sidebar nos novos modelos do Blogger é bastante simples e isso pode ser feito através do painel Designer de Modelo.

1- Clique no link Design e depois em Designer de Modelo;
2- Já no painel escuro que se abre, clique em Avançado (última opção do menu à esquerda);
3- Clique em 'Adicionar CSS' (também última opção da lista);
4- Na caixa em branco que se abre, acrescente o seguinte código:
.sidebar .widget h2{background: url(aqui a url da imagem) no-repeat center right; padding: 10px 0px;}

center right determina que a imagem apareça à direita do título na sidebar, como na imagem abaixo (estrela):

Imagem da estrela à direita do título 'Lista 01'

Note que ao inserir o código CSS a visualização do resultado é imediata. Para salvar, basta clicar em Aplicar ao Blog

Você pode salvar sua imagem no próprio Blogger (Picasa) seguindo estes passos:

1- Clique em Nova Postagem e hospede a imagem já salva em seu computador, dentro da área do post;

 2- Clique em Editar HTML, copie a url da imagem e transfira para o código acima (no lugar de 'aqui a url da imagem');
 
3- salve o post como Rascunho. Você poderá também excluir esta postagem posteriormente (sem clicar na opção de excluir a imagem).

Neste exemplo, além de acrescentar a imagem, coloquei uma borda dupla abaixo do título:


E o código acrescentado foi:

.sidebar .widget h2{background: url(http://4.bp.blogspot.com/-BMkR1jw_tVo/TbVcNgzWq1I/AAAAAAAATRw/__D2bm8Vf8w/s1600/star.png) no-repeat 99% 0%; padding: 8px 0px 2px;border-bottom: 3px double #fff; margin: 3px 0px; }
Se você quiser acrescentar imagens diferentes para cada widget, é preciso primeiro saber o nome que cada um recebe. Para isso, clique em Editar HTML e procure no código do template
trechos semelhantes a:
<b:widget id='CustomSearch1' locked='false' title='Pesquisar' type='CustomSearch'/>


o modelo será sempre assim, iniciando por <b:widget id= e o que vier logo depois, entre aspas, é a id do elemento que foi acrescentado na sidebar; neste caso, CustomSearch1, que é o widget de Pesquisa. Agora que já sei a id correta, volto para Designer de Modelo e em Avançado -> Adicionar CSS, coloco o seguinte código:
#CustomSearch1 h2{background: url(url da imagem) no-repeat 99% 0%;padding: 18px 0px 5px;}

Resultado:
Uma imagem para cada widget

Note que no primeiro caso que expliquei lá no começo do tutorial, determinamos estilo para todos os títulos da sidebar, com .sidebar .widget h2 e neste último caso estamos especificando um widget em particular.O que foi determinado no primeiro caso prevalecerá sobre todos os outros e por isso a borda branca aparece abaixo do título. Caso não queira que a borda apareça em um determinado widget, basta acrescentar border:none;

Artigos Relacionados

17 comentários:

Criando & Causado disse...

Valeu!

tamiresu disse...

adorei, otimo tutorial me ajudou muito *-*

.:: Manhosinha ::. disse...

ameiii

Anônimo disse...

uau gostei muito valeu!!!

Minotauro disse...

a iamgen tem que ser de qual tamanho?

Anônimo disse...

valeu mesmo, tava quebrando a cabeça já...

Gabriel disse...

Eu fiz tudo certinho mais não deu certo, eu só tenho uma duvida:
épara colocar o URL em parêntes ou não?

000 disse...

Mas fácil do que eu imaginava! Muito obrigado pela dica. Sucesso.

Pâmela Fashion hair disse...

Por favor já vasculhei todas as postagem sobre widgets mais ainda não consegui solucionar o meu problema, estou modificando o template "Simple" do próprio blogger mais os widgets ficam muito longe da margem esquerda e utrapassam a margem direita se puder me ajudar ficaria muito grato. O template esta no endereço http://pamelablogdeteste.blogspot.com/ tentei postar um comentário anterior mais deu erro de pagina então não sei se foi enviado mais se tiver outro comentário parecido me desculpe. Parabéns pelo blog e já agradeço por todas as dicas que sempre foram muito uteis.

M.S disse...

Boa noite, gostava de colocar imagens no cabeçalho ( debaixo do título do meu blog ) como é que faço?

Obrigada

Miguel_LPU disse...

Vlw, vc é fera :D

Anônimo disse...

olá como faço para c9olocar a imagem no cabeçalho ( debaixo do título do meu blog ) ?agradeço muito .

Quem sou disse...

Muito bom, excelente post.....

Anônimo disse...

me ajudou mesmo poxa muito bom o post agora tirei a duvida do ano

Shailesh Tripathi disse...

Nice theme i'm gonna use it on my next site. I loved the layout and design of the site. Share it to each other is my current website and I am constantly conscious of it's design factor.

Anônimo disse...

arianne pode me ajudar como colocar imagem no cabeçalho de data do blog porque eu vi uma vez mais não me lembro como fazer

Daniel Clós disse...

É possível colocar a imagem atrás do título do sidebar? Que código devo usar?

Postar um comentário

Os comentários são moderados.