Template do Blog, colunas de tamanhos iguais

Algumas pessoas já perguntaram como fazer para coluna das postagens acompanhar (ficar do mesmo tamanho) que a sidebar do blog, ou seja, a cor de fundo das postagens ou das colunas (sidebar) acompanha o conteúdo dela, fazendo que no final da pagina fiquem desiguais. Corrigir isto e fazer as colunas do blog ficarem todas do mesmo tamanho não é difícil só precisa modificar alguns códigos.

Para resolver este problema o que fazemos na verdade é retirar a cor de fundo das postagens e sidebar e colocar somente uma cor ou preferencialmente uma imagem no blog todo. Isso pode variar um pouco dependendo do modelo de layout que seu blog usa. Por causa disto sugerimos salvar uma copia do seu modelo antes de começar as alterações.

Agora vamos começar as mudanças no seu blog. Então vamos começar entre na pagina editar html, procure por #main{...}, #sidebar{....}, #newsidebar{......} e qualquer outro código que seja das colunas ou postagens do blog, como já dissemos isso irá variar conforme o modelo. Quando achar apague qualquer cor de fundo(background....) e bordas (border:...) que achar neles. Isso faz que fique somente o fundo do blog e mais nada.

Encontre a parte #content-wrapper{.... } e coloque uma cor ou imagem de fundo. Para fazer as divisões entre as colunas será necessária uma imagem de fundo, então crie um da largura do seu blog e com as medidas certas de cada uma das colunas e postagens do blog, mas tudo isso numa imagem só, veja abaixo como é a imagem que usamos para fazer isso aqui no Dicas para Blogs atualmente:
Fundo do Blog
Mas isso faz a imagem ocupa todo o espaço do blog inclusive aonde vai o titulo, para deixar o titulo com a cor de fundo do restante do blog usamos o seguinte código:

#header-wrapper{background-color: #66ccff;margin: 0 auto;padding-bottom: 5px;border-bottom: 2px solid #000000} isso faz aparecer a mesma cor de fundo do blog debaixo do titulo, a parte da borda é para encaixar no inicio da imagem de fundo das colunas, porém se quiser fazer os cantos arredondados como aqui no Dicas para Blogs, o código é o seguinte:

#header-wrapper{padding-top:10px;background-color: #66ccff;margin: 0 auto;padding-bottom: 20px;background-image: url(cantos arredondados);background-repeat: no-repeat;background-position: bottom;}

Template com cantos arredondadosAtualmente usamos a imagem acima aqui no Dicas para Blogs, repare na parte em negrito background-color: #66ccff; isso é a cor do fundo do blog que aparecerá por baixo do titulo. padding-bottom: 20px é uma distancia para não ter nenhum texto ou imagem sobre os cantos arredondados, e o restante background-image: url(cantos arredondados);background-repeat: no-repeat;background-position: bottom; é a imagem com os cantos arredondados e o posicionamento dela na parte de baixo, claro que onde está escrito cantos arredondados você precisará trocar pelo endereço de uma imagem.

A maioria dos modelos do blogspot usa essas tags ou bem parecidas. O modelo que usamos é o Son of Moto (Mean Green Blogging Machine variation) e no blog Frases Curtas usamos o modelo Minima(Designer: Douglas Bowman) que também tem as mesmas tags. Nele usamos está imagem de fundo sob as postagens e menu:
template caderno
E na parte do título repetimos a imagem de fundo do restante do blog e colocamos uma borda de 2 pixels como já falamos aqui. Tento este resultado:
Modelo de templateColocamos essa imagem além do link para o Frases Curtas caso daqui algum depois que fizermos alguma alteração no template dele, mesmo assim as pessoas possam ver do que estávamos falando.

Related Posts with Thumbnails
Template do Blog, colunas de tamanhos iguais
4/ 5
Oleh

51 Comentários

22 de fevereiro de 2010 19:14 delete

não tem uma maneira de botar 2 cores nas letras

Reply
22 de fevereiro de 2010 20:24 delete

Gente, alguém pode me ajudar? Eu queria saber como se faz pra transformar uma palavra em link. Alugém pode me dizer? Obrigado

Reply
22 de fevereiro de 2010 21:48 delete

O template do blog da minha esposa está com problema estranho. Quando agente abre ele está tudo normal, mais quando clicamos na postagem ou quando vamos comentar ele diminue e fica bem pequeno, não sei o que está acontecendo já que não sou nada bom em códiogs. Se podesse me ajudar seria bacana

Reply
23 de fevereiro de 2010 11:20 delete

Fabiano eu tenho um blog de filmes online queria saber se tem como eu organizar as postagens lado a lado com imagens e nao verticalmente
meu site eh o www.mococafilmesonline.blogspot.com

queria a pagina iniial como o www.armagedomfilmes.biz

Reply
23 de fevereiro de 2010 14:44 delete

super nimes
você quer duas cores nas letras em qual parte? por exemplo nas postagem e outra cor nas letras da sidebar? se dor isso só precisa achar esses estilos #main{..} e #sidebar{...} e colocar color:# 000000; dentro das chaves de cada um com a cor que desejar.

Willians
o código do link é assim:
<a href="endereço da pagina" target="_blank">texto do link</a>

Concentrado
visitei seu blog e pareceu normal

Kevin
vou pesquisar sobre o assunto e fazer um tutorial sobre isso em breve

Reply
23 de fevereiro de 2010 15:37 delete

a minha duvida ñ tem nada haver com o post
mas preciso muito de ajuda
quero colocar no meu blog uma galeria de fotos

mas queria fazer da seguinte forma
escrever a frase

"galeria de fotos"

e quando clicando nessa frase ai sim vai para a galeria de fotos tem como fazer isso ???

espero q de pra entender o que estou querendo


desde ja agradeço!!!

Reply
23 de fevereiro de 2010 15:49 delete

Lilas Bijouterias

você poderia usar uma das paginas extras do blog para cria a tal galeria de fotos

Paginas extras para o Blogspot

Reply
23 de fevereiro de 2010 16:12 delete

Haaa muito legal ..
mas ai tem como eu colocar esse link em outro lugar ?
tipo colocar uma foto junto ou colocar no caso do meu blog onde esta o relogio algo assim ou só em cima mesmo?

Reply
23 de fevereiro de 2010 16:26 delete

sim, você pode copiar o endereço dessa pagina extra e usar num link com uma imagem ou em qualquer parte do blog

Reply
23 de fevereiro de 2010 16:33 delete

Desculpa a encheção de saco...rsrrs :/
mas sou nova nisso de colocar tantas coisas no blog
ñ entendo muito
ñ consegui achar como eu faço pra transformar uma imagem em link ...

Reply
23 de fevereiro de 2010 16:40 delete

veja aqui
Como fazer um banner

lá fala sobre banner, mas é a mesma coisa que uma imagem, se já tiver a imagem lá tem um gerador de códigos

Reply
23 de fevereiro de 2010 21:39 delete

Fabiano

se eu fizer aquilo de mudar o endereço do blog para www
o geito de configurar ele continuara o msm ou muda tb ?

Reply
24 de fevereiro de 2010 11:05 delete

Taah blz eu espero xD
Qdo vc descobri algo me da um toque
Vlws!

Reply
24 de fevereiro de 2010 15:35 delete

Lilas Bijouterias
se colocar um dominio no blog só vai mudar o endereço dele o resto continua tudo do mesmo jeito(fazer postagens, editar layout...)

Reply
28 de fevereiro de 2010 20:43 delete

Interessante,continue assim com o blog.Sempre uso suas dicas no meu blog

Reply
1 de março de 2010 18:45 delete

as duas cores são nas imagens

Reply
2 de março de 2010 17:04 delete

isso mesmo, as duas cores são na mesma imagem

Reply
3 de março de 2010 17:29 delete

Como tirar aquilo: Posts RSS - Coments RSS?

Reply
4 de março de 2010 15:20 delete

João Victor


entre na pagina editar html e depois de body{...} coloque:

.feed-links{display:none}

Reply
24 de março de 2010 15:10 delete

Olá Fabiano, gostei muito das dicas do seu blog, mas esta de mudar os codigos, nao entendi nada... muito complexo pra mim... rsrsrs... gostaria de colocar uma imagem de fundo no meu blog, ou até mesmo um cabeçalho mais personalizado, mas as imagens q coloco saem do lugar, ficam peq ou grandes...

valeu!

Reply
Luciano28
20 de abril de 2010 17:16 delete

Como faço para deixar com 2 coluna pois o Blogger so ofecere paginas com Uma Coluna!

Reply
10 de maio de 2010 10:45 delete

Não consegui fazer. Não tem como você fazer pra mim?

Reply
10 de maio de 2010 15:15 delete

Escola Municipal Professora Célia Ricardo
qual foi o problema? não achou os lugares de alterar os códigos?

se quiser escreva para o nosso email

Reply
17 de julho de 2010 17:01 delete

Adorei o blog. Parabéns!!! ;)

Reply
18 de julho de 2010 11:53 delete

Meu blog não tem #main; #sidebar e nem #newsidebar...O que eu faço?

Reply
18 de julho de 2010 14:17 delete

VEJU - Vigilância Epidemiológica de Jussara


você usa os novos modelos, eles são diferentes dos que falamos neste tutorial, não tem como fazer a mesma alteração neles

Reply
SJ
19 de novembro de 2010 22:16 delete

queria fazer uma home page fixa, como posso fazer??

Reply
SJ
19 de novembro de 2010 22:16 delete

queria fazer uma home page alguem poe me ajudar

Reply
19 de novembro de 2010 23:10 delete

veja aqui uma alternativa para deixar um texto no inicio da pagina

Fixar uma postagem no início do blog

Reply
4 de março de 2011 17:57 delete

Será que vc pode me ajudar a como organizar as postagens do blog lado a lado com imagens, obrigaduu pela atenção!

Reply
5 de março de 2011 01:20 delete

voce fala das imagens dentro das postagens? se for é só marcar na o lado na pagina que envia as imagens

Reply
1 de abril de 2011 15:21 delete

Mais tipo meu blog é
http://garradownload.blogspot.com/
eu quero que aquela imagem vermelha fique conforme as postagens e o banner reduzindo a largura.Tem como fazer isso?
Desde Já Agradeço


By:Matheus

Reply
1 de abril de 2011 19:08 delete

Marreta, nesta parte do html você pode retirar aquela cor
.tabs-outer {
overflow: hidden;
position: relative;
background: #a02516 url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png) repeat scroll 0 0;
}

apagando essa linha background: #a02516 url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png)

Reply
8 de abril de 2011 10:56 delete

Eu queria mudar o tamanho da coluna das postagens nas páginas estáticas. ou seja só a página principal ficaria com o tamanho que lhe vem atribuido, mas as outras como não tem colunas ficariam com toda a largura só pras postagens.
como faço?

Reply
8 de abril de 2011 15:21 delete

ana costa
vou procurar sobre esse assunto e se possivel criar um tutorial sobre ele

Reply
30 de maio de 2011 05:07 delete

Fabiano...
Páginas estáticas não têm colunas?

Reply
1 de novembro de 2011 16:07 delete

como faço para usar os modelos antigos para poder fazer essas mudanças, o meu modelo é o mais novo.

Reply
1 de novembro de 2011 16:09 delete

ou nao h´outra forma de fazer isso?

Reply
1 de novembro de 2011 16:13 delete

tem que fazer testes para descobrir a parte certa do html onde colocará as imagens

Reply
Anônimo
7 de novembro de 2011 19:10 delete

Ja testou? preciso disso urgente

Reply
8 de novembro de 2011 14:10 delete

Anônimo
essas alterações dependem muito de cada template, você mesmo tem que fazer os testes no seu blog

Reply
8 de novembro de 2011 18:54 delete

ME AJUDA, JA FIZ DE TUDO TESTEI MAS N CONSIGO.

Reply
8 de novembro de 2011 19:10 delete

tipo qndo vc coloca a imagem de plano de fundo, tem como diminuir a distania entre elas? isso poderia resolver o meu problema

Reply
8 de novembro de 2011 19:27 delete

posso te passar a conta para vc tentar fazer os testes?

Reply
9 de novembro de 2011 14:40 delete

TWO FLUX
não fazemos edições para outros blogs....

caso alguém se ofereça para ajudar cuidado, lembre-se que com o email e senha qualquer pessoa pode "roubar" o seu blog

Reply
Anônimo
11 de março de 2012 11:30 delete

E como coloca cantos arredondados la no final, além do topo?

Reply
11 de março de 2012 13:10 delete

você poderia criar uma imagem com cantos arredondados e colocar no estilo
#header-wrapper

Reply
25 de maio de 2014 13:13 delete

Preciso de uma ajuda com meu blogger, se alguém puder me ajudar ficarei muito grata. Abaixo de minhas postagens em cada pagina está ficando um espaço vazio muito grande. Há como corrigir isso, o que devo fazer?
O endereço de meu blogger é - http://umavezumdiaumahistoria.blogspot.com.br/
Espero que alguém possa me ajudar.
Obrigada.

Reply
25 de maio de 2014 14:27 delete

o espaço vazio é por causa do tamanho da coluna dos gadgets do seu blog.

para resolver poderia mudar os gadgets de lugar

Reply