10 janeiro 2016

Categorias no titulo do post

Oiee meus amores <3, o tutorial de hoje foi feito porque a Pricila, uma leitora aqui do blog pediu entao nao podia deixar de fazer esse tutorial, porque agora tá super na moda todos os layouts terem o icone da categoria no titulo do post, e assim resolvi trazer esse tutorial pra vocês, vem conferir ele.
O tutorial é bem facil, mais como tudo no html precisa ter cuidado esse tutorial nao sera diferente, entao tome cuidado.




Em primeiro lugar vou ensinar vocês a como por o icone da categoria no topo no post, tipo ao lado do titulo, ou embaixo.
O modelo é esse aqui que tem no blog, por exemplo nesse aqui tem o icone de um computador segnifica::: Blogosfera <3


Primeiro vocês tem que criar a imagem da categorias de vocês, ou entao baixem, aqui nos marcadores tem um chamado Freebies, vocês encontraram varios modelos que disponibilizei free, outros blogs tambem disponibilizam.

Hospede elas nesse site AQUI

Agora usaremos 3 codigos

IMPORTANTE²! 

Não se esqueça de baixar seu template antes de fazer quaisquer modificações no código. Assim, se algo der errado, você pode recuperá-lo exatamente como estava antes. Modelo » Fazer backup/Restaurar » Fazer download do modelo completo


Código 1:


Texto que fará o navegador interpretar o código para o tutorial funcionar. É nesse código que você usará o URL.

Vá em MODELO >>> editar HTML >>>clique dentro do código e dê Ctrl+F


Procure: </head>

Colar este código ANTES de: </head>


<script type='text/javascript'>
function lebel_logo(etiqueta) {
imagenes = new Array();
imagenes[1] = "<img src='URL DA IMAGEM' title='Fotografia'/>"
imagenes[2] = "<img src='URL DA IMAGEM' title='Maquiagem'/>"
imagenes[3] = "<img src='URL DA IMAGEM' title='Música'/>"
imagenes[4] = "<img src='URL DA IMAGEM' title='Filmes e séries'/>"
imagenes[5] = "<img src='URL DA IMAGEM' title='Livros'/>"
imagenes[6] = "<img src='URL DA IMAGEM' title='Beleza'/>"
imagenes[7] = "<img src='URL DA IMAGEM' title='Moda'/>"
imagenes[8] = "<img src='URL DA IMAGEM' title='Cinema'/>"
imagenes[9] = "<img src='URL DA IMAGEM' title='Textos'/>"
imagenes[10] = "<img src='URL DA IMAGEM' title='Viagens'/>"
if (etiqueta == "fotografia")
{document.write(imagenes[1]);}
if (etiqueta == "maquiagem")
{document.write(imagenes[2]);}
if (etiqueta == "música")
{document.write(imagenes[3]);}
if (etiqueta == "filmes")
{document.write(imagenes[4]);}
if (etiqueta == "livros")
{document.write(imagenes[5]);}
if (etiqueta == "beleza")
{document.write(imagenes[6]);}
if (etiqueta == "moda")
{document.write(imagenes[7]);}
if (etiqueta == "cinema")
{document.write(imagenes[8]);}
if (etiqueta == "textos")
{document.write(imagenes[9]);}
if (etiqueta == "viagens")
{document.write(imagenes[10]);}
}

</script>


Você precisa saber"


A parte VERMELHA você colocará o URL da sua imagem, e na área VERDE você tem que deixar as palavras exatamente IGUAIS na primeira e na segunda etapa. Se tiver uma letra diferente o código NÃO VAI RECONHECER. Você pode colocar as palavras que quiser para classificar as suas categorias, mas precisam ser iguais.

Exemplo: colocou Dicas na primeira etapa, vai ter que colocar dicas na segunda etapa também. Não coloque "Dicas" e depois "dica" ou "dicasS". Entendeu?



Código 2:


Nesse código você pode fazer alterações para que fique de acordo com o modelo do seu layout.

Colar este código ANTES de: ]]></b:skin>

.format-icon {float: left;
position: left
left:46%;
padding-right:12px;
padding-bottom: 5px;
margin-top: -15px;
clear:both} 

Entendendo o código:

A palavra left que dizer (esquerda). Você pode colocar right (à direita) ou center (no centro)

Alteração no seu layout: Para que a imagem não fique grudada no título do seus posts, aperte ctrl+f e procure por .post h1 ou .post h3 ou h3.post-title.
Nessa class você adiciona: margin-top: 22px;

Código 3:

Procure por:: <div class='post-outer'>

Colar este código DEPOIS 

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

Agora é so salvar tudo.





8 comentários:

  1. Duuda minha chará, amei o post, fica lindo com esse ícone ao lado do titulo dá um up no layout do blog né. Adorei o seu blog flor :)
    Beeijos da outra Duda hahaha
    www.eduardamakeup.com

    ResponderExcluir
    Respostas
    1. E ai chará <3
      Realmente o icone do lado do titulo fica bem mais chamativo e dá um up mesmo. Fico feliz que tenha gostado amor. Beijos!

      Excluir
  2. Adorei o post, bem explicadinho!

    http://meubaudeestrelas.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oun amor fico feliz que tenha gostado <3 Beijos! <3

      Excluir
  3. Estava muuito precisando desse tutorial! Muito obrigada pela dica, seeerio! Amei seu blog e a sua explicação!
    Beijos, muito sucesso, Laís Scagliusi

    ResponderExcluir
  4. Oiii!
    Eu já fiz esse tuttorial, porém apenas uma categoria minha não parece que é a de "Filmes e Séries". Tipo vocês disponibiizam 10 categorias eu tenho 12 categorias, o problemas seria esse a quantidade de categoria?

    ResponderExcluir
    Respostas
    1. Só você adicionar o codigo e personalizar filmes e series amore. bEIJOOS

      Excluir