Popup Box
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:
2. Faça um becape do seu template. Vá em Layout > Editar HTML e clique em Expandir Modelos de Widgets.
+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:
Salve.
4. Ainda na guia Layout, clique em Elementos da Página e adicione um gadget de HTML/JavaScript.
5.O campo título deve ficar em branco, e no campo conteúdo cole o código abaixo:
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.
+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.
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 -->
<!-- FIM DO SEU CÓDIGO -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
6. Vamos personalizar a caixa (*altere apenas os trechos coloridos):<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>
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.
Opa blz?
ResponderExcluirbanner adc no meu blog também!
sucesso para nossa parceria!
BjO*
aí acompanhei seu blog agora acompaha o meu aí ja é vlww se quiser podemos trocar postagengs ou qualquer outra coisa so me avisar vlw abraços
ResponderExcluir@Pâm, @Pyter valeu, sem vocês (leitores) o blog não seria nada!
ResponderExcluirUm !!!!
ResponderExcluirdescobri :D
de fato a forma que vcs fazem é criativa, as tags blogger deveriam ser melhor estudadas
Parabens
:)