Mostrar icones no lugar de marcadores específicos no Blogger

Neste tutorial Blogger, você vai aprender a exibir ícones ou qualquer imagem específica para qualquer marcador/categoria abaixo dos títulos do seu blog. 

Por exemplo, se estes são os quatro principais temas/categorias do seu blog: Música, Dicas de Namoro, Finanças e Livros, em seguida, por exemplo, para posts sobre resenhas de livros que você pode mostrar este ícone abaixo do seu título da postagem automaticamente:

O mesmo para postagens sobre música, finanças, ou dicas de namoro, poderá ser exibido os ícones abaixo:
  

Instruções para implementar esse hack no seu blog:

ATENÇÃO 1: Se você quer mostrar o mesmo ícone abaixo para todos os marcadores usados, então siga este outro tutorial que preparamos acessando este link.
ATENÇÃO 2: Você já deve ter algumas categorias no seu blog para usar esse hack.

1° passo:

Faça login no Blogger, acesse Modelo -> Editar HTML.

2° passo:

Encontre usando (CTRL+F) este código em seu editor de template Html:

<div class='post-header-line-1'/>

e imediatamente ABAIXO/DEPOIS dele, cole este código:

<!--LABEL-SPC-ICON-STARTS-->

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == &quot;SEU_MARCADOR_#1&quot;'>

LINK PARA A IMAGEM APARECE AQUI

</b:if>

</b:loop>

<!--LABEL-SPC-ICON-STOPS-http://bloggerstop.net-->

Se você quer mostrar aqueles ícones mostrados acima para quatro categorias, assim como mostrado no exemplo, use o código abaixo:

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == &quot;SEU_MARCADOR_#1&quot;'>

LINK PARA A IMAGEM APARECE AQUI

</b:if>

<b:if cond='data:label.name == &quot;SEU_MARCADOR_#2&quot;'>

LINK PARA A IMAGEM APARECE AQUI

</b:if>

<b:if cond='data:label.name == &quot;SEU_MARCADOR_#3&quot;'>

LINK PARA A IMAGEM APARECE AQUI

</b:if>

<b:if cond='data:label.name == &quot;SEU_MARCADOR_#4&quot;'>

LINK PARA A IMAGEM APARECE AQUI

</b:if>

</b:loop>

Substitua o código na cor VERMELHA com o nome exato de seu marcador (incluindo o espaço " " entre as duas palavras). E substitua o texto na cor VERDE com o link para o ícone que você quer usar. Porr ex.: Para usar os livros mostrados acima como exemplo, substitua o texto na cor verde com o código abaixo:

<img src="http://i49.tinypic.com/2elukh4.jpg" alt="Book Reviews"/>

Finalmente salve o template.

Fonte: BloggerStop

Share This :