TUTORIAL: Como fazer um Widget aparecer em somente determinada página do Blogger

Alô, galera!

Cá estou eu de volta, com mais um período da faculdade concluído, alterações no layout das ilustrações e uma utilidade pública para prestar a quem interessar. Às vezes, nos nossos blogs, existem certos elementos que nós preferiríamos que aparecesse somente em determinada página, mas, infelizmente, o Blogger não oferece esta função ao adicionar um novo Widget.

Bom, não temam mais, blogueiros de todo mundo. Cá estou eu para ajudá-los.

Eu mesmo estive na situação de revirar cada cantinho da web afim de aprender como fazer com que certos elementos apareçam somente em determinada página do blog. O problema é que todos os tutoriais disponíveis são anteriores a 2012, ou seja, tornaram-se obsoletos há séculos.

O Blogger de fato mudou bastante neste tempo, mas tudo o que este método precisava é de uma atualização. Disto isto, cá está um tutorial atualizado em como fazer um Widget aparecer em somente uma determinada página do Blogger.

Para dar um exemplo, demonstrarei como este tutorial está aplicado aqui no AI:

Esta é a Home Page do site. Normal, sem nenhum elemento além dos widgets da sidebar e as postagens.

Já estas são, respectivamente, as home pages dos marcadores Posts In English e Minha Jornada Musical - um novo segmento no AI, onde eu documentarei o progresso da minha coleção musical. Reparem como a "propaganda" ao topo da página aparece somente nestas páginas.

Para fazer isto, você deverá acessar o menu de Layout no dashboard do Blogger. Então você deverá adicionar, configurar e posicionar um novo Widget da maneira que você quer. Mas atenção! Se for um elemento que deverá ficar sem título, então dê um momentaneamente e retire depois que estiver tudo pronto.

O próximo passo será abrir o menu Tema e então Editar HTML. Aperte CTRL+F, digite o nome que você deu ao Widget e dê enter. Quando encontrar o código respectivo ao elemento desejado, então você deverá expandi-lo, clicando no triângulo preto que se encontra à esquerda do código.

Você deverá expandir a linha <b:includable id='main'>...</b:includable>.

Após expandir, você deverá encontrar o seguinte código, ou algo similar:

<b:widget id='HTML5' locked='false' title='Nome do gadget' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

 Substitua-o completamente pelo seguinte:

<b:includable id='main'>
<b:if cond='data:blog.url == "Coloque aqui o link da página"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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>

Substitua onde indicado de acordo com o que se pede.

Contudo, há duas alterações possíveis, caso você queira outros lugares. Se você quiser um Widget que apareça somente na homepage, então substitua a segunda linha do código pelo seguinte:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Ou, se quiser que o Widget apareça somente nas postagens, então a linha deverá ser substituída por:

<b:if cond='data:blog.pageType == "item"'>

Agora é só salvar as alterações!

 

Espero tê-los ajudado. Deixem nos comentários se vocês gostariam de mais tutoriais por aqui, se sim, o que vocês desejam saber? É claro, que me seguindo no Bloglovin' confere as postagens do AI + conteúdo exclusivo 100% em Inglês.