Uma grande dificuldade que vejo entre os blogueiros é acertar a distancia entre as colunas e a postagem do blog, ou seja, às vezes os menus ficam encostados um no outro ou muito distante, isso acontece tanto em relação às colunas como os posts do blog afinal todos são colunas. Para corrigir esse problema é só colocar padding-left ou padding -right no código da coluna que deseja dar um espaço.Fazer essa correção pode parecer um pouco confusa, pois existem muitos modos de fazer a mesma coisa e, além disso, as variações de lado também podem confundir na hora de alterar os códigos, então vamos primeiro localizar o que vamos alterar. Vamos usar o exemplo da coluna das postagens estar encostada na coluna do lado esquerdo, você pode entrar na pagina editar HTML e procurar por:
#main {width: 490px;color:#000000;float: left;line-height: 140%;padding-left:5px;….
E colocar padding -left:15px, se já tiver algo assim no seu blog apenas altere o valor (não repita o mesmo código duas vezes) isso fará surgir um espaço de 15 pixels entre a coluna das postagens e o menu do lado esquerdo, note que aumentamos o espaço ocupado pela coluna (mais 10 px) então isso pode fazer que uma das colunas do seu blog vá parar no final da pagina por falta de espaço então normalmente quando fazemos esse tipo de alteração devemos reduzir a largura da coluna que em nosso exemplo é 490 isso está logo no inicio, assim manteremos a mesma largura total que a coluna ocupava. Note como funciona a coluna tinha 490 de largura mais 5 de margem, ou seja, 495, se aumentarmos a margem para 15 vamos diminuir a largura da coluna para 480 assim continuaremos ocupando 495.
O mesmo que fizemos com a coluna main(postagem) poderia ser feito com qualquer uma das colunas do blog. Para saber qual lado deve colocar a margem veja o float que está no código, geralmente a margem deve ser do mesmo lado. Outro detalhe é que dependendo do seu template usar padding pode atrapalhar no layout (dependendo das imagens e cores de fundo) então o mesmo que fizemos com padding poderia ser feito com margin, assim margin-left:15px; e tudo funciona do mesmo jeito apenas trocamos o código. Apesar de funcionar do mesmo padding e margin não são exatamente a mesma coisa você pode ver aqui a diferença entre usar padding ou margin, outra dica relacionada com esse tema é como alterar as larguras do blog.
Outra coisa que não poderíamos deixar de falar é que é muito bom visualizar seu blog em vários navegadores (pelo menos Internet Explorer e Firefox), pois é possível haver uma variação na aparência do seu blog entre eles.
Link para esta página
39 comentários:
Karamba cara...fazia tempo que eu tinha problema com a coluna do meio...que de tao larga, estava cobrindo a sidebar... e isso estava me dandoo problemas devido o maior numero de anuncios no meu blog estarem na side bar..
VLW AE.. adicionei o seu banner na minha side bar
Fabiano , Eu num consegui faze esse bagunho n , sera q é meu template ?
alguns templates são mais difíceis de mexer, principalmente os que você baixa da internet pois usam tags diferentes
Olá. Gostaria de saber se vc sabe como postar fotos e elas sairem grandes no blog?
vi no blog http://hilophotography.blogspot.com
e achei muito interessante.
Obrigada
na hora de postar a foto veja que na janela tem opções de tamanho da imagem
Bom, gostaria de saber de como almentar a coluna e diminuir a do post
tenho: coluna / post / coluna
Ou tambem se der diminuir o expaço entre a coluna com o post
( acho que tem uns 10px de distancia )
Sabe uma tag para eu modificar-lo ?
meu email: digoherrera@hotmail.com
veja aqui sobre as larguras do blog
http://www.dicasparablogs.com.br/2007/08/largura-do-blog.html
Olá gente eu queria saber como colocar itens no cabeçalho do blog. Por exemplo no de vocês temo ínicio, contato.... Eu queria saber como colocar esses itens no cabeçalho do meu blog, adicionar itens no cabeçalho do meu blog vocês podem me responder?
Lucasmon
veja como dividir o cabeçalho do blog
http://www.dicasparablogs.com.br/2009/10/como-dividir-o-cabecalho-do-blog-em.html
Olá Fabiano,
num dos comentários seus vc disse
que certos templates são dificeis de mecher, principalmente aqueles baixados. Mas o meu template é do próprio blogger e é o Minima Dark, mesmo assim o unicos tags que encontrei parecido com o que vc disse está assim:
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; ...
O que posso fazer para espaçar a coluna?
para dar espaço entre as colunas tem que usar padding-left:5px ou padding-right:5px dependendo do lado que deseja colocar um espaço
veja também o link sobre largura do blog no final desta postagem, isso será necessário caso uma das colunas do blog vá para o final da pagina quando aumentar a distancia entre elas.
Olá Fabiano
Sou novato nisto e seus post tem me ajudado demais. A maneira que encontrei foi ajustar o tamanho da #content-wrapper
padding: 0 15px;
#main width: 500px; o comando padding parece aumentar a largura total??? ou empurra a coluna para baixo.O que faz o comando content?
Aparecido Oliveira
o numero 500 é a largura da coluna principal (main), se ficar larga demais ela faz que a sidebar vá para o final da pagina
Amei, as dicas, e eu fiz algumas altereçoes no nosso blog, conforme as indicações. Deus te abencoe sempre
Fabiano, mais uma vez muito obrigado pela sua ajuda.
Tenho seguido os seus exemplos para fazer o meu blog e teem sido espectaculares.
Como faço para encostar os textos dos meus post ao lado esquerdo.
Não consigo fazer isso com este template.
Será que pode ajudar?
outra coisa,
Gostava que os textos dos meus post ficassem à volta das fotos que coloco e não apenas por cima ou por baixo. Como se consegue isso?
Obrigado
~
Rafael
Rafael Amorim
a margem dos posts entre na pagina editar html e procure por:
.post {
padding-left:5%;
padding-right:10%;
apague a linha o diminua o valor padding-left:5%;
sobre o texto ao redor das imagens veja que na hora de enviar a imagem tem opções de colocar a imagem a direita ou esquerda, é só marcar uma delas
Olá Fabiano, estou procurando algo para deixar as do meu blog até o final da página uso coluna-post-coluna e gostaria de fazer isso nas duas, alguma dica amigo?
Sid
use uma imagem ou cor de fundo em #content-wrapper
isso você encontra na pagina editar html
Olá Fabiano, achei somente a tag <div id='content-wrapper'> mas mesmo assim não encontrei onde colocar essa imagem e nem como faze-la ficar rente a base da parte central do blog
alguns templates são diferentes, se baixou o seu de algum site provavelmente terá problemas para achar os códigos.
mas procure algo como sidebar, main, geralmente usam nomes parecidos com isso.
olá Fabiano
seus posts tem me ajudado muito pois ñ entendo nada de html mas consigo fazer batastante coisas lendo suas mensagens
eu peguei o modelo do meu blog aqui do site mesmo é o:ms. moto
só q a coluna do meio é muito distante da coluna da direita e eu gostaria de deixa-la com a mesma distancia q a coluna da esquerda mas mesmo lendo o seu texto eu ñ consegui fazer pois ñ consigo achar a sequencia html q vc cita no texto sera q pode me ajudar ?
Lilas Bijouterias, ela está razoavelmente centralizada, veja a parte dos comentários como está bem a esqueda, isso faz parte das postagens.
publique um texto assim poderá visualizar melhor a largura da coluna das postagens
Oi, eu tenho uma duvida, eu exclui o cabeçalho de meu blog e adicionei um gadget com uma animação em flash no lugar, o problema eh uma distancia que fica entre a navbar do blog e o gadget, eu ja mexi em tudo e essa distancia nao desaparece. O que eu faço? veja o blog:
http://fasdesolangealmeida.blogspot.com/
MariaGois
o espaço é pequeno, talvez fosse melhor deixar assim, mas se quiser entre na pagina editar html e procure por:
#header-wrapper {
margin: 0 auto;
padding-top: 05px;
padding-right: 0;
#header .description {
font-size: 110%;
text-align: left;
padding-top: 05px;
padding-right: 0;
e apague esse padding-top: 05px; que aparece nas duas partes, deve ir um pouco mais para cima o seu banner
Eu retirei esse padding top, mas a distância diminuiu abaixo do gadget,e em cima continuou a mesma ;x.
talvez seja um problema na animação,
vou deixar assim mesmo...
mt obg ;D
Ja descobri o "problema" do espaço entre a navbar e o gadget do cabeçalho, eu retirei os espaços entre os gadgets da sidebar, e o espaço acima do banner desapareceu, porem ficou feio, pq os gadgets da sidebar ficaram muito juntos ao titulo... não tem como alterar a distancia apenas do gadget do cabeçalho?
se eu usar o cabeçalho normal do blog, não conseguirei colocar a animação ;X...
Caro Fabiano,
Algum tempo venho acompanhando este metablog. Está de parabéns pelo trabalho realizado. A minha dúvida consiste no fato de que após fazer algumas alterações no meu blog (www.licitacoessustentaveis.com), a barra lateral ficou maior do que era antigamente. Posso colocar apenas na configuração apenas 05 posts que não adianta porque o espaço é fixo e não se adapta ao número de posts, sobrando grande espaço após o rodapé.
Desde já, agradeço pela atenção.
Leonardo.
Leonardo, o tamanho da barra lateral não tem nada a ver com o numero de postagens que o blog mostra.
você deve ter alterado outra coisa.
Oiiie
tenho 2 coluna no meu blog
ja conseguir mexer no espaço da coluna esquerda ( padding-left)
mais a direita eu não estou conseguindo :(a Unica tags que encontrei parecido com o que vc disse está assim:
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; ...
Que eu faço ? me ajuda ae !!
Vlw&Obrtigado ;D
neste trecho que mostrou pode tentar colocar o padding-left
esse ajuste de espaço depende do template de cada blog, e para qual lado a coluna está alinhada(float)
meu no meu blog nao deu para fazer isso oq faso
www.habbounidospixelart.blogspot.com/
me ajuda pf qual é o erro
Anônimo
veja aqui Largura do Blog
o exemplo que uso é igual ao seu modelo atual.
Opa, to com um problema no meu blog, que, ao abrir algumas paginas, a coluna lateral da direita, fica longe da coluna dos post, por exemplo, acesse meu blog http://seuwallpaper.blogspot.com/ e clique em parceria, dai vera o que acontece! O que pode ser?
Fico grato desde já ;)
tente editar a postagem parcerias, exclua partes dos códigos que publicou nela e faça testes.
só pode ser algum erro nesta publicação, pois sua pagina de parcerias é uma postagem como todas as outras então não existe razão para só ela ficar diferente senão algo publicado na própria postagem.
ooolá
gostaria de aumentar o espaço entre cada Gatged do meu blog.. (o espaço entre quem sou eu - seguidores - arquivo do blog) porem nao estou conseguindo. Ajude-me por favor.
beijoos obrigada *-*
Suziii
para dar espaço entre os gadgets entre na pagina editar html e procure por
.sidebar .widget {....}
então coloque ou altere os valores de padding ou margin, como mostramos neste tutorial, mas em vez de usar left e right use top ou bottom, mas se quiser pode usar somente padding: sem nenhum palavra isso deixará a margem igual em todos os lados o mesmo vale para margin
Gostari de saber como tornar meu blog mais largo, tomando toda a folha, e dividí-lo en quadrados em qualquer local que eu quiser.
Se alguém souber, favor me avisar.
enfmatos@gmail.com
para deixar o blog mais largo é preciso mexer no html dele, ou se usa um blog com modelos novos (designer) tem que editar pela pagina designer de modelo.
sobre o html procure por #outer-wrapper e altere o valor que está em width: 990px;, no seu blog será outro numero o 990 é apenas um exemplo
Postar um comentário