terça-feira, 25 de agosto de 2009

Personalizando a nuvem de marcadores do Blogger

Nível: intermediário

Como muitos de vocês já devem ter lido no Dicas Blogger ou no Ferramentas Blog, o Blogger finalmente implementou nos Marcadores os recursos de:

  • Marcadores selecionados: você pode selecionar apenas clicando os marcadores que não quer exibir.
  • Cloud: você pode exibir seus marcadores em formato de nuvem.
  • Número de posts: você pode desmarcar a opção de mostrar o número de postagens por marcador.

Isso significa que você não precisa mais se arriscar modificando o código fonte para inserir esses recursos, basta selecionar essas opções no próprio Blogger.

Centralizando a nuvem

A nova nuvem vai seguir o alinhamento que já está configurado para seus widgets, seja ele qual for. Se os seus widgets não são centralizados, mas você quer centralizar a nuvem de marcadores, basta inserir o seguinte código na folha de estilos do seu blog, ou seja, acima da tag </b:skin>:

.cloud-label-widget-content {text-align:center;} ]]></b:skin>

Definindo os tamanhos:

Uma das características da nuvem de marcadores é que o tamanho da fonte aumenta conforme o número de posts. Se após configurar sua nuvem não gostar do resultado, você poderá personalizar os tamanhos também na folha de estilos. Não custa destacar que label-size-1 é a classe do que tem menos posts e label-size-5 do marcador que tem mais.

.label-size-1 {font-size:9px;} .label-size-2 {font-size:11px;} .label-size-3 {font-size:13px;} .label-size-4 {font-size:14px;} .label-size-5 {font-size:15px;} ]]></b:skin>

Definindo as cores:

Além dos tamanhos, você pode definir uma gradação de cores para os marcadores:

.label-size-1 a, .label-size-1 a:link {color:#3399ff} .label-size-2 a, .label-size-2 a:link {color:#6699cc} .label-size-3 a, .label-size-3 a:link {color:#3366cc} .label-size-4 a, .label-size-4 a:link {color:#3399ff} .label-size-5 a, .label-size-5 a:link {color:#0033cc} .label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {color:#0000cc;} ]]></b:skin>

Código único para você que quer aplicar todos as personalizações:

.cloud-label-widget-content {text-align:center;} .label-size-1 {font-size:9px;} .label-size-2 {font-size:11px;} .label-size-3 {font-size:13px;} .label-size-4 {font-size:14px;} .label-size-5 {font-size:15px;} .label-size-1 a, .label-size-1 a:link {color:#3399ff} .label-size-2 a, .label-size-2 a:link {color:#6699cc} .label-size-3 a, .label-size-3 a:link {color:#3366cc} .label-size-4 a, .label-size-4 a:link {color:#3399ff} .label-size-5 a, .label-size-5 a:link {color:#0033cc} .label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {color:#0000cc;} ]]></b:skin>

A imagem no início do post é de uma nuvem de marcadores que utiliza todos esses recursos.

Se você usou no seu blog os códigos do tutorial Marcadores em formato de nuvem ou do Marcadores em formato de nuvem 2 e agora quer utilizar o recurso do Blogger, sem modificações no código, basta excluir o widget de Marcadores e adicioná-lo novamente com as configurações desejadas.

Até mais!

10 comentários:

  1. Olá Povo do blog, para quem fez esta postagem esta faltando um simples negocio que voces esqueceram de dizer: ONDE EU COLOCO OS CERTOS CÓDIGOS?????

    ResponderExcluir
  2. Nany, primeiro aviso que este é um post de nível intermediário. Se você nunca editou o código do seu blog antes, deve começar pelos posts de nível iniciante.

    Até mais!

    ResponderExcluir
  3. Nany, outra coisa: aqui não tem povo. Este blog é escrito única e exclusivamente por mim, Helen Fernanda.

    ResponderExcluir
  4. Olá Helen. Boa dica mas meu problema agora é mudar a exposição dos marcadores dentro da postagem. No meu blog http://maniadesivos.blogspot.com usei uma template chamada Mosaicus e não gostei da exposição dos benditos ao lado do post, então para não excluir e me confundir com os marcadores, apenas diminuí a fonte. Estou querendo colocá-las no pé da postagem como uma nuvem de tags mesmo. Tudo de bom, abraços!

    ResponderExcluir
  5. Mais uma vez obrigado pela dica.Site muito legal

    ResponderExcluir
  6. Oi Helen, parabéns pelo Blogge :) Tenho uma dúvida: os marcadores faço bem, mas como trocar as palavras q aparecem no marcador por mini-banners?! Clicando em um mini-banner abre (exemplo)um player na home page e se clicar em outro mini-banner entra outro player no lugar do anterior. Agradeço a disponibilidade na resposta, bjs e continua com este excelente blogge :)

    ResponderExcluir
  7. Tuga,

    Se entendi a sua pergunta, não tem nada a ver com marcadores. Se tem a ver com marcadores, eu não entendi.

    Até mais!

    ResponderExcluir
  8. Oi de novo Helen, obrigado pela resposta. Mas o q queria era fazer do genero deste blog (serve como Exemplo) http://damaantiga.blogspot.com/
    Tem os banners das Tvs e ao clicar nelas abre o player do respectivo banner, é q já tentei e só consigo criando paginas extras, o problema é q o Blogger so deixa criar 10 paginas. Agradeço desde já a resposta. Bjs e continua com este excelente site :)

    ResponderExcluir
  9. Tuga,

    Não são marcadores, são links de imagens. Recomendo este post.

    Até mais!

    ResponderExcluir
  10. Oi Helen, td bem, obrigado pela resposta. Eu já sabia q são links pois uso muito nos sites q faço. Sou novato mas aqui no Blogger.com e estava a tentar perceber... Para colocar link na imagem tens de ter o destino feito e colocado em determinada pagina "no meu caso o codg embed do canal de tv" e nao pop ups de imagem ou fixa. Tem de abrir só o player na Home (sem alterar o resto do conteudo, só mudam os players), logo exige colocar os codgs embed em algum sitio no Blogger.com. Obrigado e desculpa estar a chatear com este assunto, Tks e bjs,
    ps: outro site como exemplo:http://sportlivedirecto.blogspot.com/
    *Agradecia que ilimines este link*

    ResponderExcluir

Posts relacionados