Coloque Borda entre a Barra Lateral e Postagem

13:14

Oba!Mais um tutorial! Hoje vou te ensinar a colocar uma borda super bacana que divide a barra lateral(gadgets) da barra onde ficam os posts. Os créditos dos códigos são do Other Things Attitude Included! Temos dois efeitos lindos pra você escolher qual vai usar!

-Efeito 1: Pontilhado
É esse que usamos aqui no blog! Siga as instruções.1- Vá até Design>Editar HTML, aperte CTRL+F e procure por isso:

.main-inner .column-center-inner {
Se sua barra lateral é do lado ESQUERDO, cole o código abaixo APÓS o código lá de cima, fazendo as suas alterações:
border-left: 1px dashed #000000;
Se sua barra lateral é do lado DIREITO, cole o código abaixo APÓS o 1º código que eu disse, fazendo as suas alterações:
border-right: 1px dashed #000000;
*No que está em vermelho altere o número para aumentar o tamanho da sua linha/borda. E no que está de roxo, altere a cor da sua borda.Você pode deixar como está, se quiser que fique parecido com a borda que usamos aqui no Trash Rock!

- Efeito 2:
Esse próximo tutorial é pra quem quer que sua borda fique semelhante a do blog Attitude Included, que também é bem legal:1- Vá até Design, Editar HTML, aperte CTRL+F e procure por:
.main-inner .column-center-inner {
Se sua barra lateral é do lado ESQUERDO, cole:
border-left: 5px solid #000000;
Se sua barra lateral é do lado DIREITO, cole:
border-right: 5px solid #000000;
* No que está em vermelho, altere a largura da sua borda/linha, e no que está em roxo, altere a cor. Lembrando novamente que este tutorial é do Other Things Attitude Included. Mas o código para as barras laterais do lado direito foram editados por mim.
-->Gostou? Comentem aí!

Também pode te interessar

29 comentários

  1. Hey linda, adorei o tutorial, é muito útil.
    Amor, tá rolando um concurso lá no blog, em comemoração aos 1000 seguidores \o/
    vc poderia me ajudar participando?
    Bjinho
    TDiaryofteens.blogspot.com

    ResponderExcluir
  2. bem legal,o pontilhado pra mim é o mais bonito,rsrsrs.beijos.tem post novo- blogmeaningless.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que vc gostou! Em breve vou colocar seu novo blog nos afiliados,no lugar do seua ntigo sweet teen poison!

      Bjs

      Excluir
  3. Olá flor visitando seu blog pela primeira vez, seguindo :) adorei a dica da borda na barra lateral :) beijinhos

    ResponderExcluir
  4. Nossa, estava procurando esse tutorial a um tempão! Muito obrigada rs

    E outra coisa, podia me dar uma super ajuda? Estou participando de dois concursos e preciso muito da sua ajuda! Vota no blog Depois da Primavera, nesses dois blogs: aqui e aqui
    Se estiver participando ou já tiver votado em algum outro blog, não tem problema, só ignore haha (:
    Muito obrigada desde já
    bjbj
    depois-da-primavera.blogspot.com

    ResponderExcluir
  5. Adorei o tuto e já vou colocar uma bordinha no meu blog, amei, muito útil :3
    Ah flor, que bom que gostou dos meus cursores, eu fiz com muito carinho <3

    Beijos, somente-moda.blogspot.com

    ResponderExcluir
  6. Adorei a dica, também ja fazia algum tempo que procurava por um tutorial assim hehe Ah, tem post novo no blog, depois dá uma passadinha por lá, seria uma honra recebê-la novamente! Beijos.

    Carol Chicorsqui
    http://gotasdeumapaixao.blogspot.com/

    ResponderExcluir
  7. Ah eu uso isso no meu blog. Dá um efeito bacana, né?

    http://morethanaworld.blogspot.com

    ResponderExcluir
  8. Adorei o tutorial! *-*
    Consegui fazer, mas acho que vou mudar somente no próximo layout! rs
    Você sabe como coloca borda em toda volta das postagens e barra lateral do blog? Se souber me avisa! *-*
    bjs
    charmofpink.blogspot.com

    ResponderExcluir
  9. mah,ja botei seu blog em meus afiliados,quando por me avise,beijos.

    ResponderExcluir
  10. Menina , ta mto bom seu blog..mto mesmo.. quanto tempo que nao venho aqui, mais eu vinha desde que tinha um outro layout que era branco , e tinha outro nome era...aff nao consigo lembrar..
    Da uma passadinha no meu blog?
    bjs
    www.dicasluh.blogspot.com

    ResponderExcluir
  11. Parabéeeens pelo tutorial, super detalhado! :D

    http://creativityandpersonality.blogspot.com

    ResponderExcluir
  12. Amei o turorial Mah, você mais uma vez trazendo post muito útil para nós leitoras e blogueiras.
    http://plumasepaets.blogspot.com

    ResponderExcluir
  13. Fica liindoo, né? aqui ficou um amor (: Obrigada pelo seu comentário, sua opinião por lá é sempre bem vinda, volte sempre ^^

    Blog Mundo da Moda | Sorteio Thipos perfumes

    kisses♥

    ResponderExcluir
  14. Otimo tutorial Post novo coment? bjs rawr --> http://mundodemeninasteen.blogspot.com

    ResponderExcluir
  15. Adorei o tutorial!
    wolftheideia.blogspot.com/

    ResponderExcluir
  16. Adorei o tutorial, ainda não o conhecia!
    Beijinhus!!

    Aline Star | Facebook | Twitter

    ResponderExcluir
  17. Amigaaa! Fazia tanto tempo que não visitava aqui!! Meu deus, como o Trash Rock está lindo! Muito bem escrito (como sempre)!! O design então... Está maravilhoso!!

    Amei o tutorial, estava procurando ele! Valeu pela ajudinha!

    Querida, tem post novo no meu blog, você podia fazer o grande favorzinho de comentar no post? Adoro ver as opiniões das leitoras!

    Beijos!
    www.blogmodasdegarotas.blogspot.com

    ResponderExcluir
  18. Você vai cansar de me ouvir dizer que você manda super bem nos tutoriais haha!
    A minha barra fica lá embaixo! Porque eu gosto de dar espaços pras fotos haha!

    Tem post novo lá no blog! Hoje é meu aniversário e eu fiz umas fotos para comemorar haha!

    http://itglow.blogspot.com

    ResponderExcluir
  19. AAh amore,eu acabei de usar esse tuto na reforma de aniversário do meu blog!! Fica liindo mesmo...\Õ/

    Beeijo
    http://blogmymemories.tk

    ResponderExcluir
  20. AHHHHH, Amei o tutorial, prometo que vou usar haha...

    http://newsdayoff.tk/

    ResponderExcluir
  21. adorei o tutorial!! ficou lindoo!

    bjs

    http://avidademalu.blogspot.com/ http://designdesenhos.blogspot.com/ http://ohmygood-omg.blogspot.com/

    ResponderExcluir
  22. Obaa, a tempos eu procuro um tutorial pra isso!!! Valeuuu mesmo. Tem um selinho incrível esperando por você lá no blog!
    Bjokas.
    Day

    http://impaciencianet.blogspot.com/2012/01/mais-selinho.html

    ResponderExcluir
  23. Floooor, sua linda! Estava precisando URGENTEMENTE deste tutorial *--* E só o achei no teu blog! Obrigada!!! Beijão!

    Ju, do Epílogos e Finais.

    ResponderExcluir
  24. eeeeeeeh, finalmente consegui colocar no meu blog rs, amei o tutorial ! ficou super fofo no meu blog, dá uma passadinha lá se puder, e se gostar segue ? já estou lhe seguindoo beijoos :))

    ResponderExcluir
  25. opss, o link é:

    http://divinaimperfeicao.blogspot.com.br/

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

    ResponderExcluir

Obrigada pelo comentário! Se tiver um blog, coloque o link!

Canal do blog

Participe da enquete

Inscreva-se no canal