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:
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5rm-QI1d5oAYDupaZoKAPiwkxdScePYtr5h7d6-DwFAP8UtJiifBNY6apK6tOHWvb_okSewThup6gH_jvQurBlwBRiL9vPRL2771GwAX1Uif_pMrn6wlgvZ-J1MGyMrg4M_9ssgEGxUY/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/AVvXsEi5rm-QI1d5oAYDupaZoKAPiwkxdScePYtr5h7d6-DwFAP8UtJiifBNY6apK6tOHWvb_okSewThup6gH_jvQurBlwBRiL9vPRL2771GwAX1Uif_pMrn6wlgvZ-J1MGyMrg4M_9ssgEGxUY/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.
Muy buen truco mi hermanoo ^^)
ResponderEliminarGracias por compartir xD!!
ayaa el cristian buscando !
Eliminar¿Así o más lindo? Tú y esta entrada claro!!! Cuando dijiste en "estos días" no imaginé ke sería taaaaaaaaaaan rápido!!! Por eso eres la neta, uuuuuuffffff...
ResponderEliminarSin palabras... G E N I A L sencillamente!!!
Mil besos..
No me funciono pero esta bueno ;)
ResponderEliminarwww.porvelez.com.ar mi pagina
CяιsтιαиGσиzαlєz, qué bueno que te ha gustado :)
ResponderEliminarMerlina, es que si no lo hago pronto se me olvida y así pasan los meses :P Besos!
Coloush +16, podría ser algún otro script en la página que no deja funcionar este, aunque yo lo probé en plantillas con varios scripts y no tuve problemas.
Lo anduve buscando hora que fue lo del día del Amor y la Amistad para poner un mensaje, pero en fin, es bueno saber que ya lo pusiste nos vemos y
ResponderEliminarpues
Felicidades por tus Post me fascinan y no te uniras al EXPERIMENTO SEo de Cyberbloggero,
Hola Potro:
ResponderEliminarGenial saberlo. En alguna oportunidad será utilizado en mi sitio.
Gracias master.
Saludos.
Jpz.-
Alex, pues ya tengo puesto el enlace de los videos sólo que olvidé mandarle el correo para avisarle, jaja.
ResponderEliminarJpz, creo que en algún momento todos lo usaremos, ya sea este o el tipo Post-it. Un abrazo!
excelente, muy buen aporte, pero una duda: cómo hacer para que la ventana aparezca sólo en el home? pues al hacer clic sobre ella o en cualquier otro vínculo sigue apareciendo.
ResponderEliminarSaludos.
Excelente, muy bien amigo. me gusto mucho que des ideas para aquello que no tienen idea de que hacerle a tal cosa...Talvez hasta yo pueda ayudarme ...muy bien .
ResponderEliminarSaludos!
~€~
mmmmm... interesante y útil... en especial para cuando me tomo una vacaciones... XD
ResponderEliminarUn abrazo!!!
Hola : : SEGMENTO,
ResponderEliminarEn el código que va antes de </body> pega al inicio del código esta línea:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Y al final del código pega esto:
</b:if>
Saludos.
-Euroazlet-, pues espero que a quien le sirva le dé buen uso y no lo utilicen para anuncios tipo SPAM.
ResponderEliminarbro, tú debes tenerlo ya de forma permanente, cualquiera pensaría que siempre estás de vacaciones, jajaja.
Jajajajajajajajajajajajajaja... como me hiciste reír!!!! XD
ResponderEliminares verdad... lo voy a considerar como una opción XD
Un abrazo!!!!
Muchas gracias men lo tendre en mente para aplicarlo a una pag.
ResponderEliminarSaludos
muchas gracias,te leo de hace un tiempo y aprendo mucho
ResponderEliminarun saludo
Maestro, muchísimas gracias, me resultó.
ResponderEliminarAhora te molesto con otra cosa. No he podido configurar la posición del cuadro. Modifico los valores (para dejarla en la parte inferior izquierda de la página, por ejemplo) pero no "obedece".
Saludos.
Francisco, gracias por leer este blog :)
ResponderEliminar:: SEGMENTO, debe quedar así: bottom:0px; left:0px;
Hola Portro, es la primera vez que escribo en tu blog, por cierto muy interesante y bien explicado. Una pregunta en el blog de pruebas al que nos remites para ver el anuncio flotante veo una galeria de fotos con flores, podrias decirme la entrada o la forma de conseguirla. Muchas gracias y enhorabuena por tu trabajo.
ResponderEliminarBueno amigo, gracias por compartir sus conocimientos ...
ResponderEliminarAquí funcionó muy bien, pero no puedo bajar el listado cuando cambio la parte superior: 300px no cambia.
Gracias,
Hecho...
ResponderEliminarCualquier persona que tenga problemas para cambiar el tiempo de cotización, el cambio en:
startX var = 30 / / set x de la barra de desplazamiento en píxeles <= LEFT
startY var = 5 / / set y de la barra de desplazamiento en píxeles <= ALTURA
El Potro, su blog es una escuela ... Gracias!
Priamo, gracias por tus comentarios. Puedes ver en este artículo cómo poner esa galería de imágenes.
ResponderEliminarSeu Noca, qué bueno que lo has resuelto, mil gracias por compartir la solución :)
Excelente aporte amigo para los que estamos empezando es un lujo toda esta información gracias
ResponderEliminarMi Blog http://brujo5-iphone.blogspot.com/
Me anduvo muy bien!!!
ResponderEliminarQué bueno que les ha servido :D
ResponderEliminarPotro.. sos un maestro!! aprendi un par de cosas interesantes con tus ideas y como eres claro en la explicacion. a mi blog le falta un par de cositas, pero agregue ideas tuyas.. gracias amigo!
ResponderEliminarPotro.. sos un maestro!! aprendi un par de cosas interesantes con tus ideas y como eres claro en la explicacion. a mi blog le falta un par de cositas, pero agregue ideas tuyas.. gracias amigo!
ResponderEliminarMuchas gracias a ti por tu visita y tus comentarios. Seguro que poco a poco tu blog irá quedando como quieres.
ResponderEliminarSaludos.
1000 gracias, solo una cosita, como podria ponerlo centrado, es decir, arriba como está pero en lugar de a la izquierda de la pantalla que salga en el centro??? he probado borrando lo del left:13px; pero nada
ResponderEliminarBusca donde dice:
ResponderEliminarvar startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
Esos números harán que cambie de posición.
Ok gracias, lo intentaré
ResponderEliminarfabuloso!! Te pasaste!! Muchas gracias!!! :)
ResponderEliminarQué bueno que te gustó Panchito, ya lo he visto en tu blog :)
ResponderEliminarhola eh leido muchos tutoriales tuyos pero en este me dio un problema esto me sale cuando pongo guardar
ResponderEliminarPor favor, corrige el siguiente error y envía la plantilla de nuevo.
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "div" must be terminated by the matching end-tag "
si me puedes decir cual es el error (mio) o cualquier otro
saludos y gracias
Según el mensaje estás olvidando poner la última parte del código; copialo de nuevo e intenta otra vez.
ResponderEliminarSaludos.
Como hago para que este anuncio quede encima de una animacion flash
ResponderEliminarLee el comentario #30 para saber cómo cambiarlo de posición.
ResponderEliminarHola potro.
ResponderEliminargenial lo del anuncio flotante, pero al grano jeje
tienes algun tipo de anuncio que califique las entradas
ej:un sistema de 5 estrellas.
Graxias
Xau
Hola xulinho, aquí hay algunas opciones.
ResponderEliminarAmigo muy buen trabajo...
ResponderEliminarmi blog te agradece tus consejos y tus tutoriales.
sobre este codigo. crees que podría funcionar con un vídeo o gif.
te dejo mi blog para que me tu opinión
http://losandesapostolicos.blogspot.com/
Por supuesto, si se trata de un .GIF es del mismo modo que como se menciona para aplicarlo con una imagen. En caso de que sea un video sólo pon el código del video en lugar del código de la imagen.
ResponderEliminarsaludos potro
ResponderEliminarcomo puedo ponerlo al lado derecho de mi blog? ya q hice todo pero me aparece al lado izquierdo
donde debo cabiar o que le debo agregar y en que parte?
saludos
PD: sabes como crear un icono de msn y al aldo escrito el mail??? para hacer lo mismo
Prueba haciendo cambios en esta parte:
ResponderEliminarvar startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
Ahí es donde se controla la posición del gadget.
Lo del correo está aquí.
Saludos.
grande maestrooooooo
ResponderEliminarsaludos para ti tb potro;)
Gracias por todo lo que nos ayudas a los que estamos comenzando en esto de los blogg,,,pero mi consulta es la siguiente...trato de pones un swf...y no me sale..gracias
ResponderEliminarmi blogg para que lo veas es http://bodyboardingsurf.blogspot.com
ResponderEliminarEntré al blog pero no sé exactamente dónde has querido ponerlo aunque ya veo un banner ahí en flash, supongo que ya lo has arreglado.
ResponderEliminarSaludos.
La neta RIFAAAS!!!
ResponderEliminarTe lo agradezco :)
ResponderEliminarHola me surge una duda, esto lo he aplicado en mi blog pero no queda muy bien ya que me tapa uan pequeña parte de la cabecera.
ResponderEliminarMi pregunta seria si es posible que la ventana no se subiese encima del header, que se quede justo debajo y ya despues se mueva la ventana normalmente(quizas este pidiendo mucho xD).
Para que veas lo que te quiero decir aquí te dejo mi enlace y como se ve con esa ventana en mi blog:
http://www.ganadineronavegando.tk/
Puedes modificar la posición de la altura en esta parte:
ResponderEliminarvar startY = 5 //set y offset of bar in pixels
Cambia ese 5 por otro número, por ejemplo 100 y prueba si ya queda a la distancia que quieres, sino prueba con otro número hasta que quede como deseas.
Pero eso sí, esa distancia estará siempre, aun cuando bajes la página conservará esa distancia, no se subirá de nuevo.
Muchas Gracias!!!! funciono muy bien se me queda mucho mejor
ResponderEliminarSaludos
Muy bueno este metodo :) 100 puntos man ^^
ResponderEliminarGracias por la puntuación tan buena :)
ResponderEliminarExelente, quizas demasiado para mi que hace apenas 4 o 5 dias que empeze con esto del blog. De todas maneras el saber no ocupa lugar ( pero como lleva tiempo xD!).
ResponderEliminarGracias.
Jaja, pues algunos sí llevan algo de tiempo pero los resultados pueden ser muy buenos. A mí en lo personal este me gusta bastante.
ResponderEliminarSaludos y suerte con tu nuevo blog!
El script no tiene ningún código que condicione que sólo se vea en la portada. De hecho entré a una entrada de tu blog y se ha visto el anuncio. Eso sí, tarda en aparecer debido a que es muy lenta la carga de tu blog.
ResponderEliminarDebe de funcionar aun con ese script, o al menos yo lo he probado teniendo ambos scripts y no ha dejado de funcionar. Lo que quizá podría haber sucedido es que quizá sin querer eliminaste alguna parte del código.
ResponderEliminarMe vino barbaro. Como estoy mejorando el sitio online, es un estupendo cartel para mantener al tanto de las mejoras e inconvenientes que puedan ocurrir.
ResponderEliminarMuchas gracias.
Es perfecto para esos casos Adrián, de esa forma sabrán que los inconvenientes que lleguen a encontrar serán temporales.
ResponderEliminarSaludos!
Hola por favor si alguien me puede ayudar es urgente.
ResponderEliminarBueno este es el caso tengo mi blog pues hasta ahora lo estoy creando ya tengo las subpestañas pero no he logrado colocar la información en las subpestañas alguien me puede ayudar muchas gracias.
No he entendido exactamente a qué te refieres con "colocar la información en las subpestañas".
ResponderEliminarHola, mi consulta es como hago que el enlace que contiene el anuncio flotante habra en otra ventana
ResponderEliminarSólo agrega a esta parte del código lo que está en negrita:
ResponderEliminar<a href='URL del enlace' target='_blank'>
MIIiiiiiLLll GRACIAS !!!!
ResponderEliminarOye de mera casualudad tendrás una herramienta como para poner un video de Youtube o reproductor de voki... asi flotante con la opcion de cerrar? espero que si Muchas Gracias de antemano y FELICIDADES tu espacio nos ayuda mucho con los codigos y todo lo que pones de nuevo gracias y exitos compa...
ResponderEliminarPues podrías usar este mismo código y en donde va el contenido del mensaje puedes poner el código del video.
ResponderEliminarSaludos y gracias por tu comentario.
Gracias funciona de maravilla
ResponderEliminareste es mi blog:http://www.webtioramon.com/
hola potro mira mi idea es poner publicidad en ese anuncio, la verdad no tengo ydea como lo hago es decir colocar un anuncio de smwtion en ese cuadro flotante, y tambien hacer que cada ves que se haga clic en algun link de descarga salte una publicidad o lo lleve a una sub web donde vera mas publicidad y lugo se readiccione a la descarga, nose si me entendes, esa es mi idea, lo busque en tu blog pero no lo encontre. agradeceria tu ayuda
ResponderEliminarDesconozco cómo funcione ese sistema de publicidad, pero si es similar a Adsense entonces no será posible meter la publicidad ahí y que abra en otra pestaña.
ResponderEliminarHola potro,feliz año, bueno quisiera saber como puedo hacer para que una entrada de mi blog, tenga la opcion de abrir un cuadrito con publicidad, es decir cuando entre al blog no aparesca nada, pero cuando entre al post me muestre el cuadrito con la publicidad, aqui te mando la web que encontre con este sistema: http://azboxbrasil.com/
ResponderEliminarAbajito donde dice receptores y antenas hay un link, que dice atualizacoes al hacer click ahi me aparece toda la pantalla negra pero con un cuadro y un anuncio, y el link que me lleva a la actualizaciones de Azbox.
Gracias de antemano por su ayuda
Hola FullJ@ckiePt,
ResponderEliminarPues ahí han usado una ventana modal para mostrar de esa forma la publicidad.
Aunque lo que tú quieres es un poco más complicado pues tú quieres que al entrar a un post aparezca automáticamente ese anuncio y eso lo veo muy muy complicado :\
Ok gracias por la informacion, una ventana modal se puede aplicar al blog? tambien es dificil o requiere mucha programacion.
ResponderEliminarVentanas modales sí, hay mucha variedad de ellas, aunque quizá la que tiene mayor aceptación es Shadowbox.
ResponderEliminarSaludos, yo tambien uso SmowtionMedia y no tengo ni idea como edito el codigo que brindas para que funcione con mi publicidad, la unica url que proporciona Smowtion en todo el condigo que nos hace pegar en nuestros sitios es: http://ads.smowtion.com/ad.js
ResponderEliminarComo mencioné antes nunca he usado otros sistemas publicitarios excepto Adsense por lo que erraría si te doy indicaciones de algo que no conozco :/
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarhola, me explicarias como hacer lo mismo pero con un cuadro en el que se cargan datos? es decir yo traigo datos mediante ajax a un cuadro pero necesito que cuando el usuario haga un scroll down el cuadro este visible. mi mail es ppkapo@gmail.com saludos y gracias
ResponderEliminarPuedes hacerlo mediante un iframe, es decir, creas una página que contenga los datos que quieres y dentro de este código metes el código del iframe para que muestre la página que contiene los datos que deseas.
ResponderEliminarHola, excelente tu pagina me ha ayudado muchisimo enserio te lo agradeco pero una duda crees que se pueda poner una imagen de anuncio google flotante?
ResponderEliminarNunca lo he intentado, sería cuestión de que probaras agregando el código de Adsense convertido en texto plano. Suerte!
ResponderEliminarbroder, muchas grazias, si me funcionó, pero me podrias ayudar como cambiar el color y fondo del anuncio, osea identificar en lo que esta de color verde, grazias!
ResponderEliminarMuy bueno el post ah!
saludos
En donde dice background:#ccc; es el color de fondo. El código #ccc es el código del color.
ResponderEliminarSaludos!
Oye Potro muchas grazias en serioo ah! mis respetos :D
ResponderEliminarcuidate brow
tevenorte.blogspot.com
xD
Jajaja, entonces no es mi delirio de persecución :P
ResponderEliminarCon LightWindow he sabido que se puede mostrar una ventana modal al cargar el blog, pero que ya no se abra después de determinado tiempo no sé, quizá aplicando algunas cookies, pero eso de las cookies por más que las experimento no logro entenderlas :/
Me quedo Bien, ustedes que dicen??
ResponderEliminarhttp://palabra-devida.blogspot.com/
Terminarás alucinándome jajaja, sorry =(. ¿Habrá manera de ke sólo aparezca una vez al entar al blog a cualkier post y al cerrar no aparezca más?
ResponderEliminarThanks =)
En esta parte del código:
ResponderEliminarvar persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
Cambia ese primer 0 (cero) por 1 para que no aparezca de nuevo mientras se navega por el blog. Pero cuando el usuario regrese de nuevo lo verá otra vez.
Kizá por el diseño bizarro de la plantilla estas cosas no funcionen al 100% =S le puse 1 como dijiste y deja de aparecer del todo. De todos modos muchísimas gracias por tu ayuda con esto y con lo de la fecha en comentarios, ese kedó perfecto!
ResponderEliminarPerdón por tantas molestias xD y gracias again =)
Como es si kiero que en anucio tenga propaganda de adsense k url pongo????
ResponderEliminarEn esos casos me supongo que tienes que crear un documento HTML y ahí agregar el código de AdSense, luego en el anuncio agregas un iframe que muestre el documento HTML que creaste y que contiene el anuncio.
ResponderEliminarYo intente agregar publicidad Adsence pero no se deja. solo me dejo agregar la publicidad de Infolinks y quedo muy bien, este infolink es publicidad in text y queda super!!! ;)
ResponderEliminarHola potro, por casualidad sabes como podré lograr poner este aviso flotante no arriba sino en la parte de abajo del blog???
ResponderEliminarGracias amigo!... ;)
En donde dice:
ResponderEliminarvar verticalpos="fromtop" //enter "fromtop" or "frombottom"
Cambia lo que está en negrita por frombottom
Holas de nuevo... aunque no comento visito varias veces la pagina XD
ResponderEliminarMi problema es que queria que se habriera en otra ventana/pestaña como el comentario 68 pero la solucion del siguiente comentario tuyo me dice error...
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Element type "a" must be followed by either attribute specifications, ">" or "/>".
y como dije antes no me gusta tocar muchas cosas del codigo asi que no creo que haya borrado algo por accidente...
Hola javier. anubis,
ResponderEliminarRevisa de nuevo el código que has puesto, a veces no se borra algo sino que se deja un espacio de más o de menos, o bien, sin querer se agrega otro caracter.
Debe estar exactamente igual como se explica en el comentario que remites, prueba de nuevo, si te aparece de nuevo el mismo error dime cómo es el código que estás poniendo con la URL incluida.
Saludos.
Ya lo resolvi jeje...
ResponderEliminarEra solo que yo agregaba lo que estaba en negrita despues del codigo directamente, bueno la cosa es que probe como dices con todo el codigo de nuevo y ahora me funciona bien XD
Gracias por tu tiempo y tu ayuda...
Vale, qué bueno que ya lo has resuelto ;)
ResponderEliminarGracias Potrooo!!! si me funcionó!!
ResponderEliminaruna consulta, este truco o algun otro hace maás pesada al blog?
Gracias!!
Pues cualquier gadget que agregues será otro elemento más que el navegador tenga que cargar, obviamente si tienes muchos gadgets sí te afectará la velocidad no solo este sino cualquier otro gadget que agregues, pero si tu velocidad es buena no creo que haya mucho problema.
ResponderEliminarPotrito, me estoy volviendo un adicto de tu blog y, perdon por preguntar tantas cosas. Soy un principiante!!
ResponderEliminarAcá viene la pregunta:
No puedo en el "Anuncio flotante" colocar un boton "me gusta" pero no para mi blog en general, sino para que ese boton funcione para el post que esta viendo el visitante en ese momento?
Tú pregunta todo lo que quieras que mientras me quede tiempo y vida haré lo posible en ayudarlos ;)
ResponderEliminarNunca he intentado hacerlo pero en teoría sólo sería cuestión de poner el código del botón Me gusta de Facebook y que sea el código que es para que se muestre sólo en las entradas.
El código puedes ponerlo en el área donde iría el texto del mensaje o puedes acomodarlo cerca de esa área.
No me anda con el boton "me gusta"!!
ResponderEliminarEn que me estoy equivocando?
Pongo el codigo del boton en donde dice "Aqui va el mensaje del anuncio" y no aparece nada. :(
Entonces quizá no sea posible ponerlo de esa forma :/
ResponderEliminarHola Potro, quizás ya te hicieron una pregunta similar, pero son tantas que existe la posibilidad de habérmela salteado. Querría saber cómo hago para colocar el aviso flotante del lado derecho de mi blog. Agradecería una respuesta lo más rápido posible. Saludos!
ResponderEliminarHola Apoyo Kirchnerista,
ResponderEliminarEn esta línea se controla la posición del gadget:
var startX = 30 //set x offset of bar in pixels
Cambia ese 30 por un valor más alto para que se aleje del lado izquierdo y se posicione en el lugar que deseas.
Saludos.
Hola potro como estas, gracias eres la inspiracion para que sigamos hacia adelante con tus grandes ideas. me gustaria que me digas 2 cosas
ResponderEliminar1- como poner un aviso de edad para entra, no al blog sino a una entrada especifica, es decir si para ver esa entrada tenga que pedir que aceptes que eres mayor de edad. y
2- que publiques como y donde se puede colocar publidad en diferentes partes del blog
gracias por todo y sigue asi.
Hola Santiago,
ResponderEliminarGracias por tu amable comentario.
Si el blog contiene contenido para adultos lo mejor es que desde la configuración de Blogger marques tu blog como contenido para adultos, de lo contrario aun cuando pongas avisos manualmente pueden cancelarte tu blog sino tienes la advertencia de Blogger.
En cuanto a la publicidad quizá esta entrada pueda interesarte:
http://ciudadblogger.com/2010/01/10-lugares-para-poner-adsense-en.html
¡Saludos!
Hice este post y me quedo perfecto, pero tengo una inquietud, la X de cerrar ventana se ve muy separada de la imagen y sabiendo que hay muchos usuarios que desconecen la tecnologia, podria serles molesto el no poder cerrarlo o que los envie al link de la imagen sin desearlo, como podria quedar esa X de cerrar mas cerca de la imagen y si es posible un poco mas grande.
ResponderEliminarAdicionalmente creo que seria bueno saber que parte de los codigos dicen donde habilitarlo o desbilitarlo, para no estar eliminando y poniendo cada vez que uno desee que se vea, pus habra dias que sera bueno y dias que no, orientame, gracias anticipadas.
ResponderEliminarAH por cierto, hay dentro de esos codigos alguno que hable sobre la ubicacion de la imagen?, porque aunque en la mayoria de los blogs seria molesto en el mismo centro en el caso del mio seria alreves, pues en el centro que estan los post, no hay nada importante, yo lo quisiera en el mismo centro y abajo, ya que en las sidebar es que estoy almacenando mi directorio.
ResponderEliminarRecuerda que el los primeros parámetros en color rojo puedes cambiar el ancho del anuncio, si lo pones a un ancho que se ajuste más al tamaño de tu imagen se deberá reducir ese espacio que se crea.
ResponderEliminarCuando quieras que no se vea puedes probar poner debajo de #anuncio { esto:
display:none;
Para cambiar la posición mira el comentario #113
¡Saludos!
HAY ALGUNA RAZON POR LA QUE ESCOJO LOS CODIGOS DE INSERTAR DE YOUTUBE Y NO SE VEN EN MI BLOG? LO AGREGO COMO CODIGO HTTML/JAVASCRIPT, ANTES EN OTROS BLOGS Y FUNIONABA, AHORA SE HACE DIFERENTE?
ResponderEliminarHola Xander,
ResponderEliminarEsa pregunta ya te la he respondido en esta entrada:
http://ciudadblogger.com/2010/01/mostrar-videos-al-azar.html
Si gustas vamos a darle el seguimiento allá para que tenga continuidad el tema y no dispersarnos.
Saludos.
Gracias Potro, suponia que habia preguntado eso, pero no estaba seguro, es que para yo darle seguimiento a lo que pregunto, tengo que dejar el explorer abierto donde preguntar y revisarlo mas tarde o al otro dia y se me cerro el explorer ese dia y entre tantas entradas no sabia donde buscar o hay alguna mejor forma de dar seguimiento a los comentarios que uno hace?, adicionalmente eso de los videos es lo que hago, pegar el codigo, pero aun asi sale en blanco y esto yo lo hacia antes, no se que paso ahora.
ResponderEliminarUn tip para eso es que hagas click en el enlace que está abajo del formulario de comentarios que dice 'Suscripción por correo electrónico', eso hará que cuando alguien haga un comentario en esa entrada donde te has suscrito te llegue un mail para avisarte.
ResponderEliminarLo de los videos vamos a verlo allá, y de preferencia pon uno en un gadget, lo guardas y aunque no se vea lo dejas así para que cuando lo hayas hecho me avises y pueda ver qué puede estar pasando.
Saludos.
SE ME OCURRIO MOVERME A OTRA PC Y SE VE, DEBE SER ALGUN COMPONENTE DE FLASH...YA LO ARREGLARE
ResponderEliminarALGUIEN POR AHI SABE COMO MODIFICAR EL PADDING O RELLENO EN LAS NUEVAS PLANTILAS DE BLOGGER?, TENGO UN BLOG CON EL 25% DEL ESPACIO DESPERDICIADO Y DESEO QUE SE VEA MAS LINDO, PUES TODOS ESOS ESPACIOS EN BLANCO ENTRE LOS WIDGET Y CON LA CABECERA, ETC, QUE ME PREOCUPAN MAS QUE EL DE LAS ENTRADAS, ME TIENEN MAL BUSCANDO UNA SOLUCION Y NO LA ENCUENTRO EN PARTE.
ResponderEliminarPotrito: No tiene que ver con la entrada pero no se en que post preguntar.
ResponderEliminar1) hoy día sirve dar el alta de mi blog en los directorios?
2) Cuando coloco el codigo del boton reciproco en un gadget html/java me aperece otra cosa diferente al boton del directorio, esto es así?
3) Como puedo hacer para que estos botones del directorio no esten tan alejados uno de otro y maximizar el espacio?
ResponderEliminarHola Dr,
ResponderEliminarDepende del directorio, anteriormente era común que la gente buscara en directorios los blogs que tuvieran la temática de su interés, ahora ya no son tan populares pero sigue habiendo gente que los usa para buscar blogs.
El banner y enlace que el directorio te dé bien puede ser del mismo directorio o de otro sitio web perteneciente al dueño del directorio, eso ya depende del directorio mismo.
Una forma de ganarle espacio es que pongas el código de los botones uno seguido del otro sin dar saltos de línea (ENTER).
Saludos.
Gracias Potro!
ResponderEliminary ya que estoy va otra pregunta:
Lei en un post de otro blog la posibilidad de modificar la plantilla para que en la direccion del navegador aparezca primero el titulo del post y posteriormente el nombre del blog para que los buscadores prioricen el titulo del post y no el nombre del blog y así mejorar la busqueda. Lo intente hacer y no me funciono, sabes algo al respecto?
Abrazos!
Es esta entrada:
ResponderEliminarhttp://ciudadblogger.com/2009/05/optimizar-los-titulos.html
Sólo toma en cuenta que el efecto será inmediato en tu navegador, pero en Google puede tardar unos días, dependiendo de qué tan rápido indexe tu blog.
Saludos!
HOla Potro!!!!
ResponderEliminarMi duda es dónde cambiar el color de letra y fondo como comentas en la última parte del post.
background:#ccc;color:#FFF;border:3px solid #000;padding:5px;text-align:center;font-size:14px
NO entiendo lo de: #ccc #fff.... ¿qué hay que cambiar? ¿Por cual?
Gracias majo
Hola Gorka,
ResponderEliminarEl fondo es este:
background:#ccc;
Y el color de la fuente es este:
color:#FFF;
Puedes cambiar esos códigos por el código del color que prefieras.
Saludos.
Gracias majo!!!!
ResponderEliminarOtra cosica Potro,
ResponderEliminarCuando aparece el anuncio, no se puede hacer clic sobre ningún enlace ni pestaña del blog. Además las imágenes de los enlaces (desde dropbox) no se ven.
Qué puede ser??
Gracias chaval
SOLUCIONADO:
ResponderEliminarAñadiendo el código para que el anuncio sólo aparezca en la página principal(comentario 11), se soluciona mi problema. Cerrando el anuncio puedo hacer clic normalmente.
Así pues, sólo me queda una cosica. Quiero poner saltos de línea entre las frases del anuncio. He puesto
cuando necesitaba pero me dice que hay un error de plantilla por no tener end-tag para
.
Ya me dirás.
Mil gracias y siento ser tan pesaU
lo q falta es br
ResponderEliminarExcelente aporte maestro, lo pondre en practica un dia de estos en una entrada de mi blog...
ResponderEliminarjejejjee
Salu2 camarada.
Gorka, el salto de línea debe ser así <br/>
ResponderEliminarmaxdeniel, saludos y que todo salga bien!
Ahora SÍ, MIL GRACIAS TÍO!!!
ResponderEliminarNos vemos en septiembre jeje
Un abrazo
Que disfrutes tus vacaciones :)
ResponderEliminarGracias Potro majo!!
ResponderEliminarHola Potro. Es mi primera consulta en tu blog, que se ve bastante interesante. Quiero hacerte una consulta (no le todooos los comentarios, quizas ya se explicó). Podria usar este anuncio como condicionante de ingreso y solo en post ? Mi idea es suplantar la "x" de cerrar por una imagen que diga me quedo en el post y el enlace para volverlo a la pagina de inicio.
ResponderEliminarSi se puede, desearia saber como puedo hacer para poner las dos opciones una al lado de la otra, por ejemplo centradas en el anuncio (cambiar de posicion de la "x" de cerrar).
Muchas Gracias
Sergio. La Plata
Hola Sens,
ResponderEliminar¡Bienvenido a Ciudad Blogger!
Para cambiar la posición del anuncio mira el comentario #113.
En caso de que el anuncio tenga esos mensajes entonces en lugar del último código pon este:
<div id='anuncio'>
Estás a punto de ingresar a este post, ¿estás seguro que deseas continuar?
<br/>
<center><input type="button" value="Aceptar" onClick='closebar(); return false'/> <input type="button" onclick="location.href='http://nombre-de-mi-blog.google.com'" value="Salir" /></center>
</div>
Y puedes agregar un color de fondo para darle un poco de color, eso puedes hacerlo en el primer código:
#anuncio {
background:#ccc;
Saludos.
hola potro
ResponderEliminarquisiera saber como puedo colocarlo para que salga en la parte de abajo en medio
osea que en ves que salga en la esquina izquierda salga en medio solo que abajo
porfavo :)
Mira el comentario #30
ResponderEliminarcopie el codigo tal cual y no pasa nada, no aparece nada en ninguna parte de la pagina, que pase ??
ResponderEliminargracias.
Hola ahhh me parece que el problema fue que interprete mal, solo sirve para Blogs ?? yo lo puse en una web .com.ar echa en dreamwever 8 y que se aloja en WEBHOST000, no me sirve este codigo ??
ResponderEliminarGracias por la pronta respuesta.
No sé si también sirva para páginas Webs, nunca lo he hecho. Todos los trucos que se explican aquí son para blogs bajo la plataforma de Blogger, aunque algunos de ellos también son aplicables a páginas Webs, sin embargo te mentiría si te dijera cuáles funcionan bien o cuáles no pues sólo los pruebo en Blogger.
ResponderEliminarSaludos.
Hola potro, si en caso no quiero poner una imagen ni un texto, y quiera poner un codigo iframe de publicidad, como lo haria?
ResponderEliminarPues entonces en lugar de la imagen pondrías un iframe:
ResponderEliminar<iframe align="middle" allowtransparency="true" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="URL de la página que tiene la publicidad" style="height: 325px; width: 330px;"></iframe>
Pero aguas, que si es de AdSense no está permitido y te pueden eliminar la cuenta si te descubren.
Buen truco, Potro. ¡Muchas gracias!
ResponderEliminarGracias a ti por tu visita!
ResponderEliminarhola muy buen dia amigo me gustaria saber el nombre del efecto que tiene la publicidad de este sitio http://www.darkville.com.mx/ ya que en este codigo mencionas 2 efectos en frombottom y el fromtop pero me gustaria saber el nombre de la libreria que le da ese efecto que sube lentamente intente con "slider" pero sube muy rapido me gustaria ese mismo efecto sino fuera mucha la molestia un saludo y grax espero tu respuesta
ResponderEliminarHola Carlos,
ResponderEliminarNo he entendido bien tu pregunta. Ese sitio tiene un slider, ese slider se llama anythingSlider, aunque el que usan ya lo han modificado un tanto, y funciona con jQuery.
frombottom y el fromtop no son efectos, son una función de este script para indicar la posición del anuncio.
Saludos.
Potro: Mira este blog: http://www.netdentista.com/2011/10/quanto-vale-blog-de-odontologia.html#more-11891
ResponderEliminarAl final del post no te deja seguir leyendo si no le haces click al boton de google, tweet, etc.
¿Como se puede hacer algo así?
Un abrazo y gracias como siempre!!! sos mi salvador!!!
Sólo con el botón de Google +1 podría hacerse en Blogger, pero ya alguna vez hice pruebas y no funcionó muy bien :/
ResponderEliminarAmigos necesito de su ayuda por favor resulta que tengo una página de peliculas online pero quiero monetizarla para que ella misma pueda mantenerse quiero ver como yo haria para colocar una publicidad flotante en la pelicula que seria de adsense por favor si me ayudan como debo hacer esto muchas gracias
ResponderEliminarHola Jason,
ResponderEliminarNo está permitido poner anuncios de AdSense en cuadros flotantes:
https://www.google.com/support/adsense/bin/answer.py?hl=es&answer=105955
Ni tampoco en sitios que contienen descargas ilegales. Léete los Términos y Condiciones para que veas qué está permitido y qué no.
podre y se podra poner el box de me gusta de facebook
ResponderEliminarPOTRO ejemplo quisiera que en ves de un texto poder insertar esto:
ResponderEliminarclass="fb-like-box" data-href="http://www.facebook.com/pages/Bienmusic/194654133886424" data-width="300" data-height="80" data-show-faces="false" data-stream="false" data-header="false">
Nunca lo he hecho con ese tipo de elementos. Prueba ponerlo ahí, sino se ve entonces quizá debas convertir el código del fanbox a texto plano:
ResponderEliminarhttp://ciudadblogger.com/p/conversor-de-html-texto-plano.html
Como hago, para que este mensaje aparezca en el centro de mi pagina y no arriva a la izquierda?
ResponderEliminarY como hago para que se ve el total de la imagen, que solo se ve un cacho?
Y otra cosa, como hago para que no baje y suba cuando yo bajo y subo, sino que aparezca solo eso en mi blog centrado como si fuera un banners de publicidad y no baje n suba, solo me de la opción de cerrarlo y una vez cerrado sea cuando puedes navegar por el blog?
ResponderEliminarEntonces no necesitas este truco, sino algo como esto:
ResponderEliminarhttp://ciudadblogger.com/2011/05/abrir-ventana-al-cargar-el-blog-con.html
Potro ya lo Logre mira como quedo http://www.bienmusic.com
ResponderEliminarmuchas gracias este blog es el mejor
Buenísimo el resultado bienmusic, de paso me he quedado escuchando música :)
ResponderEliminarpotro excelente aportacion mi problema es que le coloque un video pero al darle cerrar sigue escuchando el video espero tu pronta respuesta
ResponderEliminarmi pagina es zonapacifica.net
Hola Eddier Yanded,
ResponderEliminarCambia esta parte del código:
<a href='Javascript:void' onClick='closebar() return false'>
Por esta:
<a href='Javascript:void' onClick='closebar(), document.getElementById('anuncio').innerHTML = ''; return false'>
Con eso deberá dejar de escucharse el audio cuando la cierres.
funciono muchas gracias eres grande voy a recomendar tu web
ResponderEliminarQué bueno que todo resultó bien :)
ResponderEliminarwow hoy no tengo ninguna duda, pero enserio que genial te quedó el nuevo diseño!!!! me gustaría algún día poder hacer algo así xDD!! jaja y yo quiero una playera
ResponderEliminarGracias Eddy, ya todos quieren una playera, así que tendré que pensar seriamente en hacer algunas :)
ResponderEliminarHya alguna forma de decirle a los codigos que ese anuncio flotante solo este en la entrada inicial?, pues si la gente entra a 3 secciones de mis noticias aunque lo cierre vuelve y abre, se puede?
ResponderEliminarSí, encerrando el segundo código en una condicional:
ResponderEliminarhttp://ciudadblogger.com/2010/03/condicionales-de-blogger.html
Cuando hice esto: Anuncio flotante que baja con la página, pegue un codigo antes de Ahead y otro antes de body, ese codigo inicial y final que pusiste para encerrar el codigo, cual es los dos es el codigo pues no se mucho de esto, lo que uno pone anets de ahead o lo que pone antes de body? perdon por mi notable ignoracia, es que te reitero no se nada de programacion, solo sigo instrucciones, gracias anticipadas.
ResponderEliminarEl que hay que encerrar con la condicional es el segundo que se menciona en la entrada, es decir, el que va antes de </body>
ResponderEliminarY si ya tengo este efecto de venta emergente y quiero desactivarla para activarla luego y no tener que borar, donde cambio algo para desactivarlo momentaneamente? www.InformativoRD.com
ResponderEliminarEncierra ambos códigos de esta forma:
ResponderEliminar<!-- Anuncio flotante
...Aquí el código del gadget...
Anuncio flotante -->
Eso debes hacerlo tanto con el primer código que pegaste como con el segundo.
Ya cuando quieras usarlo de nuevo le quitas eso que agregaste.
Pues se supone que ya está configurado para que aparezca una sola vez, pero parece que estos códigos o ya no funcionan bien o les hace falta un cambio :/
ResponderEliminarHola Potro... aqui estoy leyendo todo lo que explicas, soy amateur en esta area y me he aventado a hacer mi pagina web de puros tutoriales. La consulta es la siguiente: en esta pagina http://www.931wolfcountry.com/ aparece un anuncio en video y quiero poner en mi pagina algo similar (o igual si se puede), como le hago?
ResponderEliminarDe antemano mil gracias
Hola Charlieboy,
ResponderEliminarPuedes usar el mismo método, sólo que en lugar de poner un mensaje de texto pondrías el código de un video. Ya algunos lo han hecho así ;)
Saludos.
Ok Gracias... segure probando... ya probe los codigos y estan bien interesantes
ResponderEliminary este blog me ha dado muchas ideas para mi blog
Suerte Charlieboy :)
ResponderEliminarmuy bueno.. gracias
ResponderEliminarGracias a ti por tu visita!
EliminarMe funciono http://muchtv.com.ar gracias
ResponderEliminaru como puedo poner la IMG de la X (que sirve para cerrar) en el mediode la img?
ResponderEliminarDentro del código de la imagen verás que dice align='right' eso cámbialo por align='center' para que quede en el centro.
EliminarSaludos.
bueno yo llev mucho entrandp a este blog y casi nunca comento pero te confiezo que mi blog no seria nada sin ti, muchas gracias, y otra cosa, yono se nad ade jquery ni nada deso por eso megustaria k isieras un tuto explicando todo sobre eso... grax!!!
ResponderEliminarMuchas gracias por tu comentario Rayner :)
EliminarTomaré en cuenta tu sugerencia, saludos!
Muy chulo!!!!!!!!!!!!!!!!!!!!!!
ResponderEliminarmirad mi bloc :
hugoinformaticagavina.blogspot.com
cuando cambio los parámetros de tamaño que das
ResponderEliminarwidth: 300px;
height: 80px;
la "X" para cerrar aparece muy lejos de la imagen pero si cierra igual se ve desordenado. Pero cuando esta arriba el anuncio al entrar al home del blog no se puede ni cerrar tengo que bajar un poquito la página para que se pueda cerrar. QUÉ HAGO?
y..
cómo hago para mover el anucio a otra parte de la pantalla? porque sólo aparece a la izquierda del blog.
Busca donde dice:
Eliminarvar startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
Esos números harán que cambie de posición.
Para lo de la distancia del icono necesitaría ver dónde lo has puesto.
Bien Potro, mi consulta es ésta... coloqué un mensaje, pero quiero cambiar el tipo de letra y que sea negrita ¿cómo hago?
ResponderEliminarAñade los estilos en la parte verde como se indica. Por ejemplo:
Eliminarfont-weight:bold; font-family:arial;
Gracias, un abrazo.
ResponderEliminaramigo puse en mi blog eto y me represento un problemon ya que funciono bien peor lo modifique agregandole un fanbox de facebook y un sigueme de twitter pero eso no tiene nada que ver el punto es que me bloqueo otros scripts (o eso creo) porque ya no me funciona en la spaginas dentro de las entradas un slider y y un widget que siguiere entradas! me ayudas hermano?
ResponderEliminarPues me gustaría ayudarte pero sin saber en cuál blog lo has puesto me es difícil hacerlo.
EliminarBueno Potro, Muy buen post. Utilísimo.
ResponderEliminarLastimosamente no he podido aplicarlo en su totalidad pues mi intención era ubicarlo sobre un vídeo de youtube y estos vídeos siempre se colocan por encima de todo. He probado a utilizar z-index y nada. ¿Alguna idea?
Mira esta entrada Wilmer:
Eliminarhttp://ciudadblogger.com/2011/03/cuando-los-videos-se-sobreponen.html
lo probaré.
ResponderEliminarEchen un vistazo a ver que os parece:
soy2tecnologia.blogspot.com
Hola Potro,estoy usando el anuncio flotante que muestra un texto y un enlace,si quisiera que cuando le den click al enlace y les cargue otra pagina no les vuelva a aparecer el anuncio?
ResponderEliminarHola JB, se supone que cambiando var persistclose=0 por 1 no vuelve a aparecer hasta que se vuelva a entrar al blog, pero sólo se supone porque a mí nunca me funcionó :/
EliminarUsa las teclas CTRL + F, así te será más fácil localizar los códigos. Saludos.
ResponderEliminarHola potro anhorabuena por tu ayuda.
ResponderEliminarMi pregunta es como puedo poner un swf que baje con la pagina.
Un saludo.
Gracias.
Hola Stýbel Salones, sigue el mismo método, y en donde va el mensaje pon el código del SWF:
Eliminarhttp://ciudadblogger.com/2009/06/insertar-banners-en-flash.html