Como separar os Gadgets da sidebar no Blog em caixas | Quero Dicas

Quero Dicas : Como separar os Gadgets da sidebar no Blog em caixas

Como separar os Gadgets da sidebar no Blog em caixas

|


Finalmente hoje estarei postando um tutorial de Como separar os Gadgets em caixa da sidebar.

Houve uma visitante que me pediu este tutorial, mais como estou ficando velhinha (risos), não me lembro o mais o nome dele (a). (Que horrível!!!). 

Bom, já são alguns e-mails, Skype que recebo, solicitando tutoriais, prometo que estarei postando seus pedidos o mais rápido possível =D

Então, vamos lá aprender a separar os gadgets da sidebar. 

Veja na imagem abaixo como ficará.
Como separar os Gadgets da sidebar em caixas
Antes de começarmos, faça um backup do seu template, para a sua segurança. Não sabe fazer backup? Não tem problema, aprenda aqui.
  Achando código e modificando


1 - Acesse o Painel do seu blog, Modelo, Editar HTML



2 - Tecle Ctrl + F e procure por:

 .sidebar .widget {

 
Você irá encontrar o código mais ou menos assim:

.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}

3 - Agora substitua todo o código (de .sidebar até a chave }) pelo código abaixo:

.sidebar .widget {
background: #fff; /* cor do fundo da sidebar */
margin-left: -10px;
padding: 10px; /* espaçamento do texto aos cantos */
margin: 10px 0; /* espaçamento entre as caixas */
}

 

4 - Agora personalize ao seu gosto. Troque cor ao fundo, espaço entra as caixas enfim, o que for ao seu gosto =D

Gostou? Veja também os posts abaixo, nelas tem como personalizar o titulo dos gadgets
Como personalizar sidebar do blogger - (faixa comum)
Como personalizar cada gadget da sidebar - (mude cada um separadamente por imagem ou cor)

Beijinhos 


Compartilhe


12 comentários:

  1. Amei o tuto, finalmente deu certo, mas eu gostaria de saber se tem como centralizar o gadget na caixa.

    ResponderExcluir
    Respostas
    1. Que bom que gostou Dudah, isso me deixa ainda mais estimulada para mais postagens =D
      Em relação aos gadgets, dependendo de qual gadget, é só colocar center no inicio e ao final /center do html, não esquecendo de colocar < >. Espero te ajudado e entendido, pois aqui na área dos comentário não dá para escrever corretamente o código :(
      Espero que seja isso que queira saber.

      Excluir
  2. Respostas
    1. Oi Me Maquianduh, o que exatamente não consegue encontrar?
      Mais mesmo não sabendo o que seja, eu tentar ajudar. Clique dentro do html, depois Tecle Ctrl + F e abrirá uma caixinha de busca. Cole dentro dela, o que procura e aperte Enter. Pronto, vai achar! ;-bd

      Excluir
  3. Genteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee, sem palavras... Me ajudou em dois tutoriais que a 3 dias não encontrava solução! Parabéns ♥ Beijos

    ResponderExcluir
    Respostas
    1. Que bom que tenha encontrado soluções aqui no blog Patricia. Pessoas como você, é que me dão ainda mais inspiração para fazer tutoriais. Muito obrigada por seu comentário. Beijinhos ♥

      Excluir
  4. Adorei o tutorial e deu super certo ❤
    Já tinha testado alguns outros tutoriais sobre isso antes e o seu foi o único que funcionou certinho.
    Beijinhos :*

    ResponderExcluir
  5. OI, eu adorei o post. Mas infelizmente não funcionou comigo, no meu HTML não tem: .sidebar .widget { e ai eu até tentei colar em outras partes mas não deu certo!!! :(

    ResponderExcluir
    Respostas
    1. Oi Carol.
      Procure somente .sidebar ou pesquise pelo Google chrome o nome destino da sua.
      Espero ter ajudado.
      Beijinhos ♥

      Excluir

Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

Beijinhos ♥


Divulgue o seu Blog

Agenda dos Blogs - Blog de divulgação de blogs

Agregadores e Amigos

Atoananet Linkirado Linkicha GeraLinks Universo das Dicas
subir