Como Personalizar o Gadgets Marcadores do blog - Estilo Setas | Quero Dicas | Tutoriais para seu blogs


Como Personalizar o Gadgets Marcadores do blog - Estilo Setas


Eu já ensinei como personalizar os marcadores do blog com estilo Houver. Na dica de hoje estarei ensinando como personalizar os marcadores com estilos setas, as mesmas que aparece na imagem dessa postagem ←

Ela é ótima para dar um estilo diferente ao seu template, deixando mais agradável e atraente. Há dois estilos (lista ou nuvens), em nuvens ele ficará lindo! Minha opinião =D
Vem e aprenda.


Antes de modificar os marcadores em seu template, faça um Backup dele. Assim, caso você queira voltar ao estado anterior, ele estará guardado no seu computador. Não sabe fazer Backup? Não tem problema, clique aqui e aprenda.
Agora que você já fez o seu backup, vamos ao tutorial.

      Passo 1


1 - Acessar o Painel do seu blog e Layout.
2 - Clique em Adicionar Gadgets e em Marcadores.
3 - Escolha  Cloud (nuvem)


      Passo 2


Agora vamos adicionar o código em seu template.

1 - Ainda no Painel do seu Blog, clique Modelos e Editar HTML

2 - Com o HTML do seu template aberto procure pela tag ]]></b:skin>
Dica: Para ser mais rápido a procura, 1º clique dentro do HTML depois use CTRL + F e na caixa de pesquisa cole o código.

]]></b:skin> 


3 - Quando encontrá-lo, coloque acima dele o código abaixo ↓
/*---- Quero Dicas - http://querodicasde.blogspot.com ----*/ 
.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:#FF69B4;  /*----cor do fundo----*/ 
color:#FFFFFF; /*----cor da fonte ----*/ 
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 #40E0D0 transparent transparent; /*----cor da seta----*/ 
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: #FFFFFF; /*----cor da bolinha----*/ 

-moz-box-shadow:-1px -1px 2px #FF69B4;/*----cor da seta houver----*/
-webkit-box-shadow:-1px -1px 2px #FF69B4;/*----cor da seta houver----*/
box-shadow:-1px -1px 2px #FF1493;} 
.label-size a:hover{background: #40E0D0;}/*----cor houver----*/
.label-size a:hover:before{border-color:transparent #FF69B4 transparent transparent;}  /*----cor da seta houver----*/



 


      Passo 3


Agora que o código instalado em seu template, é hora de personalizá-lo.
Mude onde eu deixe em destaque ao lado de cada código
Exemplo: /*----cor do fundo----*/ ,

4 - Salve e Pronto!

Obs: Para ter um melhor resultado, sua lateral de Gadgets terá o tamanho maior que 330.

Espero que tenha gostado. E não deixe de deixar seu comentário Beijinhos

Este código eu já conheço a muito tempo, deste modo não sei de quem são os créditos. Caso seja você o criador, por favor, informe seu nome e link para que eu possa dar seus devidos créditos.
Me Contrate!

11 comentários

Clique e deixe seu comentários
quarta-feira, 17 junho, 2015 ×

Ola´Alice.
Felizmente em todos os templates existe este código. O que deve estar acontecendo é o espaço deixado na hora da busca ou Faça o seguinte:
Dê um clique dentro do HTML do template, depois clique simultaneamente Ctrl+F para abrir a caixa de busca. Copie o código , apareceram mais de um. Então veja se antes desse código encontrado, está ]]>, ficando assim "]]>". Daí, então cole o código do marcador e customize.
Se tiver mais alguma dúvida, avise! Beijinhos ♥

Resposta
avatar
admin
quinta-feira, 30 julho, 2015 ×

Valeu Bia, faz algumas horas que estava procurando e achei o seu tutorial, ficou assim : http://bloggerdelicate.blogspot.com
Esse é um novo template que estou fazendo se puder dar uma olhada e um feedback eu fico grato!

Resposta
avatar
admin
sexta-feira, 31 julho, 2015 ×

Visitei seu blog e achei bem legal, os marcadores deram um destaque lindo.
Parabéns e sucesso! =D

Resposta
avatar
admin
B K
sábado, 19 setembro, 2015 ×

Olá, ótimo tutorial, parabéns! Mas, infelizmente, estou tendo problemas ao editar o HTML do meu blog, não é só nos marcadores. Já tentei de tudo para mudar a data de lugar e também personalizá-la e nada... Quando fui aplicar o seu código, também não mudou nada. O que pode estar acontecendo? Obrigada desde já.

Resposta
avatar
admin
sábado, 19 setembro, 2015 ×

Olá BK
Pelo que entendi, acredito que você esteja aplicando nos lugares errados ou em seu template tem algum tipo script/plugin que esta bloqueando alguns dos recursos que você está aplicando.

Resposta
avatar
admin
sexta-feira, 16 outubro, 2015 ×

finalmente consegui depois de muito tempo tentando mas só um probleminha o tamanho está pequeno. Pois o nome do marcador nao esta aparecendo todo como muda o tamanho?

Resposta
avatar
admin
sexta-feira, 16 outubro, 2015 ×

Olá Bruna. Mexa em padding:
espero ter ajudado =D

Resposta
avatar
admin
segunda-feira, 29 fevereiro, 2016 ×

Nenhum tutorial de personalizar o gadget dos marcadores funcionava no meu blog, mas este funcionou certinho :D
Muito obrigada!
Beijos

Chá de Menta

Resposta
avatar
admin
segunda-feira, 29 fevereiro, 2016 ×

Que bom que tenha funcionado. Fico super feliz!
Beijinhos ♥

Resposta
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.