Como separar os Gadgets da sidebar no Blog em caixas | Quero Dicas | Tutoriais para seu blogs


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 dela. (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 Não se esqueça de deixar seus comentários, tá?
Me Contrate!

12 comentários

Clique e deixe seu comentários
sexta-feira, 13 março, 2015 ×

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

Resposta
avatar
admin
sábado, 14 março, 2015 ×

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.

Resposta
avatar
admin
terça-feira, 17 março, 2015 ×

Nao consigo achar no meu html :(

Resposta
avatar
admin
terça-feira, 17 março, 2015 ×

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

Resposta
avatar
admin
segunda-feira, 20 abril, 2015 ×

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

Resposta
avatar
admin
terça-feira, 21 abril, 2015 ×

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 ♥

Resposta
avatar
admin
terça-feira, 24 novembro, 2015 ×

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 :*

Resposta
avatar
admin
quarta-feira, 25 novembro, 2015 ×

Ótimo que deu certo. Fico muito feliz =D

Resposta
avatar
admin
Anônimo
quinta-feira, 03 dezembro, 2015 ×

Grata pela super dica!

Resposta
avatar
admin
sexta-feira, 04 dezembro, 2015 ×

Por nada.
Precisando é só pedir em FALAKÌ

Resposta
avatar
admin
segunda-feira, 07 dezembro, 2015 ×

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!!! :(

Resposta
avatar
admin
terça-feira, 08 dezembro, 2015 ×

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

Resposta
avatar
admin


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

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.