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:
Veja que o trecho se repete varias vezes apenas alterando size-1 para size-2, size-3 e assim por diante:
#Label1 .label-size-1 a {color:#8B1A1A;font-size:13px;}
#Label1 .label-size-1 a:hover {color:#000;}
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.
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:
#Label1 .label-size-1 a {color:#8B1A1A;font-size:13px;}
#Label1 .label-size-1 a:hover {color:#000;}
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.
Marcadores: Códigos, CSS, Personalizar