Como Personalizar o Gadgets Marcadores - Estilo Setas | Quero Dicas Quero Dicas : Como Personalizar o Gadgets Marcadores - Estilo Setas

Quero Dicas : Como Personalizar o Gadgets Marcadores - Estilo Setas

Como Personalizar o Gadgets Marcadores - 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 principal 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! Na minha opinião =D
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.

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.

Compartilhe


13 comentários:


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

Apenas peço que leia:

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 palavras de baixo calão, não serão publicados ou respondidos.

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

4 - Por favor, não adicione links externos nos comentários.

Beijinhos ♥

  1. Respostas
    1. 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 ♥

      Excluir
  2. 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!

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

      Excluir
  3. 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á.

    ResponderExcluir
    Respostas
    1. 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.

      Excluir
  4. 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?

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

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

    Chá de Menta

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

      Excluir
  6. Seu tutorial foi o unico que deu certo no meu blog!! Obrigada, ADOREI <3

    ResponderExcluir
    Respostas
    1. Que bom que tenha dado certo Sara. Fico super feliz! =D
      Beijinhos ♥

      Excluir

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir