Como colocar categorias personalizadas

Oi meus amorecos, tudo bom? Bom, hoje eu vou ensinar como fazer as categorias personalizadas igual ao do Extras Place Fame, 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCnOG5MgVguWOorTN_ZMIsGCcFgFjnMiqUyqyTmUMxsTRjVqSDKzNlQUR5otacF3VsSEEpR2DIF7Q7pSwdx5FXW4Z_JVemwjoTM2TNzTGM3TNp2NqO2Ow-n8req4z00cutSF_b5NdEQXbY/s0/image.png'
title='Image'/>&quot;
imagenes[2] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN97Hfe4MDJCbVHRMaFtj8q8Q9gwp4kZv3O2xsEVbZYQpZ3_SggT0IVW0Y3LQYvIidJ1yep3hqrfaQWvED7sKIIUf5dkmlnbiiWQeZumqGoMlfavat8vTj_g8PwCRmyeAN2LU2wovkOVot/s0/video.png'
title='Video'/>&quot;
imagenes[3] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW73TIPRDw5c1mcdEyhTfbeU13fJs5xR9aK9sAfKdOR6OCw6gkAFauM72DvzJXRCUI_WZlpJ_UL9p9mabW5COliMHfHqfGHWM51VmNtDd7iKdO3m7uEMRuBeqnE1ZkhZndLgvTZw418vv2/s0/audio.png'
title='Music'/>&quot;
imagenes[4] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8xlLj3I9SU-PZH9VdFN9V7xv4m3391ZnTwkXXhp6iAUfHAdjHQfR5wrrFyfNaXlYRmtgRi24vd0nwnc2MJYgku_w4AtkMNGOIGxIUpwwkt14RqVKR8-Mm8r816i2bJe5ZmoJhtaBgbBpe/s0/quote.png'
title='Quote'/>&quot;
imagenes[5] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgOIFklJ7avr1xQpPHpuyX2ug-ezVgCy8be6FN1P4pF1GEfGjcMVA11TCATWvMUs5nGZrWQFI7I9SJX6cxYpGzWmweoT_TYnQWwijPeueMV09N1od5CKF71lWRIMpfRyv-95aappVFxTYH/s0/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...

 Juu Almeida