Como criar páginas no Blog.
Um dos novos recursos do Blogger é a possibilidade de criar páginas estáticas, ou seja, que estão fora da cronologia das publicações. Para criar páginas para o seu blog, é muito fácil. Vem comigo: Primeiro clique em Postagem e depois em Editar Páginas:
Escreva o título da página e o texto, normalmente, depois clique em Publicar Página:
Após clicar em Publicar você deverá escolher onde deseja exibir o gadget de páginas: na sidebar ou abaixo do cabeçalho:
No caso do seu template não possuir a div crosscol-wrapper (que fica abaixo do cabeçalho): Esta div se encontra presente nos templates originais do Blogger, mas muitos templates modificados não têm esta div, por isso pode aparecer esta outra página:
Basta clicar em Adicionar o gadget lista de páginas.
Então você determinará, na janela que se abre a ordem dos links do menu, como mostra a imagem abaixo. Basta clicar em salvar e arrastar o gadget pelo layout, como qualquer outro gadget de sua página:
No meu exemplo, a lista aparece abaixo do cabeçalho:
Se o seu layout não possui a div crosscol-wrapper, é muito fácil de colocá-la. Copie o código abaixo:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>
Agora vá em Editar HTML e coloque o trecho do código que copiou abaixo de content-wrapper, como mostra a imagem e clique em Salvar:
- Existe a possibilidade de dar um estilo diferente para as páginas
Este truque de dividir a postagem em duas colunas paralelas, eu encontrei no blog Templates e Acessórios, que consulto sempre. Como achei a dica muito legal, decidi dividir com vocês. É muito fácil realmente de aplicar e você tem a liberdade de usar apenas em determinadas postagens.
Basta inserir em sua postagem o código:
<div style="float: left; WIDTH: 45%">Aqui o Texto da Coluna da Esquerda</div>
<div style="float: right; WIDTH: 45%">Aqui o Texto da Coluna da Direita</div>
<divstyle="clear: both"></div>
Lembrando que você deverá colar este código apenas nas postagens que desejar dividir.
Muitas pessoas me perguntam como dar um estilo diferente para a primeira página do blog ou mesmo para fazer com que uma determinada postagem seja sempre a primeira a ser vista, como um texto fixo de apresentação e boas-vindas. Para fazer com que um texto fique fixo na primeira página do blog, publique-o normalmente, depois entre na página de edição do texto e programe uma data para o futuro, como mostra a imagem abaixo:
Jogue a data para 2019, por exemplo, e este sempre será o primeiro post visível em seu blog, encabeçando todos os outros que publicar. Para que apareça apenas este post na primeira página, vá em Configurações ->Formatação e programe para aparecer apenas uma postagem:
Para dar a primeira página um estilo diferente das páginas internas do blog, acrescente após a tag ]]></b:skin>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
aqui os estilos para a primeira página
</style>
</b:if>
O que faço aqui é o uso de uma condicional (em negrito) que determina que o estilo se aplique apenas à Home do blog. Vamos tomar, por exemplo, um Template Mínima do Blogger (faça sempre experiências com um blog de testes, nada de ir direto modificando seu blog oficial, ok?) que está neste blog de testes; note que a primeira página está com as cores modificadas, a largura de outer-wrapper é maior e eu inverti o posicionamento das colunas: passei a sidebar para a esquerda e a coluna do post para a direita. Clique no título do post para ver a página interna, onde aparece o template Mínima sem modificações. Para isso eu acrescentei os seguintes códigos:<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
body{background: #111;}
#header-wrapper{width: 100%;height:120px; background: #303030; border:none;}
#header{border:none}
#outer-wrapper{width: 900px}
#main-wrapper{float: right; width: 600px;background: #f5f5f5}
#sidebar-wrapper{float: left; width: 280px; background: #303030}
body#layout #header-wrapper, body#layout #sidebar-wrapper, body#layout #main-wrapper{background: none}
</style>
</b:if>
o que está em negrito é o estilo para o painel Layout, pois se não especificarmos que não há background, as cores ou imagens escolhidas para a primeira página aparecerão alí também.
Este é apenas um exemplo bastante simples para que entendam como diferenciar a home das outras páginas do blog. (Existem muitas possibilidades e aí é que entra a criatividade de cada um:)
É possível criar outros estilos para as diferentes páginas do seu blog e eu recomendo que leiam este post do Bloggersphera, onde tenho aprendido muito sobre o assunto. No excelente Blogger Buster ensina: como dividir seus posts em duas colunas.
Antes de começar, crie um blog de testes e não tente nenhuma alteração no seu blog atual. Crie um blog de testes e coloque nele o template Mínima, que o Blogger oferece. clique aqui e veja as postagem divididas em duas colunas. Esta divisão aparecerá apenas na página inicial do seu blog. O uso do hack Leia Mais é opcional serve para converter um template do wordpress. Ele não é necessário, ok?
Após criar seu blog de testes com o template Mínima, faça as seguintes alterações no CSS: #outer-wrapper {width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Originalmente o template Mínima tem uma Outer-Wrapper com largura 660px;mude para 940px como mostro acima, em destaque.#main-wrapper {width: 620px;
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 */
}
Deixe main-wrapper com 620px de largura e a sidebar com 300px de largura:#sidebar-wrapper {
width: 300px;
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 */
}
Remova de header-wrapper e footer-wrapper a linha que determina a largura:#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Acrescente no código CSS (pode ser logo após Outer-Wrapper) o seguinte código:#blog-pager {
width: 600px;
clear: both;
text-align: center;
}
Agora posiciona melhor a data dos posts. Clique em Expandir Modelo de Widget e procure o seguinte código:<data:adStart/>
<b:loop values='data:posts' var='post'> <data:post.dateHeader/>
</data:post.dateHea
</b:if>
<b:include data='post' name='post'/></b:inclu
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/></b:inclu
</b:if>
<data:adEnd/></data:a
<data:adCode/></data:adCo
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/></data:a
Corte a parte em vermelho e cole imediatamente após:<a expr:name='data:post.id'/>
Feitas estas modificações, copiei o código abaixo:
<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
</style>
</b:if>
e cole imediatamente após </b:skin>
Visualize e você verá que na página inicial seus posts estarão divididos em duas colunas!
Para que as imagens que você usar em seus posts não ultrapassem a largura das colunas na página inicial, você pode estabelecer uma dimensão fixa para elas (nos posts internos elas aparecerão no tamanho real), bastando acrescentar o que está em vermelho: <b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}.post-body img {width: 280px;}
</style>
</b:if>
Esta medida para a largura da imagem pode ser alterada ao seu gosto. No caso do meu blog de testes eu ainda determinei que as imagens apareçam sempre à esquerda do texto, incluindo a linha: float:left;Também determinei uma altura fixa para cada coluna (cada bloco de texto) acrescentando a linha em destaque:.post {width: 310px; height:220px;........
Isto usando o hack Leia Mais, que é opcional.
Como manter a lista de marcadores na sidebar sem que os mesmos apareçam nos finais das postagens.
Para isso, vá a Editar HTML, clique em Expandir Modelo de Widget, procure e apague todo o trecho abaixo: <span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
Feito isso, clique em Visualizar e se tudo estiver ok, clique em Salvar.
A lista de Marcadores continuará aparecendo na coluna lateral (sidebar), porém, não mais aparecerá abaixo das postagens.
Normalmente, ao terminar de escrever seu post, você o classifica em uma categoria (marcador) para facilitar a busca do seu leitor. Mas e quando se deseja alterar os marcadores que já foram colocados em posts antigos? Muito simples: clique em Editar Postagens uma lista com todos os seus posts aparecerá. No topo da lista, a opção de selecionar todos, ou você pode selecionar apenas alguns, bastando clicar no quadradinho à esquerda do título do artigo.
Tendo selecionado seus posts, clique no menu suspenso onde se lê Ações de Marcador. Você verá a opção Aplicar Marcador (e abaixo todos os marcadores que você já criou) e mais abaixo a opção Remover Rótulo (se você deixou algum post demarcado).
Suponhamos que você anteriormente criou um marcador que já não lhe interessa mais. Basta clicar em Todos (todos os posts serão demarcados) e no menu suspenso, dentro da lista de Remover Rótulo, escolher o marcador que deseja extinguir
Você gosta da numeração que aparece ao lado dos marcadores - entre parênteses assim: música (6), poemas (5), etc. - apontando quantos posts estão relacionados ao assunto? Bem, eu não gosto, acho esteticamente feio e além de tudo, desnecessário. Se você pensa como eu e deseja retirar a numeração, procure no código do seu template o trecho relacionado à Marcadores(ou o nome que tenha dado à lista). Vá ao HTML do seu blog, clique em Expandir Modelo de Widgets e procure por: <:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)</data:label.c
</li>
</b:loop>
</ul>
Apague o que está em negrito, visualize e salve.
