Carregando atualizações...

X

Anúncio Flutuante no Blogger

Neste post falarei aqui no Dicashot a respeito de algo muito legal - Uma caixa onde você pode colocar um anúncio, e este mesmo anúncio irá flutuar no meio da sua página, ou seja, conforme você vai descendo a página o anúncio vai atrás (seguindo).

Anúncio flutuante facilita muito para você conseguir anunciar aquilo que você deseja, pois, conforme vai descendo a página, automaticamente a box também desce (flutua).


Veja uma demonstração do código no link abaixo:


Este é apenas um dos modelos. Veja estes outros modelos de anúncio flutuante e veja qual "combina" mais com o seu blog!

Então, vamos começar a colocar o anúncio flutuante no bogger...

Clique em adicionar "Adicionar um Gadget" do tipo "HTML/JavaScript" e cole o seguinte código

<box flutuante dicashot> 
<!-- Gadget by DICASHOT --> 
<style type="text/css"> 
#BoxFlutuanteDicasHot{ 
position:absolute; 
border: 0px solid red; 
padding: 1px; 
background-color: #FFFFFF; 
height: 300px; 
width: 300px; 
visibility: hidden; 
z-index: 100; 
} 
</style> 
<script type="text/javascript"> 
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session 
var window_width = screen.width; 
var startX = ((window_width - 1015) / 2) //set x offset of bar in pixels 
var startY = 70 //set y offset of bar in pixels 
var verticalpos="fromtop" //enter "fromtop" or "frombottom" 
function iecompattest(){ 
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body 
} 
function get_cookie(Name) { 
var search = Name + "=" 
var returnvalue = ""; 
if (document.cookie.length > 0) { 
offset = document.cookie.indexOf(search) 
if (offset != -1) { 
offset += search.length 
end = document.cookie.indexOf(";", offset); 
if (end == -1) end = document.cookie.length; 
returnvalue=unescape(document.cookie.substring(offset, end)) 
} 
} 
return returnvalue; 
} 
function closebar(){ 
if (persistclose) 
document.cookie="remainclosed=1"; 
document.getElementById("BoxFlutuanteDicasHot").style.visibility="hidden"; 
} 
function staticbar(){ 
barheight=document.getElementById("BoxFlutuanteDicasHot").offsetHeight 

var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; 
var d = document; 
function ml(id){ 
  var el=d.getElementById(id); 
  if (!persistclose || persistclose && get_cookie("remainclosed")=="") 
  el.style.visibility="visible" 
  if(d.layers)el.style=el; 
  el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}; 
  el.x = startX; 
  if (verticalpos=="fromtop") 
  el.y = startY; 
  else{ 
  el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; 
  el.y -= startY; 
  } 
  return el; 
} 
window.stayTopLeft=function(){ 
  if (verticalpos=="fromtop"){ 

  var pY = ns ? pageYOffset : iecompattest().scrollTop; 

  ftlObj.y += (pY + startY - ftlObj.y)/8; 

  } 

  else{ 
  var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; 
  ftlObj.y += (pY - startY - ftlObj.y)/8; 

  } 

  ftlObj.sP(ftlObj.x, ftlObj.y); 
  setTimeout("stayTopLeft()", 10); 
} 


ftlObj = ml("BoxFlutuanteDicasHot"); 
stayTopLeft(); 
} 

if (window.addEventListener) 
window.addEventListener("load", staticbar, false) 
else if (window.attachEvent) 
window.attachEvent("onload", staticbar) 
else if (document.getElementById) 
window.onload=staticbar 
</script> 
<div id="BoxFlutuanteDicasHot" style="width: 250; height: 250" align="RIGHT"> <span onclick="javascript:window.closebar()"><font face="Verdana" 
size="1"><b><font color="#FF0000">FECHAR</font></b></font></span> 


<div style="text-align: center;">
<object data="http://www.cursos24h.net.br/banners/flash4/250x250.swf?clickTAG=http://www.cursos24horas.com.br/parceiro.asp?cod=promocao63478" height="250" type="application/x-shockwave-flash" width="250"> <param name="movie" value="http://www.cursos24h.net.br/banners/flash4/250x250.swf?clickTAG=http://www.cursos24horas.com.br/parceiro.asp?cod=promocao63478" /><param name="quality" value="high" /><param name="bgcolor" value="#CCCCCC" /><h3>
Cursos 24 Horas</h3>
<a href="http://www.cursos24horas.com.br/parceiro.asp?cod=promocao63478" rel="nofollow" target="_blank">Cursos 24 Horas - Cursos Online</a> </object>
</div>

<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: xx-small;">Widget by <a href="http://dicashot.blogspot.com.br/2012/08/anuncio-flutuante-no-blogger.html" target="_blank">DicasHot</a></span></div></div></box flutuante dicashot>
<br />

Coloque o código do seu anúncio no campo destacado em azul no código; O número destacado de vermelho corresponde a altura. Se o banner aparecer muito para baixo, aumente o número para que o banner fique melhor em seu template.

Feito tudo, salve e pronto!!!

Por favor, não tire os créditos do final do gadget.

TAGS: anuncio flutuante, banner flutuante, como fazer banner, como fazer um banner, publicidade, publicidade e propaganda


NOSSO CANAL
VER TV A CABO ONLINE GRÁTIS
TV ONLINE 1.0