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

Link desta Pagina

Compartilhe essa Página

51 comentários:

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

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

    ResponderExcluir
  3. 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

    ResponderExcluir
  4. 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

    ResponderExcluir
  5. 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

    ResponderExcluir
  6. 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!!!

    ResponderExcluir
  7. Lilas Bijouterias

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

    Paginas extras para o Blogspot

    ResponderExcluir
  8. 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?

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

    ResponderExcluir
  10. 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 ...

    ResponderExcluir
  11. 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

    ResponderExcluir
  12. 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 ?

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

    ResponderExcluir
  14. 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...)

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

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

    ResponderExcluir
  17. Como tirar aquilo: Posts RSS - Coments RSS?

    ResponderExcluir
  18. João Victor


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

    .feed-links{display:none}

    ResponderExcluir
  19. 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!

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

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

    ResponderExcluir
  22. 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

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

    ResponderExcluir
  24. 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

    ResponderExcluir
  25. queria fazer uma home page fixa, como posso fazer??

    ResponderExcluir
  26. queria fazer uma home page alguem poe me ajudar

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

    Fixar uma postagem no início do blog

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

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

    ResponderExcluir
  30. 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

    ResponderExcluir
  31. 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)

    ResponderExcluir
  32. 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?

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

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

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

    ResponderExcluir
  36. ou nao h´outra forma de fazer isso?

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

    ResponderExcluir
  38. Ja testou? preciso disso urgente

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

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

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

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

    ResponderExcluir
  43. 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

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

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

    ResponderExcluir
  46. 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.

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

      para resolver poderia mudar os gadgets de lugar

      Excluir