Separar widgets da sidebar

|

Olá sweets! Esses dias eu estou me esforçando para atender todos os pedidos de tutoriais que estavam acumulados na minha lista. Hoje mais um vai ser riscado da lista. Vou ensinar como deixar os widgets da sidebar separados. Não entendeu o que é? O resultado é este na imagem abaixo:



1- Abra o blogger, vá em modelo > Personalizar
2- No designer do modelo, clique em "plano de fundo da barra lateral" e escolha transparente, como mostra a imagem abaixo (clique para ampliar):


3- Salve as alterações.
4- Volte ao modelo do blog, e agora clique em "Editar HTML"
5- Aperte Ctrl+F e procure por:
.sidebar .widget {
6- Logo abaixo deste trecho cole a seguinte linha:
background: #000; 
7- Agora é só trocar #000 pelo código da cor que você quer e salvar!
- Se quiser aumentar a distância entre cada widget, altere o valor dessa linha:
margin: 10px 0; 
Trocando o 10 por um número maior.

Pronto! Bem simples não é? Tenho alguns recadinhos para vocês.
1º - Ainda dá tempo de participar do sorteio que está rolando aqui no blog!
2º - Vou postar em breve um video tutorial de como fazer essas faixinhas que eu uso na sidebar e que vocês já viram em outros blogs. Pode demorar alguns dias porque estou gripada e só vou gravar quando minha voz deixar de parecer a de um pato :/
- Atualizei os créditos do blog, tava devendo isso desde que mudei o layout. Deem uma olhada lá para ver os blogs e sites divos que me ajudam sempre.

Por hoje é só queridos, obrigada por acompanhar o blog!
Kissus, Liah

74 comentários

  1. Esse tuto é muito útil!
    O blog fica muito lindo'
    Kisses~~

    http://territorioteen-suh.blogspot.com.br/

    ResponderExcluir
  2. Já uso! Muito útil!
    beijoos

    http://euemeujardimsecreto.blogspot.com.br/

    ResponderExcluir
  3. Adorei o tutorial,acho que o vou usar no meu novo lay ^^
    Ainda bem que gostas-te dos brushs!
    Bjs Chibiusa,
    http://bubble-explosion.blogspot.pt

    ResponderExcluir
  4. Super fácil!
    Liah eu desativei os user do blog pq tenho um plugin que estava bloqueando 35 páginas de ips (louco mas necessário pra evitar ataques), só pra avisar...mas não me abandone rs (assine o feed ♥)

    bjãoo

    ResponderExcluir
  5. Acho que fica mais organizado assim, ótimo o post ^^
    http://themudancas.tk/

    ResponderExcluir
  6. Adorei o tutorial, fica otimo e bem organizado, flor!
    Amei tudo aqui, seu lay é maravilhoso e seu blog tbm (não é a toa que falam tanto do Cherry Bomb) Amei demais aqui, já estou seguindo...
    Beijos,
    www.coisasdemenina-vicky.blogspot.com

    ResponderExcluir
  7. esse tuto é muito massa. mas por enquanto não vou usar não.. mas se eu precisar já sei onde achar ;')

    http://mini-fofoquinhas.blogspot.com.br/

    ResponderExcluir
  8. Peeerfeito o tutorial, é super útil.
    adorei flor, dá um charme excelente no blog!!
    kisses~~

    #>>>http://the--baby.blogspot.com.br/

    ResponderExcluir
  9. Fica super lindo! Eu fiz um tuto de como fazer no meu site. Beijos! Participem do concurso, inscrições até o dia 28.06!
    http://alanfelipej.blogspot.com.br/2012/06/concurso.html
    http://alanfelipej.blogspot.com.br

    ResponderExcluir
  10. Eu uso um código parecido, ou igual... não me lembro! rs. O Cherry Bomb tá cada dia melhor, Liah! :3

    Beijos, Paula
    sweetmakeups2.blogspot.com

    ResponderExcluir
  11. Bem fácil e útil !
    Visitem meu blog
    http://karolsatelespink.blogspot.com.br/

    ResponderExcluir
  12. Amei o tutorial , o CB tá cada
    vez mais perfeito ;3
    bjox
    http://keepcalmandeatnutella.blogspot.com.br/

    ResponderExcluir
  13. Olá desculpe mas eu gostaria de pedir um favor, eu estava lendo um post antigo seu http://cherry-liah.blogspot.com.br/2010/12/como-retirar-sombra-das-imagens-no.html
    nele vc está ensinando a tirar as sombras das fotos, eu deixei um comentário lá em janeiro ou antes e vc n respondeu acredito que deve ter passado despercebido =/
    O modelo do meu blog é marca d'agua, e eu não consegui tirar a droga do sombriado TT-TT
    Vc pode me ajudar por favor *-*
    www.j-musicnyappy.blogspot.com

    ResponderExcluir
  14. adorei o , muito bem explicado e ainda fica bem bonito :)

    www.bugigangazdanet.blogspot.com

    ResponderExcluir
  15. Adorei o tuto.. Estou de lay novo lá no blog.
    Viisita & segue se puder. obg ><

    Beijos
    deluxesphotoscape.blogspot.com

    ResponderExcluir
  16. Oi Liah! Amei o tutorial, já salvei em meus favoritos!
    Queria aprender a fazer um tutorial, se você não se importar: Como fazer aquele seu menu ali que tem Sobre/Participe/Chat/Inicio! Muito obrigado!!

    http://garotavertigem.blogspot.com.br/

    ResponderExcluir
  17. Super útil amiga !
    Da uma olhadinha lá no B.D, ele está de visual novinho *-*
    Ficou super fofinho, não vaai perde né
    ~> Bolha Doce || Julia Villela
    //Xoxo JuuH

    ResponderExcluir
  18. Já sabia mais ajuda bastante
    Mini surpresinha:http://cupcakeedicoes.blogspot.com.br/2012/06/sobre-afiliados-e-muito-mais.html#more

    ResponderExcluir
  19. Adorei o tuto, estava procurando a dias, mas só achava para colocar uma cor atrás dos widgets. Valeu!


    Kissus ----> Blog Bola de Chiclete ♥

    ResponderExcluir
  20. O meus widgets/gadgets já estão separados. Só que eu coloquei as bordas arredondadas =) Ai Liah, estou doida pra ver seu vídeo tutorial! E espero que essa sua gripe sare logo hein.

    http://onthefame.blogspot.com.br/

    ResponderExcluir
  21. Estava vendo um comentário seu aqui no meu blog e não sei se já te respondi, mas aqui tô eu de novo! Então linda, de nada pelos elogios, você merece! E eu sempre vou te apoiar, no que você precisar :3 Eu estou ficando bastante online a noite no msn. Ah, desculpa, não tenho face não. Mas prometo aprender a mexer e fazer um. Beijão!

    http://onthefame.blogspot.com.br/

    ResponderExcluir
  22. Adorei o tutorial!
    Fácil e rápido *-*

    Kiss,
    omundodoseujeito.tk

    ResponderExcluir
  23. Ooi
    Ooba! Tutorial das faixinhas!
    Eu adoro essas faixas da sidebar, e eu queria muito aprender :)
    Beijos,
    Nathalia (http://our-sweet-place.blogspot.com.br/)

    ResponderExcluir
  24. Hey Liah, dá pra usar esse tutorial em outro modelo do Blogger, que não seja o Viagem??
    Nem preciso dizer que teu blog tá demais, né?
    Beijos!
    http://elfadophotoscape.blogspot.com.br/

    ResponderExcluir
  25. Liah amei este tutorial ...
    estava a procura dele ai cai
    aqui no seu blog!!!
    brigada e é muito simples mesmo faze-lo....
    E parabéns pelo blog ele é lindo
    super perfeito !!!

    Beijo Grande

    blocokpop.blogspot.com

    ResponderExcluir
  26. Aceita Parceria? http://blogstefanipink.blogspot.com.br/ Amei seu Blog super Fofo o Post ta nota 10!

    ResponderExcluir
  27. ótimo tuto!
    http://karolsatelespink.blogspot.com.br/

    ResponderExcluir
  28. Mesmo meu blog sendo bem clean, vai dar muito certo. Obg
    http://blogdanysilva.blogspot.com.br/

    ResponderExcluir
  29. o meu não tem plano de fundo da barra lateral me ajuda!

    ResponderExcluir
  30. Liah,eu fiz esse tutu,mas continua com o fundo da barra lateral,e já fiz várias vezes,e também fiz outros e nenhum deu certo,sabe já pedi ajuda a muito,mas ninguém sabe o que é,sera que vc sabe? Se puder me responder em meu blog será muito melhor,obrigada.
    http://www.cotidianodeumabarbie.blogspot.com.br/
    Conto com a sua ajuda,ficarei muuito grata.

    ResponderExcluir
  31. Muito obrigada! Eu estou aprendendo a fazer templates agora, e usei o seu tutorial para fazer o meu primeiro template personalizado. Se quiser ver como ficou, eu postei aqui: http://makemeshineedicoes.blogspot.com.br/2012/08/template-personalizado-cabecalho.html#.UEBszMFlRLM
    Adoro esse blog, muito obrigada por me ajudar! Beijinhos <3
    makemeshineedicoes.blogspot.com

    ResponderExcluir
  32. o meu não tem "plano de fundo da barra lateral", porque? ):

    ResponderExcluir
  33. Ola bom dia, boa tarde ou boa noite, dependendo do horário que esteja lendo essa mensagem. Gostaria de tirar uma duvida imensa. Eu criei e editei quase que completamente a layout do meu blog, só que eu achei feio que meus gadgets estão juntos com a parte da postagem fixa em uma só caixa box, gostaria de separalos, para ter uma organização deles, só que meu layout é totalmente personalizado, não tem como fazer as edições pelo personalizar do blogger, gostaria de um modo manual, e outra no meu template não tem a teg /* Gadgets pra adicionar manualmente, nao sei oque fazer, por favor me ajude, grato dez de já :D


    para analisar o gatgets do meu blog acesse: mundodeumdesigner.blogspot.com.br

    ResponderExcluir
  34. oi Liah este tutorial é muito simples e fácil, mais não está dando certo no meu blog. Uso o modelo simples do blog e não encontro a palavra que vc falou para procurar. pode me ajudar? bjs Cositas Femininas

    ResponderExcluir
  35. Os blogs feitos recentemente não tem o plano de fundo da barra lateral, o meu é o modelo simples então não tem!
    e agora ? o.O

    ResponderExcluir
  36. amei o tutorial, ficou di mais =)
    http://my-world-jujubs.blogspot.com.br/

    ResponderExcluir
  37. Ótimo tuto!
    Kisses

    space-sweet-girl.blogspot.com.br

    ResponderExcluir
  38. Amei o tuto, obrigada :3

    ResponderExcluir
  39. Esse tutorial foi de bastante utilidade para mim :)
    Muito bom!

    ResponderExcluir
  40. E PRA QUEM USA TEMPLATES ISSO FUNCIONA?
    EU USO UM E ELE NÃO ME DÁ ESSAS OPÇÕES DE MEXER NA SIDE BAR ANTES DE MEXER NO HTML COMO VOCÊ EXPLICA FLOR...
    VOCÊ PODERIA ME AJUDAR?
    OBRIGADO :D

    ResponderExcluir
  41. Olá Liah, uso o modelo simples do blog e não acho o código que tem que procurar, pode me ajudar? obrigada

    ResponderExcluir
  42. ahh me ajudou muito!

    re-animar.blogspot.com/

    ResponderExcluir
  43. Aff que coisa, responde aqui néh? Poxa, aqui não tem barra de lateral sei lá o que, e nem achei esse código, ajuda aqui néh, poxa?!!!!???!!

    ResponderExcluir
  44. não encontrei o código de jeito nenhum, nem arrumando e tal as coisas, mas espero que a Jackie Dream tenha isto, então desde já obrigadooo, beijuu

    ResponderExcluir
  45. O modelo simples não possui a opção de "plano de fundo da barra lateral" :(

    ResponderExcluir
  46. Super fácil e deu super certo, adorei c:

    Beijos, Joy

    ResponderExcluir
  47. não consegui :( o meu não tem plano de ''fundo da barra lateral''

    ResponderExcluir
  48. AAwii obrigada tinha tentado fazer esse tuto umas 5.00 vezes obrigadinha..
    http://meu-mundo-alternativo.blogspot.com.br/

    ResponderExcluir
  49. não consegui... não existe ( .sidebar .widget {)
    não aparece nada,eu aperto ctrl + f e coloco e aparece
    0 de 0...pq??

    ResponderExcluir
  50. non tem mais "plano de fundo da barra lateral", mas eu vou tentar pôr um negocio la, vou ver se vai dar certo mesmo assim, e obrigada lia! :3 te amodoro d+

    ResponderExcluir
  51. quem nao conseguir achar o código, coloca pelo CSS, funciona do mesmo jeito

    ResponderExcluir
  52. Oi eu estava a procura desse tutorial a tempos e agradeço por ter colocado aqui...porém ele não está funcionando no meu blog, estou fazendo do mesmo jeito que vc disse lá em cima mas não consigo separar os widgets tem como me explicar melhor porque eu não entendi o que deu no meu blog...obrigada desde já...

    http://projectgoldena.blogspot.com.br/

    ResponderExcluir
  53. Muito obrigada! AJUDOU MUIITO! eu to começando um blog*-*

    ResponderExcluir
    Respostas
    1. como você fez ? não tem mais "plano de fundo da barra lateral" , como conseguiu ?

      Excluir
  54. Genteeee! Meu modelo é Viagem, quando eu vou procurar por .sidebar .widget { no HTML, dá que não existe. Dai eu procuro milhões de vezes pelo .sidebar .widget { (eu mesme) e não acho! tem algo de arreado com o meu blog! Me ajudem , pfff!

    ResponderExcluir
  55. Olá Liah!
    Também é possível fazer isso com o campo de comentários?

    ResponderExcluir
  56. Este comentário foi removido pelo autor.

    ResponderExcluir
  57. Este comentário foi removido pelo autor.

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...