Responsive image
Kits completos para tratamento capilar
Kits completos para tratamento capilar
Quanto gastei em 1 ano de Miranda Bastos
Quanto gastei em 1 ano de Miranda Bastos
Resumo de fevereiro 2018
Resumo de fevereiro 2018
Comemoração de 1 ano de canal, sorteio e tag
Comemoração de 1 ano de canal, sorteio e tag
Resenha dos produtos da La Roche – Posay
Resenha dos produtos da La Roche - Posay
Casamento a distância
Casamento a distância
Evento Biofios
Evento Biofios
Tendências outono 2018
Tendências outono 2018
Penteados fáceis e rápidos
Penteados fáceis e rápidos
Função de cada pincel
Função de cada pincel

Icones das categorias nas postagens

dezembro 23, 2016

Olá meus amores.

Trago hoje um tutorial que achei muito interessante para nos blogueiras, para facilitar o acesso de nossos leitores com o nosso conteúdo resolvi pesquisar  alguns tutoriais e achei esse no blog da Ó a Blogueira e gostei muito do resultado, tanto que até fiz aqui no meu como vocês podem ver:
*Não sei por que o meu repetiu os ícones, refiz o processo 2 vezes mas não mudou. Me conte se o seu ficar assim ok?!

Antes de começarmos a fazer precisamos ter certeza que se errarmos alguma coisa isso não danificará nosso layout então o que vamos fazer?!  Vamos fazer o Backup do nosso layout. Vou mostrar como se faz:
Esse layout que vamos mexer agora é um dos layouts que vou disponibilizar para o download logo, logo aqui no blog. Então me siga por aqui pra ficar por dentro ok?

1° Passo: Faça o backup do seu blog para não danificar e perder toda a personalização que você fez antes. Clique onde está escrito FAZER BACKUP/RESTAURAR.

2° Passo: Assim que você clicar nesse botão, vai aparecer esse outra tela para você. Assim que você clicar no botão automaticamente seu layout vai ser baixado, ele provavelmente vai parar onde ficam seus documentos de downloads.

3° Passo: Agora sim podemos trabalhar no tutorial que vamos aprender hoje.
Vai até postagens, caso já tenha postagem não precisa criar mas se achar melhor crie uma.

4° Passo: Do lado direito da sua telinha na barra de configurações de postagens tem a opção “Marcadores” clique nela e coloque todas as categorias que você realmente vai usar, como por exemplo: moda, beleza, tutorial e etc…  Isso vai de acordo com o que você fala no seu blog ok?! Depois de fazer tudo isso clique em concluído.

Vai ficar mais ou menos assim, escolhi colocar o do meu blog por que o do blog teste ficou feio (risos). É claro que o seu vai ficar com as categorias do seu blog.
*Decidi trocar algumas das categorias.

5° Passo: Escolher uma imagem de categorias para o seu blog pode ser uma tarefa não muito fácil, depende muito de como é seu blog e do que você fala nele, vou deixar aqui algumas categorias para vocês baixarem se quiser. Deixarei também o link de um site que você pode baixar que é o  Flaticon.

Vou deixar disponível para BAIXAR AQUI:

6° Passo: Vá em modelo na barra lateral esquerda e logo depois clique no botão editar HTML.


7° Passo: Clique dentro do código e aperte o botão Ctrl + F logo depois de fazer isso coloque dentro da caixinha de pesquisa esse código aqui: 

<div class=’post-header’> 

E clique no botão ENTER, estamos procurando o 2° código e não o 1° ok?! Para achar o 2° é só dar enter mais uma vez.

Vai aparecer essa imagem aqui embaixo:
8° Passo: Acima desse código você vai colar esse código aqui:

<b:loop values=’data:post.labels’ var=’label’> <a class=’icone-marcadores’ expr:href=’data:label.url’ rel=’tag’> <script type=’text/javascript’>lebel_logo(&quot;<data:label.name/>&quot;);</script> </a> </b:loop> 

Vai ficar desse eito aqui:
9° Passo: Novamente tecle Ctrl + F e na caixinha de busca e procure por </head>  ACIMA dele cole: O que está em branco é onde você pode editar, caso tenha muitas categorias copie e cole mais não esqueça de editar os numeros que estão [aqui dentro].

<script type=’text/javascript’>
function lebel_logo(etiqueta) {
imagenes = new Array();
imagenes[1] = &quot;<img src=’ LINK DA IMAGEM 1 ‘ title=’ NOME DA CATEGORIA 1 ‘/>&quot;
imagenes[2] = &quot;<img src=’ LINK DA IMAGEM 2 ‘ title=’ NOME DA CATEGORIA 2 ‘/>&quot;
imagenes[3] = &quot;<img src=’ LINK DA IMAGEM 3 ‘ title=’ NOME DA CATEGORIA 3 ‘/>&quot;
imagenes[4] = &quot;<img src=’ LINK DA IMAGEM 4 ‘ title=’ NOME DA CATEGORIA 4 ‘/>&quot;
imagenes[5] = &quot;<img src=’  LINK DA IMAGEM 5 ‘ title=’ NOME DA CATEGORIA 5 ‘/>&quot;

if (etiqueta == &quot;NOME DA CATEGORIA 1&quot;)
{document.write(imagenes[1]);}
if (etiqueta == &quot;NOME DA CATEGORIA 2&quot;)
{document.write(imagenes[2]);}
if (etiqueta == &quot;NOME DA CATEGORIA 3&quot;)
{document.write(imagenes[3]);}
if (etiqueta == &quot;NOME DA CATEGORIA 4&quot;)
{document.write(imagenes[4]);}
if (etiqueta == &quot;NOME DA CATEGORIA 5&quot;)
{document.write(imagenes[5]);}
}
</script>

*LINK DA IMAGEM + O NUMERO:  É o link da imagem que você hospedou antes de começar esse tutorial.
*NOME DA CATEGORIA + O NUMERO:  É o nome que você deu a categoria, como por exemplo: Beleza, Moda e etc..
Não edite mais nada além do que está em branco.

10° Passo: Novamente tecle Ctrl + F e na caixinha de busca procure por: ]]></b:skin>  ACIMA dele cole:

/* Categoria Postagens www.oablogueira.com
———————————————————————- */
.icone-marcadores {
left: 300px; /* números positivos para esquerda, números negativo para direita  */
top: -50px; /* números positivos desce o ícone, números negativo sobre */
 display: block;
 position: absolute;
}
.icone-marcadores img {
width: 65px; /* largura da sua imagem */
height: 65px; /* altura da sua imagem */
}

Agora é só clicar em SALVAR MODELO e pronto. Veja como o modelo de teste que eu estava fazendo ficou:
*Como podem ver que o do tutorial deu certo, o meu provavelmente não deu certo por causa da data e os códigos que coloquei nela.
Caso você tenha feito tudo direitinho e não tenha dado certo, comente o que deu errado e deixe o link do seu blog pra que eu possa te ajudar. Gostou desse post? Comente o que achou ai nos comentários e compartilhe esse posts nas suas redes sociais, espero que tenham gostado. Muitos beijos e tchau, tchau… 

22 Comentários

Deixe o seu Comentário aqui!

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

@mirandabastosblog