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