Abrir (exibir) ou criar PopUp no blog
blog
,
criar
,
janela
,
PopUp
Nenhum comentário
Criar (exibir) PopUp
Veja demonstração aqui!Neste artigo, vamos mostrar como abrir (exibir) ou criar janelas PopUps em seu blog para divulgar ou promover algo.
É muito comum blogueiros quererem aplicar (adicionar) PopUps nos blogs para divulgar Redes Sociais, E-books, publicidade, e outros. Mas, vamos deixar avisado que a taxa de rejeição de páginas com PopUps é muito alta, simplesmente porque as pessoas detestam qualquer tipo de página abrindo na sua frente sem ter sido solicitada. Portanto, recomendamos que aplique, somente, caso tenha certeza absoluta do que você quer divulgar.
O modelo de popup que vamos tratar aqui funciona apenas uma vez, ou seja, caso o usuário exiba outras páginas ou saia de seu blog e volte novamente, o PopUp não aparecerá de novo, pois fica armazenado em cookies que o navegador recebe. Desta forma, se você quiser ver o conteúdo do PopUp novamente, será necessário que limpe os cookies, ou você poderá, também, abrir a página do blog que está com o Popup em outro navegador.
Como criar código PopUp
O código a ser mostrado foi uma montagem feita através de pesquisas na web. Reformulamos e aplicamos como um Gadget ou Widget que pode ser aplicado tanto em Gadgets (aparecerá toda vez que um usuário abrir qualquer página do blog) quanto no código fonte do seu blog. Em ambas as situações, o PopUp aparecerá sempre quando o usuário abrir a página do blog através de uma postagem ou link direto, abrindo a página inicial do blog.Recomendamos aplicar somente publicidades internas, ou seja, algumas imagens, banners, textos, vídeos, Redes Sociais ou qualquer outra coisa relacionada ao blog.
Não recomendamos colocar (exibir) PopUp com qualquer tipo de publicidade externa, pois isso significa colocar códigos do tipo Adsense ou outros programas de afiliados, e causará punição ou banimento da sua conta.
Recomendamos que qualquer que seja o PopUp exibido, você tente faze-lo de forma atraente para puxar o click, e não o fechamento da página pelo leitor.
Tutorial
Primeiro, tenha em mente o que quer divulgar e selecione o respectivo código.Aconselhamos usar ferramentas como o bloco de notas. Coloque uma URL de imagem ou aquele Gadget de Redes Sociais ou um banner animado. Enfim, selecione o código que normalmente você usaria em um Gadget. Em outras palavras, o código HTML que irá aplicar no respectivo PopUp.<
1° passo - css do PopUp
Primeiro, vá até o painel do seu blog, clique em modelo e, em seguida, editar HTML. Ao abrir a caixa com o código fonte do seu blog, dê um CTRL+F e procure pela linha]]></b:skin> Logo acima desta linha, cole o conteúdo da caixa de auto seleção, abaixo:
2° passo - script do PopUp
Estilo do PopUp aplicado, agora vamos ao script, que fará com que o popup não apareça novamente para o mesmo usuário e se mantenha flutuando na tela até que o leitor do artigo clique no link divulgado, ou então, clique em fechar. Ainda no código fonte do seu blog, procure pela tag </head> e, logo acima dela, cole o código da caixa de auto seleção, abaixo:3° passo - inserindo o PopUp
Agora, vamos ao html, ou seja, o que você irá divulgar. Existem duas maneira de aplicar:Primeira: logo abaixo da tag <body> Talvez em seu blog, esta tag não esteja exatamente assim, e é possível que ela esteja desta forma: <body expr:class='"loading" + data:blog.mobileClass'> Caso ainda não encontre, procure por <body e logo abaixo da linha, cole o código apresentado abaixo:
<!-- conteúdo PopUp Início -->
<div id='topbar'>
<p align='right'>
<a href='' onclick='closebar(); return false'>
[Fechar]
</a>
</p>
<p align='center'>
<a href='http://www.bloggerenciado.com/'>
<img alt='blog gerenciado: criando meu PopUP' border='0' src='http://2.bp.blogspot.com/-O04ni5iWJMc/UxIa_401vaI/AAAAAAAAI-M/-amhJ1hTbK8/s1600/anuncio+o+certo.jpg' title='criando meu PopUp com o BG'/>
</a>
</p>
</div>
<!-- conteúdo PopUp Final -->
Também é possível aplicar este último código HTML, como apresentamos acima, dentro de um Gadget, para abrir o PopUp na tela inicial do seu blog. Para isso, é necessário que se aplique no lugar certo para que fique centralizado.
Ao seguir os passos 1 e 2, acima, salve, vá até layout no painel do seu blog. Selecione a área acima das postagens, clique em adicionar Gadgets, em seguida, HTML/JavaScript e cole o código da caixa de auto seleção, acima. Salve e clique em visualizar blog para ver se está tudo ok.
Caso você tenha fechado sem querer ou atualizado a página e não está conseguindo ver de novo, você terá que apagar os cookies do seu navegador ou abrir em um navegador diferente.
4° passo - editar o código html do PopUp
Analise o código:<!-- conteudo PopUp Inicio --> <div id='topbar'> <p align='right'> <a href='' onclick='closebar(); return false'> [Fechar]
</a>
</p>
<p align='center'>
<a href='http://www.bloggerenciado.com/'>
<img alt='blog gerenciado: criando meu PopUP' border='0' src='http://2.bp.blogspot.com/-O04ni5iWJMc/UxIa_401vaI/AAAAAAAAI-M/-amhJ1hTbK8/s1600/anuncio+o+certo.jpg'
title='criando meu PopUp com o BG'/> </a> </p> </div> <!-- conteudo PopUp Final -->
Vamos explicar como editaá-lo para aplicar no Gadget acima das postagens ou abaixo da tag <body> em seu código fonte:
O texto destacado em vermelho não deve ser alterado, pois ele fará com que chame o script e o css (estilo) que você aplicou nos passos 1 e 2, e também é o conjunto onde define o botão de fechamento do PopUp.
O texto em azul refere-se ao redirecionamento do click, ou seja, para onde o leitor será redirecionado ao clicar no PopUp. Troque o endereço do BG pelo seu.
O trecho destacado em verde refere-se a área onde irá criar uma descrição da imagem.
O trecho destacado em rosa refere-se ao endereço da imagem.
O trecho destacado em laranja refere-se ao título, ou seja, a descrição que aparece ao passar o cursor do mouse.
pode ser colocada qualquer estrutura html.
Para uma demonstração de como exibir popup, clique aqui!
Este artigo está disponível para publicação em outros blogs ou sites desde que seja seguida a Política do BG
title='criando meu PopUp com o BG'/> </a> </p> </div> <!-- conteudo PopUp Final -->
Vamos explicar como editaá-lo para aplicar no Gadget acima das postagens ou abaixo da tag <body> em seu código fonte:
O texto destacado em vermelho não deve ser alterado, pois ele fará com que chame o script e o css (estilo) que você aplicou nos passos 1 e 2, e também é o conjunto onde define o botão de fechamento do PopUp.
O texto em azul refere-se ao redirecionamento do click, ou seja, para onde o leitor será redirecionado ao clicar no PopUp. Troque o endereço do BG pelo seu.
O trecho destacado em verde refere-se a área onde irá criar uma descrição da imagem.
O trecho destacado em rosa refere-se ao endereço da imagem.
O trecho destacado em laranja refere-se ao título, ou seja, a descrição que aparece ao passar o cursor do mouse.
Finalizando
Entre as tags
<p align='center'>
e
</p>
pode ser colocada qualquer estrutura html.
Assinar:
Postar comentários
(
Atom
)
Nenhum comentário :
Postar um comentário
O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.