Categorias personalizadas

http://trasshygirl.blogspot.com.br/2011/09/como-colocar-categorias-personalizadas.html

fica muito bonito e super original né? Créditos ao Pink Skull Design... Então vamos aprender! Exemplo:

Estão vendo do lado do post? Uma imagem com fundinho cinza e um ícone no meio? É isso que vamos fazer, sem mas enrolação:

Passo 1 - Clique em Expandir modelos de widgets e cole o código a seguir 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcI3FC7I4xPg6QFVrEgRenQdmLBcOGjXv5Rp0p0wmVpo0mEKDbAh5nL39q9qiCi1XNfHZ_Mov1oX_qXYqqX57IbWXqCrVDmZzQpMe2UlgNZhA9nOXnB3MQdHPRJ41DPJeZnOydtRKxDqtV/s0/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

Podendo mudar os nomes no código acima... Então na hora de postar é só usar o marcador que deseja.

Passo 2 - Antes de ]]></b:skin> cole o código a seguir

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

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

Então é isso, não é tão fácil como os outros mas a maioria consegue... Créditos ao Pink Skull Design Dúvidas? Só comentar...