Marcadores em formato de ícone acima do titulo do post | Quero Dicas | Tutoriais para seu blogs


Marcadores em formato de ícone acima do titulo do post

Muitos blogs estão usando este estilo de marcadores ao lado ou acima do titulo do post. Realmente, ele é bem interessante, além de dizer que fica bonito e dá mais destaques as suas categorias.

A muito tempo já estou querendo fazer uma postagem para ensina-los, mas a falta de tempo e entre muitos outros pedidos feitos por e-mail ou pela fanpage, hoje acabei criando este tutorial. E quem ainda está com o pedido pendente, Calma! farei todos. Acredito que até o final do mês de fevereiro esteja com a metade resolvida, obviamente os que dá para ensinar.
Agora, atendendo a pedidos, vamos ao tutorial.

Você sabe do que estou falando: Marcadores em formato de ícone acima ou ao lado do titulo do post?
Ele fica igual a imagem do inicio desta postagem e o primeiro blog dando a este destaque foi na plataforma Wordpress, pois é comum nesta plataforma. Mas como muitos dos gadgets, widgets, plugins, etc disponíveis no Wordpress podem ser adicionados no blogger, este não é diferente. Claro, é relativamente simples, mas precisa-se de atenção ao implementá-lo. Por isso, leia até o final desta postagem e somente depois teste no blog.
Dica importante: Faça o tutorial em um blog de teste, com postagem e marcadores existentes, claro! Só depois coloque em seu blog oficial, claro, com o backup salvo em seu pc também. Se fizer diretamente no seu blog, é por sua conta e risco.

  1 Passo: Marcadores sem erros

O primeiro passo é criar os marcadores sem eros para implantar estes ícones. Para isso, basta criar um único marcador para cada categoria.

Vamos entender...
Para cada categoria criada, escreva um marcador único. Exemplo;
Se você quer dar dicas para blogs, você poderá escrever "Dicas blogs" ou "Dicas para blog" e/ou "Blog".  Ela se estende a todas as categorias/marcadores que deseja criar, exemplo: receitas, moda, livros, tutorias... Vai da sua escolha e opção.

Vou dar uma opção pratica para que entenda melhor.
Aqui no Quero Dicas, eu coloquei varias categorias. Tal como: "Dicas blog", onde são separadas todas as postagens onde dou dicas para blogueiros customizar ou personalizar seus blogs. Clique e veja - Dicas Blog. O mesmo se estende a categoria as dicas para photoshop. Veja: Photoshop.
Se você prestou atenção, todas as postagens são relacionadas somente aquela categoria.

Entendeu? Espero que sim =D
Por isso, se seu blog não tem marcadores, comece a criá-los ou selecione as categorias mais relevantes, "aquelas" que você deseja que tenham o ícone de ilustração para dar andamento ao tutorial.

  2 Passo: Criando ícone

O segundo passo, é criar as imagens que deseja usar. Crie e edite todas as imagens do mesmo tamanho e formato e hospede todas elas. Pois iremos utilizar o endereço dessas imagens/ícones.

Caso não queira criar suas próprias imagens, você poderá pegar seus ícones gratuitamente nos sites abaixo:

IconArchive
Softicons
IconFinder
Findicons

Todos os sites tem ícones/imagens de excelente qualidade.
DICA: Ao coletar seus ícones, não se esqueça que suas imagens precisam representar suas categorias. Exemplo: Receitas (panela, talher, etc), Look (bolsa, roupa, etc), Filmes (câmera) e assim por diante. 
Após coletar seus ícones, você precisa editá-los para corrigir alguns erros existentes.
Abra um editor de imagem que suporte transparência (PNG). Exemplos: Photoshop, Photofiltre.

1) Dimensione todas as imagens/ícones para 70x70 px. (esta dimensão é a melhor).
2)Verifique se todas estão com fundo transparente (PNG).
3) Se desejar edite todas pela mesma cor.
A não ser que queira que cada categoria tenha seus ícones diferenciado não somente pelas imagens internas, mais também por cores diferenciadas (coloridinho).

4) Depois de tudo editado conforme ao seu gosto, é hora de hospedá-las. Caso tenha algumas dificuldade para hospedar suas imagens, veja um desses post:

Como hospedar suas imagens no seu próprio blog
Como hospedar uma imagem gratuitamente na Web para seu blog


 3 Passo: Primeiro Código

Com seus ícones/imagens editadas e hospedadas, enfim chegamos aos códigos. Eba!
Mas você precisa de muita atenção, ok?

1) Acesse o painel do seu blog.
2) Vá em Modelo e Editar HTML
3) Procure pela tag </head>

 </head> 

4) Acima dela cole o javascript abaixo:

 <script type='text/javascript'>
function lebel_logo {
imagenes = new Array();
imagenes[1] = &quot;<img src='ENDEREÇO DE IMAGEM DO ÍCONE 1' title='NOME DA CATEGORIA 1'/>&quot;
imagenes[2] = &quot;<img src='ENDEREÇO DE IMAGEM DO ÍCONE 2' title='NOME DA CATEGORIA 2'/>&quot;
imagenes[3] = &quot;<img src='ENDEREÇO DE IMAGEM DO ÍCONE 3' title='NOME DA CATEGORIA 3'/>&quot;
imagenes[4] = &quot;<img src='ENDEREÇO DE IMAGEM DO ÍCONE 4' title='NOME DA CATEGORIA 4'/>&quot;
imagenes[5] = &quot;<img src='ENDEREÇO DE IMAGEM DO ÍCONE 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>

Agora, Preste Atenção!
ENDEREÇO DE IMAGEM DO ÍCONE - Cada um está separado por uma numeração ao final (1, 2, 3, 4 e 5). Para cada numeração é um ícone/imagem diferente.

NOME DA CATEGORIA - Cada um, também, está separado por uma numeração ao final (1, 2, 3, 4 e 5) e existem duas vezes no mesmo código. EM AMBOS devem conter o mesmo nome do marcador do seu blog. Exemplo:

<img src='ENDEREÇO DA SUA IMAGEM DO ÍCONE 1' title='DICAS BLOG'/>&quot;

e no outro a mesma coisa:

if (etiqueta == &quot;DICAS BLOG&quot;)
{document.write(imagenes[1]);}

  4 Passo: Ativando o código

1) Ainda dentro do HTML do seu template procure por:

 <div class='post-header'> 

Você deve encontrar 2 códigos iguais. Mas precisamos somente da primeira encontrada.
Para você ter certeza que é a certa, veja:

                                    <data:post.title/>
                                    </b:if>
                                  </b:if>
                                </h3>
                              </b:if>
                              <div class='post-header'>
                                <div class='post-header-line-1'/>
                              </div>

É a que está em azul, é a que queremos. A que está em vermelha é para você saber que esta fica logo abaixo.

2) Acima da que nós queremos (azul) cole o código de ativação.

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


  5 Passo: Dando estilo

1) Continuando dentro do HTML do seu blog, procure por:

 ]]></b:skin>  


2) Acima dele, cole:
 

.icones-marcadores{
position:absolute;  /* NÃO ALTERE */
left: 50%; /* DEFINE O ESPAÇO À ESQUERDA */
top:-6px; /* DEFINE O ESPAÇO AO TOPO*/
display:block;  /* NÃO ALTERE */
}
.icones-marcadores img{
width:70px; /*É A LARGURA DA IMAGEM, COLOQUE O MESMO TAMANHO QUE CRIOU*/
height:70px; /*É A LARGURA DA IMAGEM, COLOQUE O MESMO TAMANHO QUE CRIOU*/
}


Ajuste o tamanho e o posicionamento da imagem até que se ajuste ao seu template e gosto. Ajuste onde eu deixei descrito. Onde está escrito NÃO ALTERE, a frase já diz, não é? NÃO MEXA!

3) Agora Salve.

Pronto! Seus marcadores em formato de ícone ao lado dos títulos dos posts já estão instalados e funcionando.

FAQ
Perguntas futuras

1 - Quero trocar o posicionamento da imagem. Quero ao lado do titulo, Como faço?
Edite o CSS até ficar do jeito que deseja.  (Código acima de ]]></b:skin>)

3 - Quero mais categorias, além das 5 disponíveis no código.
Este tipo de alteração se faz no Javascript. Basta copiar o ultimo código de ambas as seções, colar abaixo de cada uma correspondente e fazer o mesmo processo que fez nas demais..

4 - Não tenho Photoshop. Qual editor de imagem posso usar?
Existe o Photofiltre (também pago). Mas caso prefira um editor mais leve, você poderá utilizar o Photoscape. É de fácil manuseio e você pode procurar dicas de como utilizá-lo na internet.

Caso deseje, você também pode baixar o Photoshop CS2 que a adobe liberou gratuitamente para os usuários de Windows. Clique aqui e baixe gratuitamente.

Gostou? Ajudou? Então deixe seus comentários =D
Beijinhos
Créditos dos códigos: Bubbslandia

6 comentários

Clique e deixe seu comentários
quarta-feira, 09 março, 2016 ×

Gostei muito do seu blog!! Vou tentar suas dicas!!! bjus e sucesso!!!

Resposta
avatar
admin
quarta-feira, 09 março, 2016 ×

Muito obrigada Débora. Espero que encontre as dicas de que precisa.
Caso não encontre, você pode solicitar um post em FalaKi.

Obrigada mais uma vez e sucesso pra você também.
Beijinhos ♥

Resposta
avatar
admin
terça-feira, 12 abril, 2016 ×

não consegui achar o passo numero 4 em meu template, poderia me dar uma ajuda? Já está tudo pronto.

Resposta
avatar
admin
quarta-feira, 13 abril, 2016 ×

Olá Marcelo.
Procure então por post-header-line-1 e prossiga com o tuto.

Resposta
avatar
admin
domingo, 06 novembro, 2016 ×

Olá, fiz tudo como mostrado e mesmo assim não funcionou, eu uso o blogger.

Resposta
avatar
admin
segunda-feira, 07 novembro, 2016 ×

Olá Diogo.
Leia atentamente e tente novamente =(
Já fiz testes e já criei um layout com este tutorial. Perceba que a categoria/marcadores devem estar com nomes iguais e nos locais corretos.

Resposta
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.