Spoiler com animação para Blogger

Spoiler com animação para Blogger
Olá amigos Mult-focos, Temos aqui um pequeno truque para vocês, é um spoiler com animação para Blogger. Com ele você pode esconder partes do seu conteúdo e deixar acessível um botão para seu visitante acessa-lo, diminuindo assim o espaço deste conteúdo em sua página.
Veja um demo clicando no botão abaixo ou em Result no Box de códigos.

DEMO

Personalize

1 - Você pode substituir "Mostrar" e "Esconder" por seu próprio texto. Basta substituir a palavra em ambas HTML (linha 1) e CSS (linha 6 e / ou 7).

2 - Para vários spoilers, tudo que você precisa fazer é duplicar a parte HTML. Adicionar muitos como você deseja, eles vão trabalhar de forma independente um do outro.

3 - Você pode alterar a velocidade da animação, alterando a duração (em segundos 0.2s) na linha CSS 5.

Como adicionar em seu Blogger

I - Vá ao painel do Blogger->Modelo->Editar HTML->use Ctrl+F e localize esta tag Pouco antes dela cole o código CSS do Box de códigos.

2 - O código HTML do Box de códigos vai para o lugar que você quer que apareça o spoiler, e é adicionado como se adiciona um gadget, se não sabe adicionar um gadget aprenda AQUI.

Bem amigos isto é tudo.

<input class="spoilerbutton" type="button" value="Mostrar" 

onclick="this.value=this.value=='Mostrar'?'Esconder':'Mostrar';">
<div class="spoiler"><div>Gif de uma imagem 3d.
<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHoeH2dU9i6iu1JheJe8nYXTXN5-wrb16giq88gNs6mETBC4jZyBaObJbFLb4vUOqNgSuLR6j6_xBTMecaQ61IInH1zTsNiuk1ru91NiARzCRh99HUJqCfXlubRio6Nbs3rjZ1zapBDN_S/s250-no/Gif+efeito+3D.gif"></p>
  Mult-focos "Sua revista digital"
</div></div>
See the Pen Spoiler com animação para Blogger by Mairink (@Oemes) on CodePen.

Postado por Mairink Oemes

0 comentários:

Postar um comentário

Todos comentários são lidos e moderados previamente.
São publicados apenas aqueles que respeitarem as regras abaixo:
-Ter relação com o assunto do post.
-Não conter propagandas de outro site ou blog.
-Não incluir links no conteúdo do comentário.
-Se quiser deixar sua URL, comente usando a opção OpenID;
Obrigado(a) por comentar!

free website hit counter