MASIGNCLEAN101

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:

Books icon

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

Music icon Stats icon Heart icon
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
Compartilhe esse artigo!
Marcus Vinicius
escreve para o Mundo Informal sob a licença Creative Commons BY-SA 3.0. Você pode usar e compartilhar este conteúdo desde que credite o autor e veículo original do mesmo.
Seja livre para expor seu pensamento!

Se preferir, antes leia nossa política para comentários...
Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!