Oie ^-^ Dando sequência às postagens sobre a personalização dos modelos dinâmicos, dos quais nós já vimos como adicionar cabeçalho personalizado, evitar que ele flutue, usar 2 backgrounds, remover a barra com nomes dos modelos para ter um menu fofo com imagens e tudo, vamos editar uma outra parte super importante: os gadgets, o local em que você adiciona seus links, seguidores, perfil...nós vamos mudar os ícones padrão, a posição, visualização e escolher cores para eles. Lembrando que para adicionar um gadget nos modelos dinâmicos você deve ir em Layout-Elementos da Página-Adicionar Gadget e escolher na lista aqueles que possuem uma observação em vermelho dizendo que está disponível para esses modelos. Esse tutorial é para o modelo Classic. Acesse modelo-personalizar-avançado-adicionar CSS...
Antes de tudo, nós temos que deixar os gadgets a mostra, porque por padrão o Blogger os mantêm escondidinhos, mas isso é um passo opcional:
Antes de tudo, nós temos que deixar os gadgets a mostra, porque por padrão o Blogger os mantêm escondidinhos, mas isso é um passo opcional:
Ocultos Visíveis
Se quiser que fiquem visíveis, copie e cole o código abaixo no CSS:
Se quiser mudar a posição em que se encontram, mais para cima ou para baixo, cole este código no CSS e altere o número 100 para outros valores de acordo com o que você quer; quanto maior o número, mais distante do cabeçalho fica:
.ss, #gadget-dock>div:nth-of-type(1) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(2) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(3) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(4) .gadget-icons img,
display: none !important;
}
#gadget-dock>div:nth-of-type(1) .gadget-icons{
background: url(URL DA IMAGEM) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(2) .gadget-icons{
background: url(URL DA IMAGEM) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(3) .gadget-icons{
background: url(URL DA IMAGEM) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(4) .gadget-icons{
background: url(URL DA IMAGEM) no-repeat center !important;
}
|
Substitua no código em URL DA IMAGEM pelo endereço da sua imagem; é aconselhável usar imagens com tamanho de no mínimo 50x50 e no máximo 100x100. Se quiser adicionar outro gadget e ícone, basta mudar o número sendo que esteja na sequencia correta; por exemplo, paramos no 4 no código acima, então a gente adiciona antes de display: none !important;}:
.ss, #gadget-dock>div:nth-of-type(5) .gadget-icons img,
E depois de
#gadget-dock>div:nth-of-type(4) .gadget-icons{
background: url(URL DA IMAGEM) no-repeat center !important;
}
Adiciona-se:
#gadget-dock>div:nth-of-type(5) .gadget-icons{
background: url(URL DA IMAGEM) no-repeat center !important;
}
Que legal vc ensinar sobre isso, pq eu sempre quis saber como colocar ^^
ResponderExcluirxoxo
Que bom que gostou ^^
ExcluirA personalização por CSS é mais fácil neh ^^
Beijus e obrigada<3
Boaa! Isso ajudou-me imenso! O único problema é que não consigo adicionar o gadget dos seguidores na minha dynamic view :((
ResponderExcluirTentei add aqui em um blog de testes os seguidores; adicionou, mas não apareceu nada agora também... Vou procurar uma solução e se encontrar, respondo direitinho ok?
Excluir