31 de mai de 2010

Aumentando o tamanho dos posts nas páginas internas e ocultando a sidebar

 O mesmo blog possui as páginas internas diferentes da primeira página do blog.
Veja o DEMO

Uso este recurso aqui no blog e me perguntam como fiz. Aprendi com a Rô, do Bloggershera e inclusive já linkei nos posts como se faz, mas agora vou ensinar para quem não conseguiu entender.
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.




Vá até o HTML de seu blog e procure pelo seguinte trecho.(este trecho é o do template "Mínima" sem alteração alguma, se o seu blog for modificado poderá estar um pouco diferente)

 /* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

 No código  acima as partes coloridas representam os valores da largura das partes de seu blog. Note que as cores representam as cores da imagem.



#outer-wrapper {
  width: 660px;----Esta é a largura total de seu blog


#main-wrapper {
  width: 410px;---Esta é a largura da área das postagens


#sidebar-wrapper {
  width: 220px;----Esta é a largura da sidebar










O que vc terá que fazer é colocar a área de postagem (#main-wrapper) da largura da área total do blog (#outer-wrapper) e esconder a sidebar (#sidebar-wrapper) e/ou esconder outras colunas que seu blog tiver.


Para isso, copie o próximo código e cole depois de ]]></b:skin>




<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#main-wrapper {width: 630px;}
#sidebar-wrapper {visibility: hidden; display: none;}
</style>
<style type='text/css'>
body {
background: #E58383;
}
#main-wrapper {
background: #F4BEBE;
border: 4px solid #C94949;
padding: 10px 4px 10px 4px;
margin: 2px;}
</style>
</b:if>
Código em azul é a cor de fundo do blog
Código em roxo é a cor de fundo dos posts
Código em vermelho é a cor da borda do post.

Esse código que coloquei  aumenta as postagens para 630px, como indica o código na cor rosa. Se vc quer que a parte da postagem fique maior ou menor, basta modificar o número na cor rosa no código.


O código na cor amarela representa a área da sidebar que será escondida. Se em seu blog houver outras colunas, basta repetir o código amarelo e trocar a parte que está em verde pelo nome de suas outras colunas.



7 comentários:

  1. eu estava procurando faz muito tempo
    essa dica... até tentei pegar de um
    template seu :X

    ResponderExcluir
  2. Fofuraaa!!!\O/
    Aprendi algo mais simples no blog do Crazywolf sobre esconder,ocultar e até tornar cada postagem numa pagina estatica,do tamanho que desejar.
    Basta colocar um codigo no final de cada postagem!
    Ah ja sei ...CADE O CODIGO OU COMOFAZ?

    ResponderExcluir
  3. Mais uma, eu encontro tudo que preciso aqui.
    Parabéns!

    ResponderExcluir
  4. Nossa, você salvou meu dia!
    Muito obrigada!
    Abs
    Das

    ResponderExcluir
  5. Dúvida?
    Em caso do blog ter duas colunas, como faço para ocultar só uma?

    ResponderExcluir
  6. Poderia me ajudar, é que meu template foi feito no artisteer e não esta dando certo o blog é esse www.cruzeirosempre.net eu so queria ocultar a sidebar, obrigado e aguardo resposta

    ResponderExcluir
  7. Conversa, no meu não serviu, colocar depois de ]]> não pode. A não ser que meu modelo não serve design de modelo 2

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube