Últimos Artigos
Inversor de Links Transforme seu computador em um ponto de acesso WIFI Deep web a internet que você não vê Como tirar a segunda via do CPF online Como fazer botões em HTML Como recuperar arquivos de um computador que não inicia Os anônimos dominaram o mundo e agora?

WINDOWS

BESTEIROL

HUMOR

SOFTWARES

VARIEDADES

BLOGGER - JANELA MODAL PARA CONTEÚDO HTML



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.

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='http://dl.dropbox.com/u/85270148/jquery.fancybox-1.3.4.pack.js' type='text/javascript'/>
<link href='http://dl.dropbox.com/u/85270148/jquery.fancybox-1.3.4.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://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.

Adicionar Gadjet

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…


Você pode adicionar o conteúdo HTML que desejar.

Iframes

Formulários de contato

Textos

Em fim, tudo que você quiser

CLIQUE AQUI PARA VER COMO FICOU


Compartilhe este artigo: