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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi57RdFEaRan3AXGMqPuRGZEqqaEAZCW4JCXfa0hRtCI0fcmaIx2H1MfMB27LkOgJ-1Za-Ueza16c9mjTlI-cfF-b0RS98jcMS8DXtYn5U01HpgIr63e66MQrhvahlFCuCKTG8yROl8WUSj/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipRRvpRs_d6bBDKnxCiDfay_RHswcwpzYwonSXI5tvVxgDOMXwk8sGFA9eSZzeXOCKOd8iwySUmn0InlzonJX7wQAorS-aEsag27Um_elrkNfj2F-WoYk6xRuNDtTNGH3hITbn8Edl8mU1/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>