Marcadores em formato de ícone acima do titulo do post | Blog Quero Dicas
Blog Quero Dicas : Marcadores em formato de ícone acima do titulo do post
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.
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.
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.
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
Caso não queira criar suas próprias imagens, você poderá pegar seus ícones gratuitamente nos sites abaixo:
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:
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>
4) Acima dela cole o javascript abaixo:
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;
if (etiqueta == &quot;DICAS BLOG&quot;)
4 Passo: Ativando o código
1) Ainda dentro do HTML do seu template procure por:
É 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.
5 Passo: Dando estilo
1) Continuando dentro do HTML do seu blog, procure por:
2) Acima dele, cole:
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.
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.
Créditos dos códigos: Bubbslandia
Tags: Dicas Blog, Marcadores, Tutoriais
Débora Rodrigues Vaz 9 de março de 2016 09:25
Gostei muito do seu blog!! Vou tentar suas dicas!!! bjus e sucesso!!!
Bia Barros 9 de março de 2016 13:42
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.
Marcelo Júnior 12 de abril de 2016 23:03
não consegui achar o passo numero 4 em meu template, poderia me dar uma ajuda? Já está tudo pronto.
Bia Barros 13 de abril de 2016 20:55
Procure então por post-header-line-1 e prossiga com o tuto.
Diogo S. F. Carmo 6 de novembro de 2016 03:25
Olá, fiz tudo como mostrado e mesmo assim não funcionou, eu uso o blogger.
Bia Barros 7 de novembro de 2016 05:47
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.