Personalizar Gadgets (Dynamic Views)

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:
Ocultos                                                                             Visíveis
Se quiser que fiquem visíveis, copie e cole o código abaixo no CSS:


#gadget-dock{
position: fixed !important;
right: 0px !important;
}


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:


#gadget-dock, .ss{
top: 100px !important;
}

Caso queira mudar as cores, é bom ter em mãos, ou melhor, na tela, uma tabela de cores com códigos e nomes; o próprio designer do modelo do Blogger te oferece isso ^ ^ 

Aí você adiciona o código abaixo no CSS, substituindo os nomes ou códigos de cores por outros de sua preferência. O código rosa muda as cores dos ícones e do conteúdo do gadget; o lilás altera a cor do conteúdo e é opcional; o azul altera a cor dos links:


.gadget-icons, .gadget-title, .gadget-content, #gadget-dock, .gadget-menu, .ss{
background: pink !important;
color: white !important;
}
.gadget-content, .ss {
background: white !important;
color: gray !important;
}
.gadget-icons a, .gadget-title a, .gadget-content a, .ss a{
color: blue !important;
}


  Você pode ainda usar seus próprios ícones adicionando esse código aqui ao CSS:

.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;
}

Espero que estes tutoriais sejam úteis para vocês assim como são para mim<3
Beijinhus<3
Créditos: Southern Speakers

4 Comments

  1. Manika22 julho

    Que legal vc ensinar sobre isso, pq eu sempre quis saber como colocar ^^
    xoxo

    ResponderExcluir
    Respostas
    1. Roberta23 julho

      Que bom que gostou ^^
      A personalização por CSS é mais fácil neh ^^
      Beijus e obrigada<3

      Excluir
  2. Rúben19 setembro

    Boaa! Isso ajudou-me imenso! O único problema é que não consigo adicionar o gadget dos seguidores na minha dynamic view :((

    ResponderExcluir
    Respostas
    1. Roberta19 setembro

      Tentei 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

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up