categorias,  tutoriais

Categorias em imagens no Blogger

12/01/2015

Acho que esse é um dos tutoriais mais pedidos pelo pessoal que usa Blogger!

Aviso: Serão utilizados 3 códigos nesse tutorial, então será necessário que você saiba pelo menos um pouco de HTML para ajustar o código ao seu layout. Eu tentei fazer com que ficasse bem em todos os layouts, mas é inevitável, cada blog tem um layout diferente e personalizado do seu jeito.

Os códigos

Serão 3 códigos:
Código 1: Projeto – É basicamente o texto que fará o navegador interpretar o código e fazer o tutorial funcionar.
Código 2: Estilo – Será o código que vai definir como a imagem das categorias irá ficar. É esse documento que talvez precisará de adaptações suas para que o tutorial funcione perfeitamente no seu layout.
Código 3: Mãos à obra – É o código que você irá colar para que as imagens apareçam em cima dos posts!

Se você quiser pode clicar aqui para baixar todos os códigos

Não se esqueça de fazer um backup do seu template antes de fazer quaisquer modificações no código. Assim, se algo der errado, você pode recuperá-lo exatamente como estava antes. Modelo » Fazer backup/Restaurar » Fazer download do modelo completo

Código 1

Colar este código ANTES de </head>

<script type='text/javascript'>
function lebel_logo(etiqueta) {
imagenes = new Array();
imagenes[1] = "<img src='https://i.imgur.com/CD9mnLm.png' title='Fotografia'/>"
imagenes[2] = "<img src='https://i.imgur.com/CusDOIa.png' title='Maquiagem'/>"
imagenes[3] = "<img src='https://i.imgur.com/QPHopVK.png' title='Música'/>"
imagenes[4] = "<img src='https://i.imgur.com/ONm05ys.png' title='Filmes e séries'/>"
imagenes[5] = "<img src='https://i.imgur.com/PUv9cTa.png' title='Livros'/>"
imagenes[6] = "<img src='https://i.imgur.com/s2WZn23.png' title='Cabelo'/>"
imagenes[7] = "<img src='https://i.imgur.com/cae6XYV.png' title='Moda'/>"
imagenes[8] = "<img src='https://i.imgur.com/hqeTADg.png' title='Cinema'/>"
imagenes[9] = "<img src='https://i.imgur.com/nIesF1z.png' title='Textos'/>"
imagenes[10] = "<img src='https://i.imgur.com/GABYCFV.png' title='Viagens'/>"
if (etiqueta == "fotografia")
{document.write(imagenes[1]);}
if (etiqueta == "maquiagem")
{document.write(imagenes[2]);}
if (etiqueta == "música")
{document.write(imagenes[3]);}
if (etiqueta == "filmes")
{document.write(imagenes[4]);}
if (etiqueta == "livros")
{document.write(imagenes[5]);}
if (etiqueta == "cabelo")
{document.write(imagenes[6]);}
if (etiqueta == "moda")
{document.write(imagenes[7]);}
if (etiqueta == "cinema")
{document.write(imagenes[8]);}
if (etiqueta == "textos")
{document.write(imagenes[9]);}
if (etiqueta == "viagens")
{document.write(imagenes[10]);}
}
</script>
Entendendo o código:
O código em azul é o nome das tags que você deverá utilizar para que a imagem a que ela está ligada (olhe a numeração) apareça nos posts. Já o código em rosa é a URL das imagens que representam cada tag. Então, para personalizar o código de acordo com as categorias do seu blog, você pode alterar o código em azul e o em rosa.

Clique aqui para conferir todas as cores de categorias disponíveis!

Código 2

Esse código é o que talvez precise de modificação no seu layout.
Colar este código ANTES de ]]></b:skin>

.format-icon {float: left;
position: relative;
left:46%;
padding-right:5px;
padding-bottom: 5px;
margin-top: -4px;
clear:both}
Alteração no seu layout: Para que a imagem não fique grudada no título do seus posts, aperte ctrl+f e procure por .post h1 ou .post h3 ou h3.post-title.
Nessa class você adiciona: margin-top: 22px;

Código 3

Colar este código DEPOIS do PRIMEIRO <div class=’post-outer’>

<b:loop values='data:post.labels' var='label'><a class='format-icon' expr:href='data:label.url' rel='tag'> <script type='text/javascript'>lebel_logo("<data:label.name/>");</script></a></b:loop>

Fazendo o script funcionar

Mesmo você fazendo tudo como explicado acima, ainda não será possível ver o efeito funcionando.
Para fazer o efeito do script funcionar, você terá que colocar os marcadores incluídos ao script, ou seja, cada categoria em imagem, ela é divida pelos marcadores destacados em azul no Código, ou seja, se for postar música, coloque o marcador música para ver a imagem nos posts, e assim por diante.

Espero que tenham gostado do tutorial e que ele funcione aí, eu dei os códigos principais, a personalização fica por conta de vocês viu? Alguma sugestão para o próximo tutorial?

48 Comentários

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *