Como exibir ou ocultar os elementos gadgets, através de condicionais no blogger? Essa pode ter sido sua pergunta quando percebeu que no painel do Blogger na seção Layout, não era possível algumas manipulações de aparecimento em páginas e postagens especificas. Mas a partir de agora seu problema acabou!
Explicando melhor, o Blogger executa esta manipulação há muito tempo na codificação base dos templates, principalmente o seu, e se você souber usar as condicionais, poderá organizar as aparições da forma que desejar e achar melhor para seu tipo de blog.
Aqui no Phablo Projetos, ocultamos alguns gadgets na página inicial com o intuito de não sobrecarregar a execução no carregamento e na precaução da aparecia ruim que fica um blog com muitos elementos ao lado esquerdo ou direito, deixando desproporcional o corpo da postagem com a barra lateral(sidebar).
Mas não é só nisso que que as condicionais fazem, veja:
- Nas páginas estáticas você pode ocultar toda a barra lateral;
- Exibir certos elementos somente na página inicial ou em postagens;
- Mudar tamanho de fonte de texto nas páginas(inicial, posts).
E com elas você pode ter outras funcionalidades, como:
- Deixar o título do seu blog corretamente visível ao Google;
- Dependendo das páginas, também na utilização das Heading Tags.
OBS: Já que deu para ter uma percepção melhor das condicionais, deixo claro que no uso imediato delas sugiro que você use primeiro um blog de teste para depois usá-las em seu principal blog. Mas também poderá visualizar e salvar a cada mudança necessária com as mesmas.
Nota: A seguir irei explicar um pouco das expressões que condicionam e no final mostrarei como devem ser inseridas da uma funcionalidade correta!
Nota: A seguir irei explicar um pouco das expressões que condicionam e no final mostrarei como devem ser inseridas da uma funcionalidade correta!
Essa parte é legal de explicar, pois as expressões <b:if...> e <b:else/> que condicionam tem uma linguagem de programação que para seu entendimento elas poderiam estar exclamando uma frase para nossa leitura, que seria: "se for a página inicial, exiba isso aqui", agora para entendimento do navegador seria de outro jeito:
<b:if cond='data:blog.pageType ==
"index"'>
Texto que será exibido na página principal </b:if> |
Os segredo dessa programação está na primeira linha, <b:if cond='data:blog.pageType == "index"'>, é por causa dela que a frase "Texto que será exibido na página principal" será considerada ou não para execução, mas claro que no lugar da frase será mais alguns códigos que representam elementos gadgets em si.
Explicando agora a expressão <b:else/> da mesma forma que citei uma frase para seu entendimento, no caso dela aqui a frase seria: "sendo uma página de post, exiba a imagem A; senão, exiba a imagem B", o segredo dessa expressão está no "senão", funcionando como uma disponibilizadora de alternativas:
| <b:if cond='data:blog.pageType == "item"'> <img src='imagem1.jpg'> <b:else/> <img src='imagem2.jpg'> </b:if> |
Possíveis usos das condicionais no Blogger
Antes de vermos dois tipos de usos das condicionais, você deve entender operadoras que junto a códigos de programação são lidos pelo blogger, que são:
1ª (igual) - expresso pelos símbolos ==
2ª (diferente) - expresso pelos símbolos !=
Logo, quando você quiser manipular certos elementos com a função de ocultar ou exibir só na página inicial você colocará a linha a seguir:
| <b:if cond='data:blog.pageType == "index"'> |
Agora no caso do código abaixo você irá manipular a aparição de elementos em qualquer página de seu blog:
| <b:if cond='data:blog.pageType != "index"'> |
Saiba quais páginas você pode utilizar nas condicionais dos elementos
Anteriormente você percebeu que podemos manipular a aparição na página inicial e em qualquer página, mas as condicionais vão além disso, onde a organização dos seus elementos poderão estar mais precisos e estratégicos.
Nas linhas de código que citei acima você viu o termo: "data:blog.pageType", onde usá-lo ou substitui-lo, irá organizar em que tipo página o elemento irá aparecer, abaixo você verá trechos para substitui-lo e qual a funcionalidade:
- error_page - Com esse trecho o seu elemento somente irá aparecer na página de aviso "página não encontrada";
- archive - Trecho em que seu elemento irá aparecer em páginas de arquivo do seu próprio blog, no caso sendo uma página com posts de um mês em específico, como exemplo o do mês de março: (http://phabloprojetos.blogspot.com.br/2014_03_01_archive.html);
- static_page - Esse trecho representa todas as páginas estáticas do blog;
- item - Trecho de todas as páginas de postagens;
- index - Trecho da própria página inicial.
E o mais legal de todas as manipulações é você poder fazer seu elemento aparecer em páginas específicas, isso é claro utilizando o trecho "data:blog.url" mais a URL específica, que no caso seria uma página estática, um marcador ou uma postagem:
| <b:if cond=data:blog.url == "http://phabloprojetos.blogspot.com.br/p/parceria.html"'> <b:if cond=data:blog.url == "http://phabloprojetos.blogspot.com.br/search/label/SEO"'>
<b:if cond=data:blog.url == "http://phabloprojetos.blogspot.com.br/2014/03/academia-webmaster-construa-sites-ajuda-google.html"'>
|
Inserindo condições nos elementos do blog
Agora chegou a hora de colocar em prática o que você aprendeu agora pouco. Você verá agora uma forma prática de como inserir um condição em um elemento, como exemplo irei usar a linha de código para aparição de elemento somente na página inicial.
Primeiro você escolherá qual elemento gadget de seu blog você irá condicionar, para facilitar digamos que você tem um gadget com o nome "lista de links", ter um nome é importante para encontrar o gadget, se seu elemento não tem, coloque para para inserir a condição depois retire o nome se quiser, pois não irá interferir em nada.
Seguindo o nome fictício, vá no painel Blogger na guia Modelo, depois em Editar HTML, clique em qualquer lugar na caixa de código que irá abrir e depois pressione CTRL + F e digite "lista de links", possivelmente irá aparecer algo parecido como abaixo:
| <b:widget id='HTML7' locked='false' title='Lista de Links' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> |
Agora que você achou só precisará inserir a linha de código que desejar com mais um pequeno trecho, no caso aqui irei inserir: <b:if cond='data:blog.pageType == "index"'> e </b:if> e pronto, veja abaixo:
| <b:widget id='HTML7' locked='false' title='Lista de Links' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.pageType == "index"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:if> </b:includable> </b:widget> |
Agora é só salva e ver como ficou! Se lembre de visualizar da forma que você condicionou, se você escolheu uma condição para aparição só em página específica, logo se você clicar em visualizar lógico que não irá aparecer, portanto o correto seria visitar a página em específico.
Conclusão
No meu ponto de vista, essa funcionalidade de condicionar seu elementos é para quem tem criatividade junto a um blog criativo, como citei antes, usá-las como estratégia também é uma boa escolha, pois na área de blogs chamar atenção do visitante ou disponibilizar informações é o que os elementos fazem além dos posts, logo a organização e o conteúdo de seu blog são um belo apoio em SEO e na satisfação de seu leitor.
Querido leitor você já usa as condicionais? Se sim, desde quando você as inseriu em que resultou? Deixe um comentário!
