Ocultando elementos das páginas internas
Autor: Ariane | Publicado: 2011-07-14T21:42:00-03:00

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&nbsp; 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:&nbsp;
&nbsp; 
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 =&gt;Editar HTML (o código html do seu template), e coloque o seguinte trecho acima da tag&nbsp; &lt;/head&gt;:

&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;style&gt;
.home{display:none}
&lt;/style&gt;
&lt;/b:if&gt;
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:


&lt;div class='home'&gt;&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="http://1.bp.blogspot.com/-ttsN1VCFBik/Th8quu7ZvFI/AAAAAAAAXvw/oNz3tDgQP7w/s1600/Clap-Clap.gif" imageanchor="1"&gt;&lt;img border="0" height="240" src="http://1.bp.blogspot.com/-ttsN1VCFBik/Th8quu7ZvFI/AAAAAAAAXvw/oNz3tDgQP7w/s400/Clap-Clap.gif" width="320" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt; 
&lt; !--more-- &gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="http://2.bp.blogspot.com/-Xs1EvktHrFY/Th8TtUJ2UgI/AAAAAAAAXvA/xsO2m8TbdMs/s1600/Clap-Clap.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" src="http://2.bp.blogspot.com/-Xs1EvktHrFY/Th8TtUJ2UgI/AAAAAAAAXvA/xsO2m8TbdMs/s1600/Clap-Clap.gif" /&gt;&lt;/a&gt;&lt;/div&gt;
Note que o código da primeira imagem está entre &lt;div class='home'&gt; &lt;/div&gt;.&nbsp; 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:

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

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:

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

&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt;
&lt;style&gt;
.pagina{display:none}
&lt;/style&gt;
&lt;/b:if&gt; 
&lt;/head&gt;
No post, trocaremos, na primeira imagem, o separator (a class para imagem do Blogger) por home e na segunda, por pagina e alteraremos a&nbsp; url da primeira, direcionando-a para o post. Mas como direcionar uma imagem para um post que ainda não foi nem publicado?&nbsp;

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):

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

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