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
Como Colocar e Personalizar os Marcadores (Categorias) do Blog
4/ 5
Oleh

32 Comentários

Matheus
12 de março de 2013 19:22 delete

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!!!

Reply
12 de março de 2013 21:01 delete

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.

Reply
12 de março de 2013 23:18 delete

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

Reply
12 de março de 2013 23:52 delete

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)

Reply
13 de março de 2013 07:10 delete

Não consegui, mas obrigado assim mesmo!!

Reply
13 de março de 2013 10:01 delete

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!


Reply
13 de março de 2013 10:40 delete

Matheus obrigado pela sugestão, vou olhar o gadget

Reply
13 de março de 2013 13:26 delete

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

Reply
Anônimo
16 de março de 2013 20:13 delete

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/

Reply
16 de março de 2013 21:34 delete

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{ ....

Reply
Anônimo
18 de março de 2013 17:13 delete

Muito obrigado pela resposta e ajuda !!

Reply
19 de março de 2013 14:50 delete

Coloquei esse cÓdico ficou legal .Muito obrigado

Reply
19 de abril de 2013 18:56 delete

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

Reply
20 de abril de 2013 23:18 delete

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

Reply
20 de abril de 2013 23:38 delete

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

Reply
30 de abril de 2013 09:18 delete

valeu, vc ajudou pra caramba :D

Reply
16 de setembro de 2013 23:04 delete

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

Reply
16 de setembro de 2013 23:22 delete

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

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

Reply
22 de novembro de 2013 15:52 delete

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

Reply
22 de novembro de 2013 17:02 delete

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

Reply
28 de novembro de 2013 19:04 delete

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

Reply
6 de janeiro de 2014 00:29 delete

Achei super fofo acjudou bastante.. q-

Reply
1 de abril de 2014 23:03 delete

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á

Reply
1 de abril de 2014 23:16 delete

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

Reply
17 de setembro de 2014 11:02 delete

Muito legal e fácil este tutorial. Obrigado! Só tenho uma dúvida. Eu tenho mais de um gadget de marcadores diferentes porque resolvi separar alguns assuntos, portanto, é possível aplicar em apenas em um gadget de marcadores específico? Desde já muito obrigado

Reply
17 de setembro de 2014 11:14 delete

é possível colocar 2 gadget de marcadores e escolher quais links aparecem em cada um deles.

então poderia fazer formatação diferente em cada gadgets pois o nome do estilo seria diferente (#Label1 e #Label2).

mas fazer apenas um dos links com formatação diferente dentro do mesmo gadget não tem como fazer.

Reply
16 de outubro de 2014 21:45 delete

Obrigado !!

:) :D :) :D :) :D

Reply
8 de janeiro de 2015 21:35 delete

adorei, consegui personalizar o meu, muito obrigado <3

http://pinkisnotrose.blogspot.com.br/

Reply
25 de julho de 2015 21:08 delete

Deu muito certo. O resultado ficou ótimo. Obrigado pela ajuda, man.
www.mais40bemcuidado.com.br

Reply