LEIA OS EMAILS E NEWSLETTERS QUE ASSINO: Dicas para Blogs

segunda-feira, 22 de fevereiro de 2010

Dicas para Blogs

Template do Blog, colunas de tamanhos iguais

Posted: 22 Feb 2010 09:53 AM PST

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:

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;}

Atualmente 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:

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:

Colocamos 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.