quarta-feira, 23 de novembro de 2016

Mostrar imagem na home page e esconder dentro da postagem

___


Estou fazendo esta postagem porque eu procurei em blogs brasileiros esse código e não achei. E acredito que outros também estão procurando e não estão achando. Eu consegui encontrar esse código em um blog americano que deixarei o link no final do post.

Vamos ao código:

1 - Vá em Modelo>Editar Html como na imagem abaixo:


2 - No html, aperte CTRL + F e procure pela tag ]]></b:skin>:

3 - Abaixo da tag encontrada adicione o código CSS abaixo:

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

4 - Salve o modelo e vamos para o próximo passo.

AGORA PRESTE MUITA ATENÇÃO

Você não pode esquecer desse passo para fazer a imagem desaparecer dentro da postagem.

1 - Ao inserir a imagem na postagem, clique em HTML como mostrado na imagem abaixo:

2 - Ache o código da imagem e substitua a palavra separator destacada no exemplo abaixo pela palavra hidepic:

o código estará assim:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-shsd_c51zRA/T6UeoPgcbII/AAAAAAAACCc/sYI6WB22CaM/s1600/fire_bird_by_fhrankee-d32af8v.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://2.bp.blogspot.com/-shsd_c51zRA/T6UeoPgcbII/AAAAAAAACCc/sYI6WB22CaM/s320/fire_bird_by_fhrankee-d32af8v.png" width="320" /></a></div>

deverá ficar assim:

<div class="hidepic" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-shsd_c51zRA/T6UeoPgcbII/AAAAAAAACCc/sYI6WB22CaM/s1600/fire_bird_by_fhrankee-d32af8v.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://2.bp.blogspot.com/-shsd_c51zRA/T6UeoPgcbII/AAAAAAAACCc/sYI6WB22CaM/s320/fire_bird_by_fhrankee-d32af8v.png" width="320" /></a></div>

Pronto. A imagem ficará oculta dentro da postagem.

Fonte: Helplogger