Anúncio Flutuante Com Duplo Fechar
Nesta postagem compartilho com vocês mais um pedido de algumas pessoas através do nosso formulário de contato.
Eles pedem um anúncio onde há dois botões fechar de forma que um seja falso e outro verdadeiro.
Consegui elaborar um código bem interessante onde destaquei um botão fechar falso que de cara a pessoa logo será "enganada" digamos assim. É muito comum vermos anúncios como esse em sites de TV online, filmes online, sites de entretenimento entre outros.
Veja uma demonstração do código:
Bom! Para colocar em seu blog é simples.
Bom! Para colocar em seu blog é simples.
Entre em "Modelo" - "Adicionar um Gadget" - "HtML/JavaScript" e cole o código
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>
<script type="text/javascript">
$a = jQuery.noConflict();
$a(document).ready(function(e) {
//funcoes banners
$a('#fecharads1-fx').hover(function(){
$a('#fecharads1-fx').hide();
$a('#fecharads2-fx').css('display','block');
});
$a('#fecharads2-fx').click(function(){
$a('#ads-foda-fx').css('display','none');
});
});</script> <style type="text/css">#ads-foda-fx { position:fixed; width:300px; height:250px; top:22%; z-index:999999999999999; left:0; right:0; margin:0 auto; border:0px solid #ddd; -webkit-box-shadow: 0 0 0px 0px #B0B0B0;
box-shadow: 0 0 0px 0px #000; -webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;}
#ads-foda-fx #fecharads1-fx{ position:absolute; left:90%; top:5%; width:24px; height:24px; background:url('http://www.colegiosapiens.com.br/fechar.jpg') no-repeat; cursor:pointer;}
#ads-foda-fx #fecharads2-fx{ opacity:0.7; position:absolute; right:90%; bottom:87%; width:10px; height:10px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihOMIL2joaKkFHo6MvHBepgC71fR0UII3Llg8-axGZR7hVt-n-XtZW_wH2eQRrGsEnqsNbu-Xi7uGv8REEgOFKwfsUOEyr_xHXPdvxY-5gqCJeu0f_mj_8qxluEx9q1WNFTqI8bcIKtWND/s1600/fechar.png') no-repeat; cursor:pointer; display:block; }
#ads-foda-fx #fecharads2-fx:hover{opacity:1.0;}</style><div id="ads-foda-fx">
<script type="text/javascript">
google_ad_client = "ca-pub-9697072058028699";
google_ad_host = "pub-1556223355139109";
google_ad_slot = "9475443161";
google_ad_width = 300;
google_ad_height = 250;
</script>
<!-- Formiga -->
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div style="text-align: right;">
<a href="http://dicashot.blogspot.com.br/2015/06/anuncio-flutuante-com-duplo-fechar.html" target="_blank"><img height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM3ugrHgKfm25uHcbeT-6pC1JFGowcRdFnLJ5eKVdloU7ltrtlp0X1CdlBYsycCNSG_PI8KxtbRJ57Dn7Lyc08YKVv_U0qTNoVeDnCqilXzGApWJcADZ9jEG5TyLA2wIuFAk4hOzH6wF4/s320/Logo+-+DicasHot.png" width="20" /></a></div>
<div id="fecharads2-fx" title=""></div><div id="fecharads1-fx"></div></div>
<!-- Fim do código -->Tendo colado o código, basta salvar e pronto!!!
A parte destacada de vermelho corresponde ao código do seu anúncio. E, a parte destacada de azul, corresponde ao javascript. Se o seu blog já tiver javascript, apague ele do código se não vai dar conflito entre gadgets.
Gostou do tutorial? Coloque um de nossos banners em seu site ou blog e "estamos kits"!
Widget by DicasHot
