A algum tempo atrás mostramos um artigo chamado janela modal para vídeos, foi um grande sucesso. Hoje vamos mostrar uma janela modal para conteúdo HTML, para ser inserida no blogger.
O procedimento é quase o mesmo do artigo anterior, e o efeito é muito bonito e bastante profissional, vamos começar.
1 - Faça login no blogger clique em Modelo e em seguida Editar html.
2 - No HTML do template pressione as teclas Ctrl + F e procure pela tag </head> e logo acima cole o seguinte código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>
<script src='https://dl.dropbox.com/u/85270148/jquery.fancybox-1.3.4.pack.js' type='text/javascript'/>
<link href='https://dl.dropbox.com/u/85270148/jquery.fancybox-1.3.4.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='https://dl.dropbox.com/u/85270148/vídeo.js' type='text/javascript'/>
Visualize, e se estiver tudo certo clique em Salvar modelo.
OBS: Caso seu template já possua algum dos plug-ins (Códigos) acima, instale apenas os que não tiver, caso já tenha todos pule esta etapa.
Lembrando que o Plug-in Jquery marcado em vermelho apresenta algumas variações de versão.
Ex: https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js
Caso já tenha alguma versão, não precisa adiciona-lo.
4 - Agora vamos inserir a função que chama a janela, clique em Layout em seguida Adicionar um Gadjet e clique em HTML/Javascript.
Cole o seguinte código:
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
iframe : {
preload: false
}
});
$(".various").fancybox({
maxWidth : 900,
maxHeight : 700,
fitToView : false,
width : '100%',
height : '100%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
</script>
No trecho em AZUL você pode configurar a altura, e largura em porcentagem.
Salve e pronto! Seu blog já está pronto para exibir a modal.
5 - Toda vez que você quiser que um conteúdo em HTML apareça em uma janela modal, basta adicionar o seguinte código no HTML da postagem.
<div style="display:none">
<div id="myDiv">
SEU CONTEUDO HTML AQUI
</div>
</div>
<a href="#myDiv" class="various">Clique aqui</a>
Os trechos em VERMELHO são onde você coloca o código HTML que quiser, e o nome do link de chamada EX: Clique Aqui, Abrir aqui, Ver, etc…
