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:
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;
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 :)
ResponderExcluirBeeijos da outra Duda hahaha
www.eduardamakeup.com
E ai chará <3
ExcluirRealmente o icone do lado do titulo fica bem mais chamativo e dá um up mesmo. Fico feliz que tenha gostado amor. Beijos!
Adorei o post, bem explicadinho!
ResponderExcluirhttp://meubaudeestrelas.blogspot.com.br/
Oun amor fico feliz que tenha gostado <3 Beijos! <3
ExcluirEstava muuito precisando desse tutorial! Muito obrigada pela dica, seeerio! Amei seu blog e a sua explicação!
ResponderExcluirBeijos, muito sucesso, Laís Scagliusi
Que bom que gostou linda Beijos <3
ExcluirOiii!
ResponderExcluirEu 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?
Só você adicionar o codigo e personalizar filmes e series amore. bEIJOOS
Excluir