5 de mar de 2010

Personalizar páginas estáticas do blog

Recebi alguns emails e fizeram alguns comentários me pedindo para fazer a tutorial ensinando a customizar as páginas estáticas do Blogger. Essas que tenho aqui em meu blog aprendi com a Rô do BloggerSphera no Ice Breaker pois como podem observar todas as páginas de meu blog são assim. Clique AQUI e aprenda com o Sérgio.


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.
No entanto como agora o Blogger disponibiliza esse tipo de serviço mas somente para 10 páginas, eis que a Rosa do El Escaparate já ensina como fazer para modificar a aparência das tais páginas. Veja AQUI como fica. Então, eis a dica.




Vá até o HTML de seu blog e antes de:
 </head>



Cole esta código abaixo.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
#main-wrapper {
width: 660px;
}
</style>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
#main-wrapper {
width: 850px; /*aqui o tamanho que a página abrirá*/
}
#newsidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
</style>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
.post {
color: #000000; /* Color do texto das postagens*/
background: #ffffff; /* Cor de fundo das postagens*/
border: 2px solid #FF9900; /* Cor da borda das postagens */
font-size: 15px; /*Tamanho da letra */
margin:.5em 0 1.5em;
padding: 10px; /* Distancia do texto a borda do post */
}
.post h3 a, .post h3 a:visited {
display:block;
color: #FF9900; /* Cor do título das postagens */
font-size: 25px; /* Tamanho das letras */
border-bottom: 1px solid #FF9900; /* Linha sob o título da postagem*/
}
.post h3 a:hover {
color:#0000CC ; /* Cor do titulo da postagem ao passar o mouse */
}
</style>
</b:if>


Observações... O código na cor azul representa a largura do seu blog
O Código na cor amarela representa a largura que ficará seu post ao ser clicado
O código na cor verde faz com que a sidebar suma ao abrir a página estática, portanto se você tem mais de uma sidebar, repita o código abaixo mas modifique pelo nome que deu a sua coluna no código na cor roxa..

#newsidebar-wrapper {
width: 0px;
visibility:hidden;
display:none; }



Para dar estilo ao menu, copie o código abaixo e cole antes de:

]]></b:skin>

/*estilo menu das paginas estaticas-----------------*/

#PageList1 {
background: #FFF; /*cor de fundo do menu*/
width: 100%;
border: 2px solid #808080; /*cor das bordas*/
margin: 8px;
}
#PageList1 ul li a {
color: #cccccc; /*cor das letras*/
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size:15px;
padding-right: 20px;
background: transparent url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S5Fahzz9WkI/AAAAAAAABQ8/MfL5zu3PYN8/s1600/Animation1aSD.png) center right2 no-repeat;
}
#PageList1 ul li a:hover {
color: #808080; /* cor das letras ao passar o mouse*/
position: relative;
left: 1px;
top: 1px;
background: transparent url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S5FarCGMGkI/AAAAAAAABRE/dgBw3jID_VM/s1600/DFGAD.png) center right no-repeat;
}








Se você usa o código "Leia Mais" que expliquei NESTE POST e está tendo dificuldade em tira-lo das páginas estáticas, é só substituir o segundo código por este abaixo. (Dica do Darkness)


<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span id='showlink'><a expr:href='data:post.url'>Leia Mais ►</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

16 comentários:

  1. Amiga você é uma fofa alias uma verdadeira fofura!
    Muito Obrigada mais uma das inumeras vezes rainha,que tu me ajuda por essas bandas.
    Beijão,abraços enormes e aguarde que em breve te encomendo um template!
    Beijãoooo!!!

    ResponderExcluir
  2. Hola, estaba visitando y me encontre con este maravilloso sitio web, me ha gustado el diseño y el esfuerzo y la dedicacion que hay en el, me gustaria hacer un intercambio de enlaces, esperare su respuesta, de antemano gracias.

    Att. Jose Ignacio | Facebook Argentina

    ResponderExcluir
  3. essas especificações que voce colocou, com as cores e seus significados, eu tenho que retirar quando for colocar no meu blog?

    ResponderExcluir
  4. Oi Alê, não precisa tirar nada. É apaenas para te orientar. Beijos

    ResponderExcluir
  5. Com algumas modificações se encaixou no meu blog, tive um problema no padding do título.
    Muito obrigado pela dica.

    ResponderExcluir
  6. Nossa Elke,muito bom mesmo!
    Procurei tanto e não encontrei este tutorial.

    Obrigado mesmo.. =]

    ResponderExcluir
  7. Este comentário foi removido pelo autor.

    ResponderExcluir
  8. Olá gostaria de saber se existe a possibilidade de mais de um post nas páginas estáticas do blogspot. Pois no meu blog somos duas autoras e queria fazer uma página diferenciada pra cada. Com postagens referentes ao trabalho de cada uma separadamente. Se souber alguma forma por gentileza me responda. Agradeço desde já.

    ResponderExcluir
  9. Olá gostaria de saber se existe a possibilidade de mais de um post nas páginas estáticas do blogspot.

    VISITEM!!!!

    http://jximenesdoprado.blogspot.com/

    ResponderExcluir
  10. Muito bom amiga, era isto que eu procurava, você vai longe assim, um grande abraço.

    ResponderExcluir
  11. Tenho páginas estáticas no meu blog, mas só consigo postar sempre na mesma página. Tenho uma página por exemplo de videos gostaria de postar um video com links separado tudo dentro da página de videos como faço. famaoficial.blogspot.com

    ResponderExcluir
  12. gostaria de saber se existe a possibilidade de mais de um post nas páginas estáticas do blogspot.

    ResponderExcluir
  13. Olá, eu aqui novamente pra te falar que tenho uma dúvida no 1º código onde tem que colocar abaixo de 'head', esse código vai mexer no tamanho da minha área de postagem pq a minha área de postagem é de 640 e no teu código está 660, tmb vai mexer no titulo dos posts, eu não entendii bem essa parte?
    Outra coisa eu posso usar só o segundo código onde vc pedi pra colocar em cima de 'b:skin' só pra usar no menu, pois não sinto necessidade de ter muitas páginas, testei no meu blog de testes e está funcionando legal, uso o modelo minima, mas pode ter algum tipo de problema se não usar td o código pq a minha dúvida mesmo é se vai mexer em alguma parte do que já editei no layout na parte de postagens?
    BjooO!

    ResponderExcluir
  14. Me ajudou MUUUUUUUUUUUITO ! Obrigada ^^
    So queria encontrar onde alterar a fonte e como deixar centralizado, mas na achei :(

    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