[Blogger - Customização] - Adicionando ícones natalinos nos títulos dos artigos

Olá querido leitor, o natal e o ano novo estão chegando, e você já começou a montar e enfeitar a sua árvore de natal? E o seu querido blog, já começou a customizá-lo para o natal? Não? Então que tal adicionar alguns ícones natalinos à ele para deixá-lo mais festivo e aconchegante neste natal e ano novo?

A querida leitora Cris, me pediu para ensinar como adicionar ícones natalinos no blog, até então eu não tinha planos de criar nenhum artigo sobre o natal, mas depois que ela fez o pedido eu resolvi criar pelo menos um artigo — mas quem sabe até o natal não saem outros! Neste artigo veremos como colocar ícones natalinos à frente dos títulos dos artigos. Você pode ver um exemplo de como ficará a customização, visitando nosso blog de testes.

INFORMAÇÃO: eu utilizo como base para os artigos de customização, os templates disponíveis no Designer de modelo, então, caso você esteja usando um template não-nativo do Blogger, talvez você não encontre os códigos que serão citados ou tenha que fazer alguns ajustes para que a customização se encaixe ao seu template.

Colocando ícones de natal antes do título dos artigos no Blogger


1. Primeiro de tudo, você deve encontrar uma imagem que queira usar e que combine com o seu blog. Abaixo, há uma imagem de exemplo do pacote de ícones natalinos que eu baixei para criar este artigo.


Caso você queira baixar este mesmo pacote de ícones para utilizar em seu blog, basta clicar neste link e fazer o download. Mas você pode usar qualquer outra imagem que quiser, ou criar suas próprias imagens para que combinem com o template do seu blog.

2. Após ter encontrado uma imagem que lhe agrade, hospede-a no seu servidor ou em algum outro serviço de hospedagem de imagens — eu recomendo o Picasa Web.

3. Após ter hospedado a imagem, copie e salve o link da mesma no bloco de notas.

4. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

5. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

<h3 class='post-title entry-title'>

6. O código que foi citado acima, serve apenas como localização, nós não iremos mexer nele. Abaixo deste código, você verá provavelmente 3 ou 4 códigos (depende do template usado) como o mostrado abaixo.

<data:post.title/>

Esse código, é o responsável por adicionar o nome dos artigos em seus devidos lugares. Você deve adicionar o código que mostrarei abaixo, antes do código que foi mostrado acima.

<img src="link-da-imagem" border="0" alt="" align="absmiddle"/>

Substitua a parte que foi destacada em vermelho, pelo link da imagem que você salvou no bloco de notas. Em nosso blog de testes, reduzimos a imagem para o tamanho de 32x32 pixels, mas você pode usar a imagem no tamanho que quiser. Para que não haja confusão, abaixo segue um exemplo de como o seu código deverá ficar, mas como eu disse, os códigos podem variar de template para template.

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<img src="link-da-imagem" border="0" alt="" align="absmiddle"/> <a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<img src="link-da-imagem" border="0" alt="" align="absmiddle"/> <a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<img src="link-da-imagem" border="0" alt="" align="absmiddle"/> <data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>


No exemplo acima, destaquei em azul o código que usamos como localização, destaquei em rosa o código que faz com que o título apareça nos artigos e destaquei em vermelho o código que deve ser adicionado.

7. Após ter adicionado o código que foi destacado em vermelho, clique em Visualizar para ver se a imagem está aparecendo corretamente no título dos seus artigos. Como eu falei, se você estiver usando um template não-nativo do Blogger, talvez seja necessário que você faça alguns ajustes para que a imagem se encaixe no seu template.

8. Se a imagem estiver aparecendo corretamente no título dos seus artigos, clique no botão Salvar modelo. Pronto, seu blog agora estará mais aconchegante para o natal. E quando o natal passar, basta substituir o link da imagem natalina pelo link de uma imagem de ano novo, ou remover o código do seu blog.

Espero que você tenha gostado. E se você tem ideias de outras customizações natalinas, ou qualquer outro tipo de customização que possa ser feita no blog, mas não sabe como fazê-la, envie-as para nós através do formulário de comentários.

Atualização — 30.09.2011 às 17h52
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Deixe uma resposta!