PÁGINA DE BIENVENIDA
ANUNCIO FLOTANTE QUE BAJA CON LA PÁGINA
""Blog FMG"
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:
<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>
#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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWJl34tgaadOYanH1yRYmb_2KWTXQUpa63IcnhwuSo_0zf1O1BWWXMKbipCLAPcn4msTSPGJ8p8tcoc9cCemO762Wqr9s3uc7ytIHwKgTBYp_M8bmdn2o-sauZHJjjlcTsFM9UEPcdBKc/s200/icono-cerrar.png'/></a><br />
<a href='URL del enlace'><img src='URL de la imagen'/></a>
</div>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWJl34tgaadOYanH1yRYmb_2KWTXQUpa63IcnhwuSo_0zf1O1BWWXMKbipCLAPcn4msTSPGJ8p8tcoc9cCemO762Wqr9s3uc7ytIHwKgTBYp_M8bmdn2o-sauZHJjjlcTsFM9UEPcdBKc/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/AVvXsEhWJl34tgaadOYanH1yRYmb_2KWTXQUpa63IcnhwuSo_0zf1O1BWWXMKbipCLAPcn4msTSPGJ8p8tcoc9cCemO762Wqr9s3uc7ytIHwKgTBYp_M8bmdn2o-sauZHJjjlcTsFM9UEPcdBKc/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>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWJl34tgaadOYanH1yRYmb_2KWTXQUpa63IcnhwuSo_0zf1O1BWWXMKbipCLAPcn4msTSPGJ8p8tcoc9cCemO762Wqr9s3uc7ytIHwKgTBYp_M8bmdn2o-sauZHJjjlcTsFM9UEPcdBKc/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>
Data de la Publicación;12-07-2020
Fuente; ciudadblogger
Publicado por;
julio 12, 2020
No comentarios
AMPLIAR UNA IMAGEN CON UN CLICK DE MOUSE
"BLOGS FMG"
Aquí nuestro querido amigo, seguidor de Blogger Código, me ha pedido un código responsable de agrandar una imagen pequeña con tan solo pasar el ratón por encima de la imagen, entonces no tarde mucho en crear este post, querido amigo y el resto de los queridos espero que os resulte útil este código.
Es muy sencillo el código y la utilización del mismo, tan solo debes personalizarlo a tu gusto.
Cambiar la URL de la imagen (en su tamaño normal).
El primer width y height es el tamaño que queremos que sea la imagen una vez agrandada, al pasar el cursor, width es el ancho y height es el alto.
Los width y height que están en color verde son el ancho y alto de la imagen en tamaño pequeño, como quedaría antes de agrandar la imagen (antes de pasar el cursor por encima).. espero que te sirva amigo. Lo más sencillo que te puedo recomendar es esto amigo.
img src="URL de la imagen" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=100;this.height=80;" width="100" height="80" />
<img src="URL DE LA IMAGEN" onmouseover="this.width=500;this.height=400;" onmouseout="this.width=200;this.height=150;" width="200" height="150" />
aqui les dejo otro diferente para hacer click o doble click
<img onclick="javascript:this.width=500;this.height=400 " ondblclick="javascript:this.width=100;this.height= 80" src="URL de la imagen" width="100"/>
tambien se puede combinar con el de antes
<img src="URL DE LA IMAGEN" onclick="this.width=500;this.height=400;" onmouseout="this.width=200;this.height=150;" width="200" height="150" />
Data de la Publicación; 12-07-2020
Publicado por;
julio 12, 2020
No comentarios
