Marcadores são como categorias adicionadas na postagem do blogger(veja como), uma vez adicionada essa palavra(categoria) o blogger vai criar uma página para ela, e, se em outros posts você usar a mesma categoria o blogger vai juntar esses posts na mesma página, é uma forma de classificar seus posts por marcadores/categorias, e com o gadget de marcadores é criado automaticamente uma espécie de "menu" na lateral do BlogSpot, isso permite que as pessoas escolham e leiam mais coisas de seus interesses.
É muito simples adicionar o gadget com marcadores, e, não precisa mexer em códigos, a menos que você queira personalizar mais com Css.
- Acesse blogger
- Procure e clique em Design
- Observe se você está na aba Elementos da página
- Clique em Adicionar um Gadget
- Na janela que abrir observe se você está em Noções básicas, se não, clique nela
- Após, procure e clique em Marcadores Clique para aumentar
- Abrirá nova página para Configurar marcadores
- Escolha um Título para o gadget marcadores
- Como quer Exibir os marcadores, poderá escolher Todos os marcadores ou apenas Marcadores selecionados por você.
- Se escolher Marcadores selecionados abrirá uma opção de Editar, pode clicar para escolher os marcadores
- Abrirá um quadro(Selecionar marcadores a serem exibidos)
- Pode desmarcar aqueles marcadores(palavras) que você acha que são menos relevantes para o seu blog ou que você pensa que o visitante teria menos interesse em clicar
- Após ter escolhido os marcadores clique no botão CONCLUÍDO
- Em Classificação escolha se quer mostrar Em ordem alfabética ou Por frequência
Por frequência mostrará primeiro os marcadores que tiverem sido mais usados, ou seja, aqueles que tiverem mais postagens
- Segunda opção de Exibir, Lista ou Cloud
A opção Cloud mostra eles lado a lado, bom para quem tem muitos marcadores, pois ocupa menos espaço, e, os marcadores com mais postagens vão ficar com tamanho de fonte maior tendo mais visibilidade e deixando mais claro aos visitantes que é um marcador mais utilizado no blog
- Você pode marcar a opção Mostra número de postagem por marcador
- Depois de pronto é só clicar em SALVAR
- Volte a página Elementos da página e clique em SALVAR
Adicionar gadget Marcadores no Blogspot:
Quando quiser, é possível mudar a configuração do gadget
Personalizar o gadget marcadores, usando Css
Não é algo necessário, pois o gadget já terá uma aparência que combina com o layout de seu blog, mas é possível mudar bastante a aparência do gadget marcadores, claro que exige muita de dedicação e atenção, principalmente porque usa Css e para alguns isso é nada fácil.
A dica para quem ainda não fez isso ou tem pouca prática em Css é usar um blog de testes antes de aplicar a seu blog
Onde e como adiciona estilos Css no blogger
- Acesse o blogger
- Clique em Design
- Clique em Editar HTML
- Clique em Baixar modelo completo para fazer uma cópia de seu código e após salve em seu computador
- Você deverá localizar esse código:
]]></b:skin>
Exatamente antes/acima desse código ]]></b:skin> pode deixar uma linha em branco e adicionar códigos Css - Depois de pronto é só clicar em SALVAR MODELO
Códigos para Css que fazem mudar o estilo
Os códigos abaixo podem ser inseridos no Css do blogger, no local indicado acima, porém, vou mostrar alguns códigos e você poderá modificar de acordo com o estilo que quiser para o tipo de gadget marcadores(Lista ou Cloud)
O gadget marcadores tem uma ID chamada Label1 e dentro dela tem tags Html e algumas dessas tags tem uma classe(nome, apelido) e para esses elementos é possível criar algumas personalizações
Uma coisa fundamental é saber que o código de estilo(propriedade, qualidade) estará entre chaves{}, mostrarei alguns abaixo, e existem varios códigos que geram diversos tipos de estilização, esses são separados por ponto-virgula ; e você pode mudar eles, apenas observando como os códigos são colocados, e tendo cuidado de não adicionar caracteres diferentes que não existem ou são irregulares para essas áreas
Códigos para personalizar gadget marcadores Cloud
O número que indica quantos posts por categoria/marcador
#Label1 .label-count{font-size:small; color:green;}Esse código deixaria o tamanho da fonte dos números dos marcadores iguais e verdes, mas você pode substituir aqueles códigos {dentro de chaves} por outros.
font-size:small; Tamanho de fonte pequeno
font-size:x-small; Tamanho de fonte muito pequeno
font-size:xx-small; Tamanho de fonte muitíssimo pequeno
font-size:medium; Tamanho de fonte médio
font-size:large; Tamanho de fonte grande
color:green; Cor da fonte verde
color:blue; Cor da fonte azul
Aparência do link de marcadores Cloud
Para o gadget dos marcadores tipo Cloud o blogger usa 5 classes diferente para eles e, se baseando na quantia de posts para cada, ou seja, os marcadores com 1 post usa a classe label-size-1 e as outras classes são label-size-2, label-size-3, label-size-4 e label-size-5 e isso faz com que eles possam ter tamanhos de fonte diferente, mas, isso também permite outra personalização para essas classes, assim é possível colorir os links desse gadget, deixando parecido com essa imagem abaixo.
O código Css para cores de fonte do Cloud
.label-size-1 a, .label-size-1 a:visited{color:red;}
.label-size-1 a:hover{color:#000000;}
.label-size-2 a, .label-size-2 a:visited{color:blue;}
.label-size-2 a:hover{color:#000000;}
.label-size-3 a, .label-size-3 a:visited{color:#cccccc;}
.label-size-3 a:hover{color:#000000;}
.label-size-4 a, .label-size-4 a:visited{color:orange;}
.label-size-4 a:hover{color:#000000;}
.label-size-5 a, .label-size-5 a:visited{color:green;}
.label-size-5 a:hover{color:#000000;}Se observar o código acima pode ser percebido que é muita coisa para ter 5 cores diferentes para os links dos marcadores Cloud.
No código acima, color é usado para a cor de fonte e a cor delas pode ser escrito em inglês ou com um código hexadecimal como #cccccc que é cinza ou #000000 que é preto, deixei algumas linhas em destaque, essas são para as cores de fonte ao passar o mouse
Centralizar a Cloud
Por padrão, ou seja, o Css que o blogger usa para esse gadget marcadores Cloud, faz com que ele ocupe toda a largura de onde estiver, o blogger usa no seu Css text-align:justify; e isso não funciona no Internet Explorer7, o 8 não sei, de qualquer forma é possível centralizar o gadget em questão(apenas os links), aí ele fica mais parecido com uma nuvem(mais bagunçado), parecido com a imagem abaixo.
Código que centraliza o Cloud
.cloud-label-widget-content{text-align:center;}Colocar borda nos links Cloud
É possível dar um efeito bem diferente nos links dos marcadores Cloud, colocando uma borda neles, eles ficarão parecendo com uma parede de tijolos, mas, é bom que a borda seja de uma cor inversa ao fundo da lateral. Parecido com imagem abaixo.
Código Css
#Label1 .label-size a{border:solid 1px #ffffff; text-decoration:none;}Dentro de chaves está o código de borda e seguido dele seu tipo, espessura e código Hexa para cor branca #ffffff e esse código de cor pode ser substituído pelo nome de uma cor em inglês ou pode encontrar mais cores hexadecimais(clique aqui)
text-decoration:none; é para impedir o traço embaixo dos links, nesse caso, apenas para o gadget marcadores Cloud
Quem usa os números de posts por marcadores pode querer incluir os mesmos dentro da borda, sendo assim mude e use o exemplo de código abaixo:
#Label1 .label-size{border:solid 1px #ffffff; text-decoration:none; background:#CC9933; margin:3px;}
Nesse ultimo exemplo adicionei um background(fundo) com a cor hexa #CC9933 que é próxima de marrom, e, também uma margin(margem) de 3 pixeis, isso mostra as possibilidades de estilo em Css, você pode retirar eles ou modificar e adicionar estilos
Finalizando, a primeira coisa e básica é saber onde adiciona o estilos Css no blogger, depois você terá que copiar os nomes das classes e Id do gadget marcadores{com estilos} e colar no local para Css do HTML de seu blogger(como descrito acima), e, pode modificar o que estiver dentro de chaves para conseguir um estilo que quiser, lembrando que diferentes áreas do gadget pode ter uma classe(nome) e é possível personalizar essas áreas usando a classe correta
- Estilo das postagens do BlogSpot com Css
- Mudar fundo, fonte e cores do gadget do BlogSpot
- Aumentar tamanho da fonte do título do post
- Mudar cores e fundo do título do post do BlogSpot
- Tipo de fonte para blog e site com css e html
- Classificar com estrelas o post no blogspot
- Mudar cor e fundo do título dos gadgets
- Texto com link na sidebar do BlogSpot
PArabens
ResponderExcluirparabens pela dica
ResponderExcluirQuem usa lista de marcadores um em baixo do outro, pode personalizar os links mais ou menos assim:
ResponderExcluir.list-label-widget-content a:link{color:gray;}
.list-label-widget-content a:visited{color:orange;}
.list-label-widget-content a:hover{color:blue;}
A primeiro código é referente a cor do link, o segundo é a cor do link visitado e o ultimo ao passar o mouse(hover) e as cores estão escritas em inglês, você pode usar cores básicas em inglês
Não conseguir colocar nas minhas categorias que são em lista com esse seu código, poderia me ajudar.... quero que a cor do link fique em branco e quando clicar fique e laranja.... e onde eu coloco nesse código: #Label1 ul li{
Excluirbackground:#003bb2;
border: solid 1px #51b8ce;
padding: 8px;
border-radius: 4px
}
Se entendi você quer o link do gadget marcadores com cor de letra branca e cor de letra laranja ao ser clicado, ou seria letra laranja ao passar o mouse? Cada caso é um pouco diferente, e, seu código acima não é responsável pelo link, você pode acrescentar outro exatamente após/abaixo dele(depois do caractere fecha-chaves do código que você mostrou acima), ou na parte apropriada do Css do Html.
ExcluirTambém é bom saber onde coloca códigos Css no blogger, clique, ou, se já tem uma boa noção pode tentar diretamente no HTML do blogger, prefira antes usar um blog de testes.
Esse meu comentário é apenas para personalizar a cor da letra de link do gadget marcadores para quem usar ele na opção lista.
Aí pode adicionar o seguinte código, para a cor da letra branca do link do gadget marcadores em lista:
#Label1 ul li a{color:white;}
Para a cor da letra laranja do link do gadget marcadores em lista quando passa o mouse sobre o link:
#Label1 ul li a:hover{color:orange;}
Para a cor da letra laranja do link do gadget marcadores em lista quando clicar sobre o link:
#Label1 ul li span, #Label1 ul li a:active{color:orange;}
Esse ultimo código vai fazer com que a cor dos números fiquem em laranja, se você não quiser que isso ocorra aí retire esse:
#Label1 ul li span,
esse acima é responsável pela cor dos números da quantia de item que cada marcador tem, mas, cuidado, no código que mostrei tem uma vírgula e se você remover parte que indiquei deve remover ela também.
Lizandro Lenz, vc é um gênio.... obrigadão mesmo.... deu certo... valeu cara.... irei divulgar esse site pra todos meus amigos valeu cara
Excluirtem alguma gadget para o blogspot que seja um formulário?
ResponderExcluirde preenchimento de dados?
FRED PANCEV
ResponderExcluirDe gadget não lembro de nenhum, mas tem sites para criar um formulário de contato, aí eles irão disponibilizar o código para você inserir na lateral, o próprio blogger tem a opção de formulário de comentário incorporado.
Seria difícil um gadget para isso, porque geralmente um formulário apenas não faz muita coisa, geralmente precisa outros arquivos que irão receber e processar esses dados e dar o destino a eles. Sendo assim, dependendo para que você quer, precisaria ter um local para hospedar esses arquivos e precisaria saber fazê-los para trabalharem de acordo com a finalidade necessária.
Olá. No template do meu blog não tenho como inserir um gadget na lateral direira, somente em cima abaixo do cabeçalho ou no rodapé. E não quero desfazer do meu template pois ja me deu muito trabalho até agora.
ResponderExcluirComo faço para inserir espaço na lateral direita para colocar novos gadgets?
Agradeço pelas ótimas dicas.
Leonardo editor.
Leonardo editor
ResponderExcluirSe for um novo modelo do blogger você pode colocar 2 laterais, clique, os novos modelos já são preparados para uma ou duas laterais.
Se não for um dos novos modelos do blogger, fica muito difícil, provavelmente teria que aumentar a largura e a imagem de fundo ficaria irregular, teria que criar uma nova div, e alterar muita coisa no Css.
oi, eu gostaria de aumentar a letra dos marcadores. estao muito pequenos na parte de cima do blog, é dificil ler :( obrigada
ResponderExcluirAnna Lídia
ResponderExcluirPrimeiro tente ir em Design >Design de modelo >Avançado e lá veja se não tem a opção Rodapé do post ou algo parecido, se tiver clique nessa opção e terá uma opção de aumentar a fonte.
Se não existir essa opção, você terá que adicionar um código no Css do HTML do seu blog, veja como adiciona Css no blogger, clique
Já sabendo como, pode adicionar apenas um desses trechos de códigos:
.post-labels,.post .post-labels,.post-footer .post-labels{font-size:120%;}
ou:
.post-labels a,.post .post-labels a,.post-footer .post-labels a{font-size:120%;}
Você deve aumentar ou diminuir o valor que deixei em 120
Faça uma cópia de segurança de seu código antes, e, prefira usar um blog de testes primeiro.
como posso trocar a descrição do marcador por uma imagem ???
ResponderExcluirgostaria de trocar por exemplo marcador tema Natal por uma imagem relacionada nesse tema, mais até agora não consegui.....vc pode me ajudar ...agradeço
Lúbia Liz
ResponderExcluirNesse caso seria melhor fazer uma imagem-link,clique com o endereço Url do marcador e colocar ele separadamente na lateral do blog.
eu sei que é ruim para o visitante se mover mais eu não quero um gad get de marcadores e minha duvida é se eu não colocar esse gad get perderei colocação no google tipo elas não são as palavras chaves ou não tem nada a ver o gad get de marcadores serve apenas para o visitante se identificar no blog ?
ResponderExcluirO gadget marcadores não vai, diretamente, prejudicar e talvez nem melhorar a posição nos resultados do Google, serve mais para o visitante se identificar no blog, mas as palavras dele servem para reforçar um pouco determinadas palavras em seu blog, por exemplo, se seu blog fosse sobre chocolate, poderia ter uma lista de links com as palavras cacau, chocolate amargo, e outras que tem maior relevância para seu blog, isso, sem exagerar muito na quantia de palavras, reforçaria um pouco seu blog para aquelas palavras, não faria um milagre, mas uma pequeníssima ajuda somada a outras...
ExcluirAtenção, apesar de ter ligação, não confunda o gadget marcadores, com os marcadores abaixo do post e que você inseri ou escolhe ao postar, esses podem ajudar um pouco mais a dar uma melhoradinha na posição de resultados de busca, um exemplo seria que alguns sites são capazes de 'ler' elas e usá-las como um tipo de 'métrica' para identificar seus artigos em determinada categoria e assim criar um links para seu blog.
E possivel fazer com que os links de marcadores fim por cima de uma imagem de fundo, se sim como. Obrigado
ResponderExcluirObrigado, lendo seus posts, encontrei a solução que precisava e ficou show de bola, valeu!!
ResponderExcluir