Search
Ass. o Feed

BL

A LITTLE HOPE + GRACE FOR KINGDOM MINDED LIVING

HTML CSS PS TUTOS THEMES
Siga nas redes

15 julho 2017

Marcadores em formato de Icones acima/lado do titulo do post




Alguns 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, como eu fiz aqui no Bubbslândia, mas a falta de tempo e entre muitas duvidas do que postar não ajuda, hoje acabei criando este tutorial. Obviamente os que dá para ensinar. Todas essas imagens eu criei no Photoscape, peguei um fundo png, fiz uma bolinha e utilizei fontes nos desenhos/ sim aquilo é uma fonte e não uma imagem. A publicação tem bastante detalhes para que possa entender, e extenso também rs 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 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.



Recomendo que faça um {Backup} do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.
Marcadores sem erros
O primeiro passo é criar os marcadores sem erros para implantar estes ícones. Para isso, basta criar um único marcador para cada categoria.
Vamos entender melhor
Para cada categoria criada, escreva um marcador único [Exemplo: Dicas] 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.

Aqui no Bubslândia, eu coloquei varias categorias. Tal como: "Comentario, Personalize etc", onde são separadas todas as postagens. Clique e veja - [aqui]. O mesmo se estende a categoria Personalize. Veja: - [aqui].
Se você prestou atenção, todas as postagens são relacionadas somente aquela categoria.

Entendeu? Espero que sim ! 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.
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 suas próprias imagens, você poderá pegar seus ícones gratuitamente nos sites abaixo:
IconArchive - Softicons - IconFinder - Findicons




DICA
Ao editar 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. Abra um editor de imagem que suporte transparência (PNG). Exemplos: Photoshop, Photofiltre. Eu uso Tanto o GIMP quanto o PHOTOSCAPE .
Dimensione todas as imagens/ícones para 70x70px. (esta dimensão é a melhor, eu uso 55 ).
Verifique se todas estão com fundo transparente (PNG).
Coloque o nome das categorias igual ao seu marcador Ex: Make NÃO coloque assim [ makes ] , vai dar erro na certa , se tem MAIÚSCULAS Respeite.
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).
Depois de tudo editado conforme ao seu gosto, é hora de hospedá-las, num site de sua preferencia .
Vamos aos códigos

Com seus ícones/imagens editadas e hospedadas, enfim chegamos aos códigos. Eba! Prestem bastante atenção começando daqui :

► Vá em Modelo e Editar HTML Procure pela tag :
</head> 
acima dela acrescente 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>
Descriçã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'/>&quot;
e no outro a mesma coisa:
if (etiqueta == &quot;DICAS&quot;)
{document.write(imagenes[1]);}
Ativando o código
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, que queremos. A que está em vermelha é para você ter uma base.
Acima da que nós queremos (azul) cole o código de ativação abaixo :
<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>
Dando estilo
Continuando dentro do HTML do seu blog, procure por:
/b:skin e acrescente:
.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*/
}

Agora Salve.
Altere somente onde esta destacado com CAPSLOCK

Iria deixar umas imagens prontas aqui nesse post, mas como ele ficou extenso... Você poderá escolher o seu nessa postagem [ IMAGENS PNGS PARA MARCADORES ]
Pronto! Seus marcadores em formato de ícone ao lado dos títulos dos posts já estão instalados e funcionando.
Caso não consiga deixe seu comentário que tirarei sua duvida

Um comentário

  1. Adorei o tutorial.. Bem util! Vou ver se uso no meu proximo lay!!

    delicadaeabusada.tk

    ResponderExcluir

Bom, primeiramente obrigada pelo seu comentário !
Peço por gentileza que comente somente sobre o blog e não use aqui como debate alheio sobre comentários anteriores! Qualquer dúvida, sugestão e até mesmo reclamações use tanto meu Facebook como o meu Email, tentarei responder o mais rápido possível. Anônimos não perca seu precioso tempo tentando ofender tanto os comentarista como a mim mesma, eles serão excluídos!