Ocultando elementos das páginas internas

Hoje, pela manhã, recebi a seguinte pergunta, através do formulário de contato, do leitor Victor Hugo Filgueiras:

"[...] Queria só tirar uma dúvida sobre gifs, queria saber se tem algum jeito da Gif rodar somente dentro do post e não rodar na página inicial, como esse site aqui: www.forgifs.com, [...] obrigado,
Victor."

Sobre gifs:

Colocar gifs animadas nos posts do Blogger sempre foi um tanto problemático por que a imagem perdia seu movimento e a saída era hospedar a imagem em outro site que não o Blogger. Porém, a pergunta do Victor me chamou a atenção para o assunto e fui fazer meus testes. Notei que a imagem se comporta de maneira diferente dependendo do modo em que é inserida no post. Se a imagem for colocada pela aba Escrever, o gif não perde seu movimento, o que não ocorre se for colocada na aba Editar HTML. Veja aqui os testes que fiz (tanto no Blogger in Draft quanto no Blogger.com). Isto por que, quando se coloca a imagem no modo HTML ela é automaticamente redimensionada, o que não ocorre quando se coloca no modo Escrever.

Nos testes que fiz, se a imagem é colocada no modo HTML, perde seu movimento definitivamente, independente de suas dimensões. Talvez por que  na aba Editar HTML é obrigatório escolher uma dimensão para a imagem, o que não ocorre na aba Escrever e isso talvez influencie o comportamento da imagem, não sei. Quem souber, por favor, me avise :)

Antes de prosseguir e definitivamente responder a pergunta do Victor, só mais uma observação: se você colocar um gif animado pela aba Escrever e ele não apresentar movimento, clique na imagem e selecione a opção Tamanho Original

Agora, respondendo definitivamente ao Victor...

Como fazer um gif apresentar movimento apenas dentro do post (página interna)

1) Se você usa o resumo de postagem do Blogger: 
 
A primeira coisa que devemos fazer é criar uma condicional para garantir que um determinado conteúdo não apareça na página interna (no post), apenas na página inicial (home). Para isso, vá em Design =>Editar HTML (o código html do seu template), e coloque o seguinte trecho acima da tag  </head>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.home{display:none}
</style>
</b:if>

Esta condicional envia a seguinte mensagem: o que estiver contido na class home não deve aparecer na página interna (post).

Salve a alteração, abra uma nova postagem e nela coloque o gif animado duas vezes, ambas pela Aba Escrever e redimensione a primeira imagem, para que ela perca o movimento (deixe-a maior ou menor que o original) e garanta que a segunda esteja no seu tamanho original. Se está usando um resumo de postagem, insira a segunda imagem após o link do resumo (more), assim:

<div class='home'>

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-ttsN1VCFBik/Th8quu7ZvFI/AAAAAAAAXvw/oNz3tDgQP7w/s1600/Clap-Clap.gif" imageanchor="1"><img border="0" height="240" src="http://1.bp.blogspot.com/-ttsN1VCFBik/Th8quu7ZvFI/AAAAAAAAXvw/oNz3tDgQP7w/s400/Clap-Clap.gif" width="320" /></a></div>

</div>

< !--more-- >

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-Xs1EvktHrFY/Th8TtUJ2UgI/AAAAAAAAXvA/xsO2m8TbdMs/s1600/Clap-Clap.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-Xs1EvktHrFY/Th8TtUJ2UgI/AAAAAAAAXvA/xsO2m8TbdMs/s1600/Clap-Clap.gif" /></a></div>

Note que o código da primeira imagem está entre <div class='home'> </div>.  Isso faz com que a primeira imagem não apareça na página interna. Tudo o que for colocado dentro destas tags ficará oculto na página interna. Veja o exemplo no último post que aparece nesta página: a primeira imagem e o texto em lilás não aparece na página interna (clique em Leia Mais).

Você também pode simplesmente trocar o separator (a classe da imagem no Blogger) por home:

<div class="home" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-ttsN1VCFBik/Th8quu7ZvFI/AAAAAAAAXvw/oNz3tDgQP7w/s1600/Clap-Clap.gif" imageanchor="1"><img border="0" height="240" src="http://1.bp.blogspot.com/-ttsN1VCFBik/Th8quu7ZvFI/AAAAAAAAXvw/oNz3tDgQP7w/s400/Clap-Clap.gif" width="320" /></a></div>

2) Se não usa resumo de postagem :

Agora, vamos supor que você não use nenhum recurso de resumo de postagem. Apenas deseja mostrar uma imagem estática na página inicial e que, clicando nesta imagem, você seja levado para a página interna, onde ela ganha movimento (como no exemplo do site que o Victor passou). Para isso, faremos o seguinte, criaremos duas condicionais e duas classes:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.home{display:none}
</style>
</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.pagina{display:none}
</style>
</b:if>
</head>

No post, trocaremos, na primeira imagem, o separator (a class para imagem do Blogger) por home e na segunda, por pagina e alteraremos a  url da primeira, direcionando-a para o post. Mas como direcionar uma imagem para um post que ainda não foi nem publicado? 

Por padrão, a url do post tem este formato:

http://testenovasidebar.blogspot.com/2011/07/gif01.html

url do blog + ano e mês da publicação + nome do post (todo em letra minúscula) + html.

Se o titulo do post contiver mais de uma palavra, elas serão separadas por traços:

http://testenovasidebar.blogspot.com/2011/07/uma-imagem-qualquer-de-teste.html

Assim, basta acrescentar no código da primeira imagem a url que o post terá (com o título que você criou):

<div class="home" style="clear: both; text-align: center;">
<a href="http://testenovasidebar.blogspot.com/2011/07/gif01.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="http://1.bp.blogspot.com/-6ZOc5FH2DHQ/Th9eKHSLXyI/AAAAAAAAXxk/560Dt6OmcrY/s200/Clap-Clap.gif" width="200" /></a></div>

<div class="pagina" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-6ZOc5FH2DHQ/Th9eKHSLXyI/AAAAAAAAXxk/560Dt6OmcrY/s1600/Clap-Clap.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-6ZOc5FH2DHQ/Th9eKHSLXyI/AAAAAAAAXxk/560Dt6OmcrY/s1600/Clap-Clap.gif" /></a></div>

No pior dos casos, se você não acertar a url, publique normalmente, verifique como ficou a url e acrescente o link na imagem, editando o post :)


Veja este exemplo em funcionamento aqui (clique na imagem do primeiro post que aparece). Você pode depois editar e apagar o título da postagem, para que fique apenas a imagem (como eu fiz).

********************************************************************************
Este post ficou muito maior do que eu havia planejado mas espero, sinceramente, que não esteja muito confuso e que tenha conseguido responder a pergunta do Victor ;)