Anuncio flotante que baja con la p??gina – AYUDA BLOG –

  • mayo 11, 2010






 Veremos c??mo poner un anuncio flotante tambi??n con opci??n de cerrar pero este anuncio baja cuando se baja la p??gina, es decir, bajar?? junto con el scroll de la p??gina
Para ponerlo en tu blog entra a Dise??o > Edici??n de HTML y antes de </head> pega lo siguiente:


<style type=’text/css’>
#anuncio {
position: absolute;
border: 0px;
padding: 2px;
width: 300px;
height: 80px;

visibility: hidden;
z-index: 200;
top: 27px;
left: 13px;
}
</style>

<script type=’text/javascript’>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //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(«anuncio»).style.visibility=»hidden»
}

function staticbar(){
barheight=document.getElementById(«anuncio»).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(«anuncio»);
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>


Ahora antes de </body> pega esto:


<div id=’anuncio’>
<a href=’Javascript:void’ onClick=’closebar(); return false’><img align=’right’ border=’0′ src=’http://4.bp.blogspot.com/_dsEG33PDaHw/S66y-66sXXI/AAAAAAAAAOk/0GDe7kdQj4A/s200/icono-cerrar.png’/></a><br />
<a href=’URL del enlace‘><img src=’URL de la imagen‘/></a>
</div>



Cambia donde se indica la URL de la imagen que ser?? el aviso, al igual que la URL del enlace que es a donde llevar?? el v??nculo cuando se haga click sobre el anuncio.
Igualmente cambia donde dice width: 300px; por el ancho de la imagen, y height: 80px; por el alto de la imagen.

Si en vez de una imagen quisieras agregar un texto entonces usa este c??digo en lugar del anterior:


<div id=’anuncio’>
<a href=’Javascript:void’ onClick=’closebar(); return false’><img align=’right’ border=’0′ src=’http://4.bp.blogspot.com/_dsEG33PDaHw/S66y-66sXXI/AAAAAAAAAOk/0GDe7kdQj4A/s200/icono-cerrar.png’/></a><br />
<a href=’URL del enlace‘><div style=’background:#ccc;color:#FFF;border:3px solid #000;padding:5px;text-align:center;font-size:14px;‘>Aqu?? va el mensaje del anuncio</div></a>
</div>



De igual forma cambia la URL del enlace y agrega el mensaje donde se indica. Puedes cambiar el color de fondo, tama??o de letra, etc. modificando lo que est?? en color verde. Puedes agregar m??s estilos, eso ya queda a tu creatividad aunque yo recomiendo que uses el de la imagen, le dar?? m??s profesionalismo al blog.

No Comments Found

Deja un comentario