Nuvens de tags são usados para exibir todas as categorias ou marcadores existentes em um blog.
O design inerente deste gadget no Blogger é muito pequeno e tem um monte de espaço para a criatividade. Neste post vamos mostrar um modelo de marcadores que você pode facilmente integrar no seu blog.
As propriedades CSS3 Gradientes e box-shadow também são usados para dar-lhe uma aparência mais sofisticada e enérgica. Vamos começar então…
Antes de começar certifique-se que o seu blog já tem o gadget marcadores já definido a opção de exibição para Cloud, como mostrado abaixo.
Depois de ter feito isso, então vamos avançar para o próximo passo
Como adicionar estilo de marcadores no blogger?
1. Acesso o Painel do Blogger e navegue até Modelo > Editar HTML
(Veja: Como acessar o código XML/HTML na nova interface do blogger)
2. Encontre o seguinte ]]> (use CTRL + F para encontrar o código)
3. Copie e cole o seguinte código antes de ]]>
/*————- Start label by www.dicasblogger.org ————-*/
.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:””;
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:””;
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}
/*————- End of label by www.dicasblogger.org ————-*/
4. Clique em Salvar modelo e prontinho!
Qualquer duvida não hesite em perguntar.
Até a próxima!
Ótimo tutorial. Testei e aprovei 🙂 Mas Kemuel bem que você poderia ensinar como colocar a ‘Fancy Box’ no Blogger. Procuro por todo canto e não acho. Por favor faça um post/tutorial.
Valeu brother! Vamos providenciar. Aguarde.
Parabéns.Que Blog Maravilhoso!
Parabéns pelo blog!
Obrigado Carol.
Valeu!
Cara, gostei muito. Da para ensinar com bota esse negocio que tem aqui de: ” Porfavor, leia antes de comentar “.
Sobre o tutorial, simples, rápido e útil.
Aguarde que vou fazer um tutorial sobre isso.
Valeu!
Olá Kemuel,muito bom seu blog, só tenho uma duvida tem como mudar a cor do marcador ao passar o mouse em cima.
por exemplo aqui no seu blog ao passar o mouse em cima do marcador ele fica escuro, tem como mudar essa cor.
valeu e sucesso!
Tem sim. Procure essa parte do codigo:
.label-size a:hover{background:#555;}
Troque #555; pela cor desejada.
Valeu!
ADOREI TEU BLOG SHOWWWWW.
PRECISO SABER QUAL O CODIGO DA COR ROSA OU LILAS PARA TROCAR A COR DO MARCADOR PODE ME AJUDAR POR FAVORRR
LINDO TRABALHO DE AJUDA PARA NOS BLOGUEIROS
Elisandra Santos, eu mesma consigo te responder sua dúvida.
Tem um site que eu particularmente uso que tem a Tabela de HTML de cores olha só: http://www.ufpa.br/dicas/htm/htm-cor2.htm
É bom demais.
Bjj
Kemuel aconteceu o seguinte: os marcadores ficaram tudo belezinha mas os números ficaram na frente do marcador.
O que faço para tirá-los de lá??
Olá coloquei o marcador no meu blog
http://www.fofuchasefuxicos.blogspot.com.br/
e apareceu os números na frente o que são e o que faço para retirar
hoho,….bacana… valeu