Nuvem de Marcadores personalizada no Blogger

Pensando sempre em melhorar a navegabilidade de seus visitantes pelo conteúdo de seu blog, classificar seus artigos segundo suas categorias com marcadores é fundamental. Isso ajuda a direcionar os interesses de quem chega até sua página e estes podem ler apenas o que realmente desejam e selecionar apenas artigos de temas específicos. Os Marcadores são o menu que responde essa necessidade e agora vamos mostrar como criar uma lista como a que usamos aqui na barra lateral do [ Ferramentas Blog ].

 

Depois que modifiquei a lista de Marcadores daqui, muita gente entrou em contato pelo Twitter (@hordones) e por e-mail solicitando que eu ensinasse como fazer o mesmo em seus blogs. Achei que era um formato diferente e simples para atrair mais a atenção para as diversas categorias de assuntos que abordamos aqui no [ Ferramentas Blog ]. É um modelo relativamente simples de fazer e muito personalizável, que se aplica a qualquer tipo de layout, cores e fontes, e para qualquer tamanho de barra lateral (sidebar).

Antes, veja esse artigo para entender sobre os Marcadores e saber como usar:

• Criar Marcadores de postagem do Blog

 

Criando Nuvem de Marcadores.

A primeira coisa a saber é: esse é um processo todo manual e que vai tomar algum tempo. Será preciso configurar cada parte e cada link de palavras individualmente. O código já está pronto para usar com o mesmo padrão que usamos aqui no blog, mas você terá que fazer modificações para o seu blog específico.

 

Passo 1 – URL dos Marcadores.

Quando criamos um marcador, o Blogger gera um endereço para agregar todos os artigos que tiverem o mesmo marcador que será sempre da seguinte maneira:

 

http://Nome_do_Blog.blospot.com/search/label/Nome_do_Marcador

 

Onde “label” é o termo em inglês que traduzimos por “marcador” e está mostrado em verde. De vermelho é o nome do marcador que você aplica quando vai publicar uma nova postagem, conforme a imagem abaixo.

 

 

Para saber qual é a URL de todos os marcadores que você tem em seu blog, basta copiar o endereço que abre quando você clica em algum link da lista de marcadores convencional do Blogger, que é criada padrão ao adicionar o Gadget “Marcadores” – ensinamos a criar essa lista no artigo “Criar Marcadores de postagem do Blog”; sem o conhecimento do que tratamos nesse artigo não é possível prosseguir aqui.

 

Passo 2 – Adicionando o código.

Como se você fosse adicionar um gadget do tipo “HTML/Javascript”, vá no painel do Blogger e clique em “Layout” ~> “Elementos da página” e clique em “Adicionar um gadget” (dúvida? leia: Elementos de Pagina – TUb Novos Parte 5). Na janela que abrir, escolha o gadget “HTML/Javascript”.

 

Aqui será aberta uma janela para você adicionar o seguinte código fazendo apenas as modificações indicadas:

 

<div align="center">
<div style="width: 360px;  _height: 20px; min-height: 200px; background-color: ; line-height: 25px; text-align: center;  ; font-family: ‘Arial’, Helvetica;">
<div style="padding: 10px; padding-top: 10px;">
  <a style="font-size: 18px; color: #999999; text-decoration: none;" href="URL_do_Marcador 1">Nome do Marcadore 1</a>
  <a style="font-size: 31px; color: #666666; text-decoration: none;" href="URL_do_Marcador 2">Nome do Marcadore 2</a>
  <a style="font-size: 34px; color: #666666; text-decoration: none;" href="URL_do_Marcador 3">Nome do Marcadore 3</a>
  <a style="font-size: 25px; color: #999999; text-decoration: none;" href="URL_do_Marcador 4">Nome do Marcadore 4</a>
  <a style="font-size: 19px; color: #999999; text-decoration: none;" href="URL_do_Marcador 5">Nome do Marcadore 5</a>
  <a style="font-size: 20px; color: #666666; text-decoration: none;" href="URL_do_Marcador 6">Nome do Marcadore 6</a>
  <a style="font-size: 21px; color: #999999; text-decoration: none;" href="URL_do_Marcador 7">Nome do Marcadore 7</a>
  <a style="font-size: 40px; color: #666666; text-decoration: none;" href="URL_do_Marcador 8">Nome do Marcadore 8</a>
  <a style="font-size: 37px; color: #999999; text-decoration: none;" href="URL_do_Marcador 9">Nome do Marcadore 9</a>
  <a style="font-size: 20px; color: #999999; text-decoration: none;" href="URL_do_Marcador 10">Nome do Marcadore 10</a>
  <a style="font-size: 22px; color: #666666; text-decoration: none;" href="URL_do_Marcador 11">Nome do Marcadore 11</a>
  <a style="font-size: 22px; color: #999999; text-decoration: none;" href="URL_do_Marcador 12">Nome do Marcadore 12</a>
  <a style="font-size: 14px; color: #666666; text-decoration: none;" href="URL_do_Marcador 13">Nome do Marcadore 13</a>
  <a style="font-size: 30px; color: #999999; text-decoration: none;" href="URL_do_Marcador 14">Nome do Marcadore 14</a>
  <a style="font-size: 21px; color: #666666; text-decoration: none;" href="URL_do_Marcador 15">Nome do Marcadore 15</a>
</div></div>
</div>

 

Indicado de vermelho é a largura do gadget, que o elemento de página terá na sua barra lateral. Para determinar esse número para que seja adequado ao tamanho da sua sidebar, basta trocar pelo valor correspondente ao seu template (Dúvida? leia: Medidas de um Template do Blogger).

Onde está indicado por “URL_do_Marcador” seguido de um número, basta colocar o endereço do marcador, conforme mostramos acima no Passo 1. E onde está “Nome do Marcador” coloque a palavra, nome, do marcador correspondente à aquela URL.

 

Para personalizar mais ainda essa Nuvem de Marcadores, note que:

• O número que aparece ao lado de “font-size” (indicado em azul no código) determina o tamanho da fonte,
  o que cria o efeito de algumas palavras maiores umas e menores que outras.
• De laranja está indicado onde você pode mudar o código das cores. Aqui usamos cinza e preto para criar o efeito dégradé, mas você pode usar as cores que quiser para cada palavra (dúvida sobre o código das cores? leia: Paleta de cores e seus códigos).

 

Cada linha semelhante a essa

<a style="font-size: 31px; color: #666666; text-decoration: none;" href="URL_do_Marcador 2">Nome do Marcadore 2</a>

se aplica a um marcador. No caso do código que mostramos aqui é possível adicionar até 15 marcadores. Se quiser menos, tire algumas linhas. Mas se desejar mais marcdores, basta adicionar essa linha e personalizar para se adequar à nuvem.

 

Salve o gadget e veja o resultado em seu blog. Faça testes para descobrir como pode se adequar melhor ao seu layout e como pode personalizar mais. Espero que ajuda a navegabilidade de seu blog.

 

Veja mais sobre Marcadores, lendo:

• Delimitar quantidade de Artigos das páginas de Marcadores
• Organizando seus Marcadores