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

77 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. Mt legal o tuto ! E mt útil! ^-^ Bjs, Stardolleiras

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

    www.bugigangazdanet.blogspot.com

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

    Beijos
    deluxesphotoscape.blogspot.com

    ResponderExcluir
  17. 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
  18. 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
  19. Já sabia mais ajuda bastante
    Mini surpresinha:http://cupcakeedicoes.blogspot.com.br/2012/06/sobre-afiliados-e-muito-mais.html#more

    ResponderExcluir
  20. 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
  21. 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
  22. 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
  23. Adorei o tutorial!
    Fácil e rápido *-*

    Kiss,
    omundodoseujeito.tk

    ResponderExcluir
  24. 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
  25. 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
  26. 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
  27. Aceita Parceria? http://blogstefanipink.blogspot.com.br/ Amei seu Blog super Fofo o Post ta nota 10!

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

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

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

    ResponderExcluir
  31. 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
  32. 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
  33. o meu não tem "plano de fundo da barra lateral", porque? ):

    ResponderExcluir
  34. 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
  35. 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
  36. 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
  37. amei o tutorial, ficou di mais =)
    http://my-world-jujubs.blogspot.com.br/

    ResponderExcluir
  38. Ótimo tuto!
    Kisses

    space-sweet-girl.blogspot.com.br

    ResponderExcluir
  39. Amei o tuto, obrigada :3

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

    ResponderExcluir
  41. 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
  42. Olá Liah, uso o modelo simples do blog e não acho o código que tem que procurar, pode me ajudar? obrigada

    ResponderExcluir
  43. ahh me ajudou muito!

    re-animar.blogspot.com/

    ResponderExcluir
  44. 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
  45. 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
  46. O modelo simples não possui a opção de "plano de fundo da barra lateral" :(

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

    Beijos, Joy

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

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

    ResponderExcluir
  50. 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
  51. 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
  52. quem nao conseguir achar o código, coloca pelo CSS, funciona do mesmo jeito

    ResponderExcluir
  53. 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
  54. 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
  55. 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
  56. Amei o Tuto.
    Eu Amo Glitter
    Bjos. É uma pena que você parou de postar. Gosto tanto do seu blog!

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

    ResponderExcluir
  58. Entrem no meu bloog gente, por favor! http://princesasmoderninhass2.blogspot.com.br/

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

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...