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

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 

Comente usando seu facebook!


Comente!

  1. Ah eu já tinha visto, é parecido com o do Tumblr. É mais ou menos como transformar seu blog em um Tumblr, o Pink Skull Design ensinou.

    ResponderExcluir
  2. Nossa que legal, fazia tempo que procurava um tutorial assim.


    http://www.profanofeminino.com/

    ResponderExcluir
  3. Nossa o seu cantinho é lindo!
    Agora te convido para conhecer o meu cantinho, se gostar e seguir eu retribuo.
    Beejos da Biscoitinha.
    http://mimundo-naty.blogspot.com/

    ResponderExcluir
  4. Nooossa eu tava louca por um tutorial desse! Gamei aqui, estou seguuindo *o*
    extensaoteen.blogspot.com

    ResponderExcluir
  5. adorei o tutoriail é muito bom >< http://fashionscream.blogspot.com/

    ResponderExcluir
  6. OU, Vey !!
    Vocêê Salvou Julia !!
    Estava Proucurando isso , achei um parecido desse tentei fazer mas não conseguir, não so eu mas todos que comentaram não conseguiram, (significa que não sou burra).
    Mas agora você me Salvou, PARABÉÉns !!

    Este vi no Place Fame Extra, pedi para exp´licar daí ela falou que ia fazer depois, mas você fez adiantado.

    Beijinhos
    chicretiililas.blogspot.com

    ResponderExcluir
  7. adoro, uma vez tentei mas n tava com tanta paciencia para pesquisar icones diferentes, mas agora deu super certo, amei, amei ^^

    ResponderExcluir
  8. Menina amei, só tinha visto esse modelo de categorias no wordpress e agora trazendo para o blogger é muito show!

    ResponderExcluir
  9. Eu adorei ,ficou muito fofo pena que se eu colocar vou ter que mudar meu Desig todo mais efim amei seu blog se puder passa no meu cantinho
    http://menina-imperfeitablog.blogspot.com.br/

    ResponderExcluir
  10. Amei o Trach Girl to seguindo,segue devolta
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  11. Não tô conseguindo! :( dá uma mensagem assim:"Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: Element type "http:" must be followed by either attribute specifications, ">" or "/>"."

    ResponderExcluir
    Respostas
    1. olá eu não sou ela mas vc dever ter colocado errado ou excluido algu do seu blog

      Excluir
  12. O meu deu totalmente errado, porque meu marcador já é personalizado, acho que ele está bloqueando, alguém pode me ajudar?
    http://prisma-literario.blogspot.com.br/

    ResponderExcluir