Como Colocar e Personalizar os Marcadores (Categorias) do Blog

Veja como inserir e personalizar a lista de categorias (marcadores) no seu blog. Você pode colocar cores de fundo dando aparência de botões nos marcadores do blogspot usando apenas algumas linhas de códigos CSS para formatar e personalizar as cores os links dos marcadores do seu blog.

Como colocar e personalizar os marcadores (Categorias) do blog

Colocar Marcadores/Categorias no Blogger


Entre na pagina Layout > Adicionar Gadget > Marcadores.

Selecione o item: Todos os marcadores. Use a opção nuvem (cloud) e não marque a opção: Mostra o número de postagens por marcador. Isto é por causa do código que vamos mostrar, mas se quiser uma lista normal de marcadores pode escolher e testar as opções que desejar até que seu gadget de marcadores fique do jeito que você gosta.

gadget de marcadores do blogger

Personalizar os Marcadores do Blogger


Agora entre na pagina modelo, clique no botão editar HTML e procure (ctrl+F) por ]]></b:skin>.

html do blogspot

Agora coloque esse código antes dele:

.Label a{
background-color:#0090D5;
padding:5px 10px;
margin:5px;
font-size:13pt;
color:#fff!important;
display:block !important;
text-decoration:none;
border:none !important;
float:left; }
.Label a:hover{
background:#ff0;
color:#000!important;}

Neste código você pode as cores e espaçamento como desejar, veja abaixo:

background-color:#0090D5; - cor de fundo
padding:5px 10px; - espaço dentro do botão: 5px acima e abaixo e 10 para os lados
margin:5px; - espaço vazio em volta dos botões
font-size:13pt; - tamanho do texto
color:#fff!important; - cor do texto

Veja aqui alguns links uteis para ajudar na modificação do CSS dos botões:
Gerador de Código HTML das Cores
Colocar ou alterar as bordas
Como fazer e colocar botões no blog
Como Formatar o Texto do Blog

Embora tenhamos configurado uma cor de fundo nem todos os marcadores ficam exatamente com a mesma cor isso é próprio do blogger, mas não achamos que há problemas nisso afinal são tons de cores bem parecidas com aquela que configuramos. Encontramos essa dica no blog de tutoriais: all blog tools e achamos interessante publicar aqui porque é um código simples de usar e pode dar um bom efeito visual nos marcadores do seu blog.
Related Posts with Thumbnails

Link desta Pagina

Compartilhe essa Página

27 comentários:

  1. Muito bom esse Post, Parabéns!!
    Queria esclarecer uma dúvida...
    Você sabe como responder um comentário no Blog. Tenho várias perguntas e não tem a opção "Responder", igual a grandes blog...

    DESDE JÁ, OBRIGADO!!!

    ResponderExcluir
  2. Matheus mas em alguns comentários do seu aparece a opção responder? Normalmente os templates já vem com essa opção instalada... então deve ser falha do template.

    ResponderExcluir
  3. Não! Já pesquisei e não encontrei. Teria alguma forma de me ajudar?
    É porque eu gosto muito do meu template atual,sabe...

    ResponderExcluir
  4. eu não tenho os códigos, talvez se criar outro blog para comparar os códigos dos comentários encontre o que falta (já resolvi alguns problemas desta forma)

    ResponderExcluir
  5. Não consegui, mas obrigado assim mesmo!!

    ResponderExcluir
  6. Fabiano Roberto...

    Há um novo Gadget do Wikipédia, poderia criar um tutorial explicando sua relevância, recursos, entre outros...
    Para aqueles que ainda não sabem de sua existência no Blogger!!

    É ISSO, OBRIGADO!


    ResponderExcluir
  7. Matheus obrigado pela sugestão, vou olhar o gadget

    ResponderExcluir
  8. De nada! Está localizado em... "Mais Gadgets" !!!

    ResponderExcluir
  9. Boa Noite Fabiano !! Sempre vejo suas dicas e me ajudam d+ , acabo de entrar em um blog , onde os marcadores ficam piscando , quero fazer isso no meu tbm poderia me ajudar ? Dê uma olhadinha o blog é esse http://www.simplesechique.com/

    ResponderExcluir
  10. esse código faz o texto piscar:

    text-decoration:blink;

    mas não funciona corretamente em todos os navegadores.

    para usar nos marcadores deve estar no estilo

    .Label a{ ....

    ResponderExcluir
  11. Muito obrigado pela resposta e ajuda !!

    ResponderExcluir
  12. Coloquei esse cÓdico ficou legal .Muito obrigado

    ResponderExcluir
  13. Fabiano eu postei uma pergunta,mas esqueci a pagina
    que te fiz. Vou te pergunta de novo. Eu baixei um templete
    muito bacana, mas queria colocar um Baner personalizado
    ao colocar esse baner, a imagem fica toda na vertical.
    Como faço para colocar na Horizontal ? Desde já agradeço

    ResponderExcluir
  14. Oi fabiano voltei,acho que me pronunciei errado.Eu falei Baner, mas é templete que esta na vertical, sempre que coloco fica na vertical, quero colocar na HORIZONTAL. EXEMPLO: NO SEU BLOG, ESTA ESCRITO: DICAS PARA BLOG. Bom....... é essa área que eu quero colocar um templete, entendeu ?? sempre que coloco fica na vertical. pode me ajuda? desde já obrigado

    ResponderExcluir
  15. se está um embaixo do outro talvez tenha < br/ > ou < p > entre as imagens... isso faz mudar de linha

    ResponderExcluir
  16. valeu, vc ajudou pra caramba :D

    ResponderExcluir
  17. Fabiano como colocar esse marcador no Blog na nova versão???

    ResponderExcluir
  18. qual nova versão? você fala da nova pagina editar html?

    se for é só usar o ctrl F para achar os códigos

    ResponderExcluir
  19. Olá queria aprender como coloco os post dentro de outras categorias mas nao como marcadores, e sim como esta no seu blog, exemplo: Novos Tutoriais
    Assuntos Diversos
    Melhores Dicas
    Templates Prontos
    Personalizar Blogs
    Editar Imagens

    ResponderExcluir
  20. Thamires

    não são categorias ... é apenas um menu comum com links de algumas postagens e paginas estáticas do blogger

    veja aqui:
    Menu Horizontal com Efeitos no Blogger usando CSS

    ResponderExcluir
  21. Muito obrigado, é por isso que este blog está nos meus favoritos <3

    ResponderExcluir
  22. Achei super fofo acjudou bastante.. q-

    ResponderExcluir
  23. Fabiano Roberto amigo estou aqui precisando de sua ajuda mais uma vez, vamos lá você saber dizer se existe alguma forma de configura o sistema de marcadores para quando eu clica em uma categoria, carregar diretamente dentro da postagem para que não seja preciso clica em " continuar lendo " é pq no meu site só vou criar uma postagem por categoria, agradeço desde já

    ResponderExcluir
    Respostas
    1. quando clique no link do marcador vai para uma pagina com uma lista de posts daquele marcador... ou seja não tem como ir diretamente para um post

      Excluir