16 março, 2012

Aviso da 1° Gincana + Maratona de Tutoriais Parte 2 - Personalize as categorias dos posts


Oi Brigadeiros De Coco *u*
Hoje vou ensinar a como personalizar as categorias do blog com imagems, mas antes vou dar um aviso sobre a 1° gincana do concurso perfect Day : Para cumpri-la você tem até o dia 20/03. Bom agora vamos ao tutu ???

Exemplo de como vai ficar :
(clique para ampliar)



Bom antes os créditos : http://trasshygirl.blogspot.com/

Agora vamos lá :
Vá em Design > Editar HTML > Marque a caixinha : Expandir modelos de widgets > Dê CTRL + F e pesquise por :



</head>


E acima da tag pesquisada cole o seguinte código :



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


As categorias do código acima são divididas em:



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


Agora para manter, continue em Editar Html, e pesquise por :



]]></b:skin>


E acima desta tag cole o código abaixo :



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


Agora procure por :



<div class='post-header'> 


E acima dele cole o código a seguir:


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


Espero ter ajudado, Bjoo ♥

.

3 comentários:

  1. ual, ótimo tutu flor <3 adorei.
    estou esperando sua visita lá no meu blog tá? está rolando uma ótima chance de ser divulgada :3 visita?

    http://garota-fashiion.blogspot.com/

    ResponderExcluir
  2. Adoreeei o tuto *oo*
    http://cantoseencantosdahellen.blogspot.com/

    ResponderExcluir