Marcadores/Categorias em imagens no Blogger

Hoje trago para vocês um tutorial bem procurado na rede (pelo menos por mim), trata-se dos marcadores/categorias das postagens em imagens no blogger. Ele e bem complexo por isso leia com bastante atenção antes de adiciona-lo a seu blog/site.

➲ Antes de fazer qualquer alteração em seu template não se esqueça de fazer um backup, pois se der algo errado, poderá ser recuperado com facilidade. Modelo » Fazer backup/Restaurar » Fazer download do modelo completo

➲ Para copiar os códigos, selecione e solte em seu HTML.

1. Procure (Aperte Ctrl+F) por </head>, quando encontrar acima dele cole este código:

<script type='text/javascript'>
function lebel_logo(etiqueta) {
imagenes = new Array();
imagenes[1] = "<img src='http://i.imgur.com/CD9mnLm.png' title='Fotografia'/>"
imagenes[2] = "<img src='http://i.imgur.com/CusDOIa.png' title='Maquiagem'/>"
imagenes[3] = "<img src='http://i.imgur.com/QPHopVK.png' title='Música'/>"
imagenes[4] = "<img src='http://i.imgur.com/ONm05ys.png' title='Filmes e séries'/>"
imagenes[5] = "<img src='http://i.imgur.com/PUv9cTa.png' title='Livros'/>"
imagenes[6] = "<img src='http://i.imgur.com/s2WZn23.png' title='Cabelo'/>"
imagenes[7] = "<img src='http://i.imgur.com/cae6XYV.png' title='Moda'/>"
imagenes[8] = "<img src='http://i.imgur.com/hqeTADg.png' title='Cinema'/>"
imagenes[9] = "<img src='http://i.imgur.com/nIesF1z.png' title='Textos'/>"
imagenes[10] = "<img src='http://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>

COMPREENDENDO O CÓDIGO: As partes grifadas em vermelho são para serem alteradas com a Url das imagens escolhidas [No fim deste post deixarei algumas]. Já as em laranja são os nomes dos marcadores ou seja, categorias escolhidas. Salve

2. Agora procure (Aperte Ctrl+F) por ]]></b:skin>, quando encontrar acima dele cole este código:

.format-icon {
float: left;position: relative;
left:46%;
padding-right:5px;padding-bottom: 5px;margin-top: -4px;clear:both
}

COMPREENDENDO O CÓDIGO: A parte em vermelho e onde o marcador estará [left: Esquerdo, right: Direito ou center: centro]. Ja as em laranja varia de acordo com o template, as coordenadas [margem a direita, margem a baixo e margem acima].

Para que a imagem não fique acima do titulo do post, procure por .post h3 ou h3.post-title - ctrl+f pode ajudar. E abaixo de { coloque: margin-top: 22px; Salve

3. Já estamos no final do tutorial. Procure (Aperte Ctrl+F) por <div class='post-outer'>, quando encontrar depois dele cole este código [Quando aparecer pela primeira vez]:

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

Não mexa em nada, Salve

Para o efeito funcionar, você deve usar os marcadores colocados no script. E pronto já estão Online!

E só recortar e utilizar em seus layouts!