Nuvem de Tags Coloridas - Modificar Cores dos Marcadores - Dicas para Blogs
Nuvem de Tags Coloridas - Modificar Cores dos Marcadores
Personalizar os marcadores do blogger pode ajudar a melhorar a aparência do seu blog. Você pode trocar as cores e tamanho das fontes dos marcadores do blogspot apenas com algumas linhas de código CSS na sua pagina editar HTML e assim fazer a formatação de texto das categorias do seu blog.
Para usar esse tutorial e personalizar os marcadores do seu blog você precisa usar os marcadores em forma de nuvem de tags (could), portanto antes de começar verifique isso no seu blog. Mas se quiser personalizar a lista de links dos marcadores veja esse tutorial sobre: Personalizar gadgets do Blog.
Agora entre na pagina modelo > editar HTML, procure por ]]> e cole esse código antes dele:
#Label1 .cloud-label-widget-content {text-align:center;font-weight: bold;}
#Label1 .cloud-label-widget-content span {display: inline-table;line-height: 1.2;padding:0 0 0 10px;vertical-align: middle;}
#Label1 .label-size-1 a {color:#8B1A1A;font-size:13px;}
#Label1 .label-size-1 a:hover {color:#000;}
#Label1 .label-size-2 a {color:#FFC125;font-size:14px;}
#Label1 .label-size-2 a:hover {color:#000;}
#Label1 .label-size-3 a {color:#00008B;font-size:16px;}
#Label1 .label-size-3 a:hover {color:#000;}
#Label1 .label-size-4 a {color:#228B22;font-size:18px;
#Label1 .label-size-4 a:hover {color:#000;}
#Label1 .label-size-5 a {color:#514762;font-size:20px;}
#Label1 .label-size-5 a:hover {color:#000;}
Veja que o trecho se repete varias vezes apenas alterando size-1 para size-2, size-3 e assim por diante:
Isso é a formatação dos links de cada tamanho de link da sua nuvem de tags, mas essa numeração é feita com relação à importância do link ou seja o marcador com estilo size-1 é maior (tem mais postagens) que size-2. E você pode trocar o tamanho de cada um deles alterando o valor que está em font-size:13px; e a cor em color:#8B1A1A;.
As linhas que tem a:hover são as cores do link quando o mouse está sobre ele e você pode alterar da mesma forma, veja aqui o código das corese também sobre alterar cores dos links.
Essa é uma modificação bem fácil de fazer no seu template e pode ser bem interessante para dar mais destaque aos marcadores do seu blog.
Anônimo 10 maio, 2012 18:29
Como aumentar o tamanho do link "Postar um comentário" (comentários em Pop-up). E tem como colocar uma imagem no lugar do link?
Elvis Henrique 10 maio, 2012 21:31
eu gostaria de saber se tem como mudar o endereço do blog redrecionando. Eu vi um blog que era "nightsytheircomics.blogspot.com" que mudou para "nightsy.blogspot.com" mas redrecionando, exemplo eu tenho parceiros, mas para eu não ter que avisar a todos os parceiros para mudarem meu banner eu já queria assim que acessasem meu blog redreciona-se para o novo endereço.
Fabiano Roberto 10 maio, 2012 23:40
Anonimo tente colocar no seu html o código
.comment-footer a {font-size:150%}
e ajustar o valor 150 para o tamanho que deseja
Fabiano Roberto 10 maio, 2012 23:43
Elvis Henrique o melhor seria você registrar um dominio, isso custa 30 reais ou menos por ano.
você poderia trocar o endereço do seu blog e depois criar um novo blog mas com o endereço antigo, por exemplo, você tem um blog com o endereço blog1 e você muda o endereço dele para blog2.
então você cria um novo blog com o endereço blog1 e coloca nele apenas o aviso que mudou de endereço e links para seu novo blog.
Anônimo 11 maio, 2012 01:12
Obrigado, Fabiano Roberto (sou o primeiro anônimo que comentou).
Mas tem como colocar uma imagem no lugar do link "Postar um comentário"?
Fabiano Roberto 11 maio, 2012 11:37
entre na pagina editar html, marque a opção expandir modelos de widgets e procure esse código
apague e coloque esse outro no lugar
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><img src="endereço da imagem" border="0" /></a>
claro precisa colocar um endereço de imagem no código
Luan Ferraz 11 maio, 2012 11:46
No meu Blog http://servosdemariaamordedeus.blogspot.com utilizo o template 3.0 do dicas blogger o código que me mandou procurar encontrei 5 como saber qual correto?
Fabiano Roberto 11 maio, 2012 11:56
tente procurar por body{....}
e colocar o código antes dele
esse código de formatação pode ser colocado em varias partes do blog essa é apenas uma sugestão de lugar.
Luan Ferraz 11 maio, 2012 17:36
No meu Blog http://servosdemariaamordedeus.blogspot.comutilizo o template 3.0 do dicas blogger o código que me mandou procurar encontrei 5 como saber qual correto?
Não achei esse código pode ser mais especifico...
Rosiel T.S. 18 maio, 2012 00:39
Escravo de maria,
Procure por body{ ou coloque antes de ]]></b:skin>
Unknown 14 junho, 2012 09:20
Gostaria de usar aquela nuvem de tags porem em forma de globo. Podem ajudar??
Fabiano Roberto 14 junho, 2012 09:34
os códigos que já vi para fazer a nuvem de tags em globo apresentam muitos erros e fazem o blog ficar mais lento.
se quiser tentar aqui tem um código: Colocar uma nuvem de tags no blog
Anônimo 14 julho, 2012 18:18
fabiano roberto o meu nao apareceu nada cara,ficou normal os links que ficam flutuando >ficou da cor preto claro
Fabiano Roberto 15 julho, 2012 00:40
anonimo acho que colocou os códigos em lugares errados ou faltou algum sinal nos códigos / > ' < "
Karen Tillvitz 16 abril, 2013 19:35
Olá Fabiano, a única coisa que quero alterar na minha nuvem de marcadores é a fonte; (para verdana)! Depois que mudei o layout do blog, não consigo mais mudar pelo "personalizar". Agora só no html! O link do meu blog é este... Está com o título "temas". Espero que você possa me ajudar. Desde já agradeço a atenção.
Fabiano Roberto 16 abril, 2013 20:00
Fernanda eu não testei mas se colocar o estilo de fonte (font-family: Verdana, Geneva, sans-serif;) em uma das duas primeiras linhas do CSS acredito que funcione.
deste jeito, mas não precisa colocar nas duas é que você precisa testar porque pode variar conforme outras configurações do seu template.
#Label1 .cloud-label-widget-content {font-family: Verdana, Geneva, sans-serif;text-align:center;font-weight: bold;}
#Label1 .cloud-label-widget-content span {font-family: Verdana, Geneva, sans-serif;display: inline-table;line-height: 1.2;padding:0 0 0 10px;vertical-align: middle;}
diikah 27 abril, 2015 21:06
ola n achei o ]]>
Fabiano Roberto 27 abril, 2015 23:18
pode colocar o código css em outras partes junto com os outros códigos, por exemplo, quanto termina o trecho body{..... }