Nessa postagem, vou ensinar como se faz a personalização das páginas adicionais. É uma edição um pouco complexa e envolve alterar o HTML do modelo. Em casos como esses, é muito importante fazer uma cópia do mesmo. A tela acima mostra como: é necessário clicar, na zona de edição, no botão "Fazer Backup/Restaurar" (no destaque em amarelo).
A importância dessa operação é que se cometermos algum erro que prejudique o nosso Layout ou funcionamento do blog, será simples restaurar fazendo o upload do que baixamos antes.
Embora a linguagem HTML não seja complicada, ela é exigente: uma marcação não fechada, algum erro ortográfico, etc., pequenos equívocos como esses podem provocar problemas.
Bem, quanto à personalização das páginas, ela é útil para podermos fazer algum diferencial nas mesmas -- se eliminamos, por exemplo, a barra lateral ganhamos mais espaço, podemos mudar o fundo, entre outras ações.
Cabe notar que o que será ensinado, aprendi no blog Blogger Sentral, de onde estou tirando as informações. Como está em inglês no original, creio que facilita explicar aqui. Além disso, como personalizei as páginas do blog, você poderá notar que o método funciona.
Os passos para fazer a personalização das páginas, são os seguintes:
I. Aplicar o estilo condicional
1. Faça a cópia do modelo, como explicado antes.
2. Em Modelo selecionar Editar HTML (ver abaixo)
3. Procure o seguinte código no HTML (dica: use o localizador do navegador: Crtl+F)
- <body> se você está usando um modelo de Layout (são os modelos antigos do Blogger), ou
- <body expr:class='"loading" + data:blog.mobileClass'> - se você está usando um Designer de modelo (os mais recentes modelos).
| 1 | <!-- Static page styling Start--> |  |
| 2 | <b:if cond='data:blog.pageType =="static_page"'> | |
| 3 | <style> | |
| 4 | .blog-pager, .footer, .post-footer, .feed-links, .sidebar { display:none !important;} | |
| 5 | #main-wrapper {width: 95%; float:none; margin: 0 auto !important;} | |
| 6 | </style> | |
| 7 | </b:if> | |
| 8 | <!--http://www.bloggersentral.com --> | |
| 9 | <!-- Static page styling End --> |
Se você está usando o Designer de modelo, substitua o código da linha 5, pelo que segue. (Obs.: copie o código a partir do link, no ícone.)
| 5 | .main-inner .columns {width: 100%;padding-left:0 !important;padding-right:0 !important;} | |
5. O que está entre as marcações <style>…</style> são regras de CSS (em outro momento falo sobre o CSS). Está relacionado com o que tentamos mudar em diferentes modelos. No código acima nós:
- Removermos o página do blog, o rodapé, rodapé da postagem, links de feed e menus laterais. Isto é feito no código da linha 4.
- Ampliar a ára de postagem, para preencher os espaços dos menus laterais. Isto é feito no código da linha 5. Se você quiser fazer isso também, descobrir qual é o seu cabeçalho ou largura deste e aplicá-lo aqui.
II. Identificar e adicionar os seus próprios elementos ao código
Os seus elementos Id ou Classes talvez sejam diferentes dos do código acima. Você pode encontrar os seus códigos no interior do código do modelo. Para ter uma ideia do que se deve procurar, veja um trecho de exemplo -- do código do modelo do Blogger Sentral:
| 1 | <div class='side-wrapper'> |
| 2 | <b:section class='sidebar' id='sidebar2' preferred='yes'> |
| 3 | <b:widget id='HTML2' locked='false' title='' type='HTML'/> |
| 4 | <b:widget id='HTML4' locked='false' title='Popular Posts' type='HTML'/> |
| 5 | <b:widget id='Label1' locked='false' title='Labels' type='Label'/> |
| 6 | </b:section> |
| 7 | </div> |
Como você pode ver, para cada elemento, seja ele uma div, uma section ou um widget, é atribuído um ID e/ ou uma classe. Para removê-lo da página, basta adicionar o ID ou Classe à lista na linha 4 de código no passo 4. Para uma ID você precisa adicionar o prefixo "#" e para uma Classe, adicione "." como prefixo.
Existe um método mais fácil de encontrar esses dados de widget e seção de Id no Blogger, que é explicado no Blogger Sentral, veja aqui.
Por exemplo, se você deseja remover o widget de "Popular Posts" , tudo que você precisa fazer é adicionar # HTML4 à lista. Para remover a parte inferior da barra lateral à esquerda (que contém os Posts Populares e a widgets Labels), adicione # sidebar2 à lista.
III. Colocando estilos individuais nas páginas
Usando a marcação condicional de páginas estáticas, como explicado acima, poderemos aplicar estilos em todas as páginas estáticas. Porém, podemos também fazer a aplicação de um estilo individual a cada página. Por exemplo, se você deseja colocar uma cor de fundo em cada página. Como fazer?
O método é simples, vamos ver como.
1. Vá à zona de edicação > Páginas, e selecione a página que você quer mudar.
2. Vá para o modo de edição HTML.
3. Insira um código CSS no topo da página, como o seguinte:
| 1 | <style type="text/css"> | |
| 2 | .content-inner {background-color: palegreen} | |
| 3 | </style> | |
| 4 | ||
| 5 | YOUR STATIC PAGE CONTENT HERE |
4. Perceba que, com esse código dentro da página, serão feitas alterações que alteraram apenas essa página, sem afetar as outras.
5. Veja neste blog, como as páginas individuais foram alteradas.
Nenhum comentário:
Postar um comentário