Coloque Borda entre a Barra Lateral e Postagem
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:
* 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.border-right: 5px solid #000000;
-->Gostou? Comentem aí!
29 comentários
Hey linda, adorei o tutorial, é muito útil.
ResponderExcluirAmor, tá rolando um concurso lá no blog, em comemoração aos 1000 seguidores \o/
vc poderia me ajudar participando?
Bjinho
TDiaryofteens.blogspot.com
bem legal,o pontilhado pra mim é o mais bonito,rsrsrs.beijos.tem post novo- blogmeaningless.blogspot.com
ResponderExcluirQue bom que vc gostou! Em breve vou colocar seu novo blog nos afiliados,no lugar do seua ntigo sweet teen poison!
ExcluirBjs
Olá flor visitando seu blog pela primeira vez, seguindo :) adorei a dica da borda na barra lateral :) beijinhos
ResponderExcluirNossa, estava procurando esse tutorial a um tempão! Muito obrigada rs
ResponderExcluirE 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
Adorei o tuto e já vou colocar uma bordinha no meu blog, amei, muito útil :3
ResponderExcluirAh flor, que bom que gostou dos meus cursores, eu fiz com muito carinho <3
Beijos, somente-moda.blogspot.com
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.
ResponderExcluirCarol Chicorsqui
http://gotasdeumapaixao.blogspot.com/
Ah eu uso isso no meu blog. Dá um efeito bacana, né?
ResponderExcluirhttp://morethanaworld.blogspot.com
Adorei o tutorial! *-*
ResponderExcluirConsegui 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
mah,ja botei seu blog em meus afiliados,quando por me avise,beijos.
ResponderExcluirMenina , 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..
ResponderExcluirDa uma passadinha no meu blog?
bjs
www.dicasluh.blogspot.com
Parabéeeens pelo tutorial, super detalhado! :D
ResponderExcluirhttp://creativityandpersonality.blogspot.com
Amei o turorial Mah, você mais uma vez trazendo post muito útil para nós leitoras e blogueiras.
ResponderExcluirhttp://plumasepaets.blogspot.com
Fica liindoo, né? aqui ficou um amor (: Obrigada pelo seu comentário, sua opinião por lá é sempre bem vinda, volte sempre ^^
ResponderExcluirBlog Mundo da Moda | Sorteio Thipos perfumes
kisses♥
Otimo tutorial Post novo coment? bjs rawr --> http://mundodemeninasteen.blogspot.com
ResponderExcluirAdorei o tutorial!
ResponderExcluirwolftheideia.blogspot.com/
Adorei o tutorial, ainda não o conhecia!
ResponderExcluirBeijinhus!!
Aline Star | Facebook | Twitter
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!!
ResponderExcluirAmei 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
Você vai cansar de me ouvir dizer que você manda super bem nos tutoriais haha!
ResponderExcluirA 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
AAh amore,eu acabei de usar esse tuto na reforma de aniversário do meu blog!! Fica liindo mesmo...\Õ/
ResponderExcluirBeeijo
http://blogmymemories.tk
AHHHHH, Amei o tutorial, prometo que vou usar haha...
ResponderExcluirhttp://newsdayoff.tk/
adorei o tutorial!! ficou lindoo!
ResponderExcluirbjs
http://avidademalu.blogspot.com/ http://designdesenhos.blogspot.com/ http://ohmygood-omg.blogspot.com/
Obaa, a tempos eu procuro um tutorial pra isso!!! Valeuuu mesmo. Tem um selinho incrível esperando por você lá no blog!
ResponderExcluirBjokas.
Day
http://impaciencianet.blogspot.com/2012/01/mais-selinho.html
Ameii !!
ResponderExcluirFloooor, sua linda! Estava precisando URGENTEMENTE deste tutorial *--* E só o achei no teu blog! Obrigada!!! Beijão!
ResponderExcluirJu, do Epílogos e Finais.
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 :))
ResponderExcluiropss, o link é:
ResponderExcluirhttp://divinaimperfeicao.blogspot.com.br/
Este comentário foi removido pelo autor.
ResponderExcluirAjudou bastante amor!! Ótimo tutorial!! (:
ResponderExcluirhttp://pequenomundodosblogs.blogspot.com/
Obrigada pelo comentário! Se tiver um blog ou site, coloque o link!