Pular para o conteúdo principal

Popup Box

Guia Blogger - Dicas, Tutoriais e Templates

Popup Box são caixas que aparecem flutuando na tela. Elas podem conter publicidade ou qualquer outro elemento de informação.
O Dynamic Drive possui um script que permite que essa funcionalidade seja adicionada a sua página de um jeito muito fácil.
1. Baixe e hospede o script:
Download

2. Faça um becape do seu template. Vá em Layout > Editar HTML e clique em Expandir Modelos de Widgets.
Guia Blogger - Dicas, Tutoriais e Templates
+Se você usa o IE, na janela que abrir, clique em Salvar.
+Se você usa FF, na janela que abrir, seleciona a opção salvar e depois clique em OK.
3. Ainda em Layout > Editar HTML, procure pela tag </head> (use CTRL+F) e cole o código abaixo antes dela:
<script src="http://SERVIDOR/popupbox.js">
Substitua a parte em vermelho pelo endereço do arquivo que você baixou e depois hospedou (Passo 1).
Salve.
4. Ainda na guia Layout, clique em Elementos da Página e adicione um gadget de HTML/JavaScript.
Guia Blogger - Dicas, Tutoriais e Templates

5.O campo título deve ficar em branco, e no campo conteúdo cole o código abaixo:
<div id="showimage" style="position:absolute;width:250px;left:250px;top:250px">

<table border="0" width="250" bgcolor="COR DA CAIXA" cellspacing="0" cellpadding="2">
<tr>
<td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"
height="36px">
<tr>
<td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onMousedown="initializedrag(event)"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0"><font face="Verdana"
color="#FFFFFF"><strong><small>TITULO</small></strong></font></layer></ilayer></td>
<td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img src="close.gif" width="16px"
height="14px" border=0></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">

<!-- INÍCIO DO SEU CÓDIGO -->

Seu código aqui

<!-- FIM DO SEU CÓDIGO -->

</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
6. Vamos personalizar a caixa (*altere apenas os trechos coloridos):
A primeira parte está em lilás, ela define o tamanho da caixa (no caso 250px). O valor pode ser alterado de acordo com a sua necessidade.
A segunda parte está em vermelho, mostra um código que define qual será a cor da caixa. Para colocar uma cor, veja a tabela de cores, clique AQUI para ver. É só substituir a parte em vermelho pelo código que fica em cima da cor.
A terceira parte, em verde, indica qual será o titulo da caixa. Dê á ela o nome que quiser.
A quarta e última parte, que está em azul, você deve substituir pelo código do que você quer exibir na caixa.
7. Customizado o código, clique em salvar e... Pronto!!!
Agora, toda vez que a sua sua blog for aberto, a PopupBox se abrirá junto com o conteúdo especificado na parte 6.

Nenhum erro foi encontrado no script, qualquer dúvida é só deixar um comentário.

*Para quem não entende muito de html, eu recomendo que não mecha em todo o código,
apenas nos trechos coloridos.
P.S.:A PopupBox pode ser arrastada para qualquer lugar da tela.

Postagens mais visitadas deste blog

Mudar Imagem ao Passar o Mouse

A interatividade é o que muitas vezes (quando combinada com bom conteúdo) faz com que os leitores gostem e voltem a visitar o seu site. Nesse tutorial você aprende um código em JavaScript que altera a imagem quando o cursor do mouse passa sobre ela.

E-Referer - De onde vem seus visitantes?

O site E-Referer oferece uma ferramenta gratuita que mostra a origem dos visitantes do seu blog e a quantidade de visitas que lhe enviou.