ANUNCIO FLOTANTE QUE BAJA CON LA PÁGINA

ANUNCIO FLOTANTE QUE BAJA CON LA PÁGINA

"BLOGS KIRADOBER"

Ya hemos visto cómo poner un mensaje tipo Post-it, mostrando un cuadro de texto en el blog con la opción de cerrar.

Ahora 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.

Puedes ver un ejemplo en este blog de pruebas, verás un anuncio arriba, baja la página y notarás el efecto.

Para ponerlo en tu blog entra a Plantilla | Edición de HTML y antes de </head> pega lo siguiente:

Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:

 Un clic en “Plantilla”

 Un clic en “Editar HTML”

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, 

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, 

a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

 Coloca este código en el buscador y dale un "Enter"

</head>

Inserta las siguientes líneas de código justo arriba (ó antes) del código que encontraste

<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:

Un clic en “Plantilla”

 Un clic en “Editar HTML”

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

 Busca este código


</body>

Ingresa el siguiente código justo arriba del código que encontraste.

<div id='anuncio'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgttcTxbJ4qvi92wEkFKF0O-3ma176C_-hShUjqixFHwCLJwngFh39dzUp8QWtvnj4wOmvUMbPuONXgkEqMgPnv_Y-LzAr6xzWagJlTfObl9OnUTQCPfYzBF-ZXW65RX2el6dnCJeXimU/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgttcTxbJ4qvi92wEkFKF0O-3ma176C_-hShUjqixFHwCLJwngFh39dzUp8QWtvnj4wOmvUMbPuONXgkEqMgPnv_Y-LzAr6xzWagJlTfObl9OnUTQCPfYzBF-ZXW65RX2el6dnCJeXimU/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.

Data de la Publicación; 15-10-2019

 Fuente: ciudadblogger

 Publicado por;