Transforme seu Blogger em Tumblr

Quem conhece o Tumblr sabe que ele possui um sistema muito carismático, de ter uma imagem diferente para cada artigo. Este script eu ví no Template Quade no Btemplate, e fará o mesmo que o Tumblr faz. Eu achei super interessante pois eu já queria adaptar isso para o blogger, eu só não sabia que poderia ser feito como um script! Eu não sei quem foi que desenvolveu mas o Template Quade tem os créditos de Best Blogger Themes, Premium Blogger Themes, Fab Themes e Web2feel, então fica aí os merecidos créditos pois sou fã de todos eles. Eu mantive as imagens originais do Template Quade , mas você pode alterá-las se quiser. Lembra do artigo sobre conceito de Box Model? Ele será fundamental agora.

Coloque o código abaixo antes de </head>.


<script type='text/javascript'> 
function lebel_logo(etiqueta) {
imagenes = new Array();
imagenes[1] = &quot;<img src='http://4.bp.blogspot.com/-PsdeZBPT7aI/TjA8LHh3LpI/AAAAAAAAAME/N29HVIepfZg/s000/image.png' 
title='Image'/>&quot;

imagenes[2] = &quot;<img src='http://2.bp.blogspot.com/-Q4A8OGQMdI0/TjA8LXzke4I/AAAAAAAAAMI/2T1I6HTkJF0/s000/video.png' 
title='Video'/>&quot;

imagenes[3] = &quot;<img src='http://4.bp.blogspot.com/-vMpxUuZaA_A/TjA8LRmYXUI/AAAAAAAAAMM/rbhmRHcM2kQ/s000/audio.png' 
title='Music'/>&quot;

imagenes[4] = &quot;<img src='http://1.bp.blogspot.com/-s3cq9X4O5Lg/TjA8Lv8AH0I/AAAAAAAAAMQ/0gaEKTUTN0Y/s000/quote.png' 
title='Quote'/>&quot;

imagenes[5] = &quot;<img src='http://2.bp.blogspot.com/-X9N_LzKUnj0/TjA8JTQ9PsI/AAAAAAAAALs/jCEIvh53E98/s000/aside.png' 
title='Blog'/>&quot;

if (etiqueta == &quot;Image&quot;)
{document.write(imagenes[1]);}

if (etiqueta == &quot;Video&quot;)
{document.write(imagenes[2]);} 

if (etiqueta == &quot;Music&quot;)
{document.write(imagenes[3]);} 

if (etiqueta == &quot;Quote&quot;)
{document.write(imagenes[4]);} 

if (etiqueta == &quot;Blog&quot;)
{document.write(imagenes[5]);} 

}
</script>

E antes de ]]></b:skin> coloque o código abaixo:


.format-icon{
width:50px; 
height:50px;
position:absolute;
left:-70px; 
top:5px;
display:block;
}

Lembrando que o código acima pode ser modificado de acordo com o seu template. No caso do meu blog de testes, a modificação não foi necessária.

Agora, clique em ‘Expandir modelos de widgets’. O código abaixo deverá ser colocado acima do título do seu blog, no caso do meu blog de testes, coloquei acima de <div class=’post-header’>, mas no seu template pode ser diferente, então cuidado para não colocar o código no lugar errado:


<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(&quot;<data:label.name/>&quot;);</script>
</a>
</b:loop>
 

FAZENDO O SCRIPT FUNCIONAR

Mesmo você fazendo tudo o que expliquei acima, ainda não será possível ver o efeito funcionando. Para que ele funciona, leia atentamente o próximo parágrafo:

Para fazer o efeito do script funcionar, você terá que colocar os marcadores pertinentes ao script, ou seja, cada categoria em imagem, como mostra no blog de testes, é divida pelos marcadores Songs, Video, Quote, Image, e Blog, ou seja, se for postar imagem, coloque o marcador Image para ver a imagem pertinente ao script funcionar, e assim por diante.

Marcador para música: Songs
Marcador para vídeo: Video
Marcador para citação: Quote
Marcador para imagem: Image
Marcador para texto: Blog

Seguindo este passo, o seu blog vai ficar igual ao blog de testes, cada artigo como uma especificação, igual ao Tumblr!

Se você gostou deste artigo, siga o Pink Skull Design no twitter, inscreva-se no nosso Feed ou receba as atualizações do blog por email. Não esqueça também de curtir no Google Friends e no Facebook!

Bella Felix

facebooktwitterlinkedin

Cursando Design Gráfico, blogueira, pseudo-escritora, viciada em RPG e animes, desenha e devora livros. Autora dos blogs Pink Skull Design e The Black Element.