Mostrar notificaciones en el blog con efecto deslizante

2 de diciembre de 2010 82 comentarios ,

SlideNote es un plugin de jQuery que nos permite mostrar notificaciones en el blog de forma deslizante tanto al mostrarse como al cerrarse el anuncio.
Estas notificaciones se muestran cuando se baja el scroll de la página y se pueden mostrar dentro de ellas cualquier tipo de estilos CSS, imágenes, enlaces o cualquier otra cosa. Puedes verlo funcionando en este blog de pruebas, al bajar la página aparecerá el anuncio del lado derecho.
El contenedor del aviso tiene un botón para cerrarse, pero también se oculta si subimos nuevamente con el scroll de la página.

Para colocarlo en tu blog sigue estos pasos:
Descarga este archivo, descomprímelo y súbelo a un hosting.
Luego entra en Diseño | Edición de HTML y antes de </head> pega lo siguiente:
<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='URL del archivo' type='text/javascript'/>

<style type='text/css'>
.slidenote {
width: 500px; /* Ancho del anuncio */
height: 120px; /* Alto del anuncio */
background: #FBEC78; /* Color de fondo */
-moz-box-shadow: -0.2em -0.2em 0.7em #333;
-webkit-box-shadow: -0.2em -0.2em 0.7em #333;
padding: 1em;
}
.slidenote img { float: left; margin-left: -2.5em; margin-top: -2em; }
.slidenote img:hover { margin-top: -1.95em; }
.slidenote-titulo {
color: #000; /* Color del título */
font-size:25px; /* Tamaño de la letra del título */
font-weight:bold;
margin-top: -5px;
}
.slidenote p {
color: #000; /* Color del texto */
font-size: 14px; /* Tamaño de la letra */
font-weight: bold;
}
</style>
Cambia donde se indica la URL del archivo que subiste previamente. Luego, y por último, pega antes de </body> esto:
<div class='slidenote' id='Note'>
<span class='slidenote-titulo'>Importante...!</span>
<p>Aquí va el texto de tu anuncio. Puedes incluir estilos, enlaces, imágenes, etc.</p>
</div>

<script type='text/javascript'>
$(&#39;#Note&#39;).slideNote({
corner: &#39;right&#39;,
where: 80,
});

$(&#39;#Note&#39;).slideNote({
url: &#39;ajax.html&#39;,
closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4iH3nLChGBbKHfhZqDroEtO_Qj4FGlkV6koVsi6Zseog557ACq2jU4mpUadFXtO77oHxPhwaVyIohr25uNzbGx7UoMacdG20ZqmGWBrU8BpHdPopZ_KSk0rWqyv-ts6bAedS9qIyg4qk/&#39;

});
</script>
En el primer código está señalado en color verde los estilos que podemos cambiar de la estructura del anuncio. Y en color azul se indica donde va el contenido del anuncio.

Como ves la instalación es muy sencilla, práctica, y sus usos pueden ser múltiples, ya sea para sugerir la suscripción al blog, para dar un aviso importante, para mostrar las redes sociales en las que pueden localizarnos, o simplemente para agregar un saludo a los lectores.


82 comentarios en:

" Mostrar notificaciones en el blog con efecto deslizante "

  1. Potro no se puede realizar este efecto pero que salga como estilo Pop up, y que podamos colocar algo así como para que nuestros lectores se suscriban?

    ResponderEliminar
  2. No sé bien para qué podría usarlo pero tu entrada me ha servido para poder localizarte en facebook, ¡qué alegría!, potro!, :)),

    Un abrazo

    ResponderEliminar
  3. Hola, en primer lugar, darte las gracias por toda la ayuda tan buena y tan bien comentada que nos prestas. Una duda, cuando veo mi blog, que edité por completo en Firefox, en otro buscador, Internet Explorer por ejemplo, lo veo todo mucho más grande, ¿es normal?.
    Y ademas banner con el scroller de las imagenes que puse en el principio, no funciona bien. ¿Serías tan amable de echar un vistazo?, Tampoco me funciona bien el banner de pestañas que edité con purecss.
    Muchas gracias de nuevo.
    http://elblogdepastriz.blogspot.com/

    ResponderEliminar
  4. Quizás no me explique bien, la cosa es que no aparezca del lado derecho sino en el centro de la pantalla sin expandirse. ¿Se puede hacer?

    ResponderEliminar
  5. LnrdG, hay otro tipo de avisos que puedes usar para ese fin, por ejemplo este o este.

    Sofía Serra Giráldez, ¡Ea! entonces qué bueno que puse el ejemplo de Facebook :)

    ANA ISABEL CANO, tanto como normal no es, pero sí es demasiado común que en Internet Explorer los sitios se vean completamente distintos a como se ven en otros navegadores de mejor calidad. No hay mucho que se pueda hacer en esos casos puesto que generalmente al tratar de corregir un problema se genera otro y así sucesivamente...

    ResponderEliminar
  6. Muy bueno POTRO para anunciar algo,pero estoy viendoq ue nomas se oculta y no se cierra por completo,y como que seria un poco frustrante para mis visitas!! algo que se haga para cerrarlo completamente!!?

    ResponderEliminar
  7. Entré al blog de pruebas, y me gustó ese slider, tienes alguna entrada en la que diga como ponerlo en el blog?

    ResponderEliminar
  8. potro me gusto mucho lo de el slider , pero tengo una curiosida : se puedeb poner comentario en una página secundaria???
    gracias de todos modos

    ResponderEliminar
  9. Microboy90, nop, el plugin es sólo para ocultarlo.

    SDK, aquí está el tutorial.

    mariocrack6, no entendí a qué te refieres con página secundaria :\

    ResponderEliminar
  10. Gracias Potro, otra cosa, no sabía que se podían poner enlaces en los comentarios, a ver si me sale xD Link

    ResponderEliminar
  11. SALUDOS POTRO.

    Hablando de NOTIFICACIONES .. estaba buscando en la web algun tipo de marquesina o Script que me diera la opcion de colocar noticias de forma que fueran rodando de abajo hacia arriba o con efecto desvanecedor con el efecto de detenerse cuando el usuario coloque el puntero sobre el texto y pues que logicamente al hacer click enlace al sitio de la noticia y me encontre con una pagina en particular que lo tiene: http://www.gruposisprocom.com (ver en la parte superior derecha el panel: NOTICIAS) Como mi aprendizaje en esto es experimental y amateur decidi ver el codigo fuente y ubicar el script y lo halle. Sin embargo lo que hice fue pegarlo en un gadget javascript y aparece en mi blog pero sin la animacion del deslizamiento y los efectos que le describi mas arriba. solo salen los titulos estaticos uno mas abajo del otro. Ver: http://mercantil-viajes.blogspot.com/ ... Disculpa si no es la entrada para consultarte esto pero fue lo mas parecido que halle en tu ciudad para preguntar (Me gustaria tener su correo, si es posible). Si es posible orientarme te lo agradecere o al menos darme referencia de algun codigo que reuna las caracteristicas que te nombré ... HASTA PRONTO

    ResponderEliminar
  12. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  13. me referia a esa opción que te pone blogger de crear página yo la llamo así porque en que se pueden poner entradas se llama página principal miralo; http://elrincondemario6.blogspot.com

    ResponderEliminar
  14. POTRO: una pregunta! si compro el dominio en blogger...el .com por ejemplo tengo el blog que hice "http://peliculasyprogramasgratis.blogspot.com/" y a con el dominio comprado se mirara asi "http://www.peliculasyprogramasgratis.com/" o como se va a mirar,porque me interesa que tenga las "www"...tal vez sea una pregunta tonta,pero pss no se,gracias por cuando respondas!!

    ResponderEliminar
  15. Estimado Potro: lo vuelvo a molestar con otra consulta. Pero para no desviarse del tema de este post le dejo el enlace en donde le realicé la pregunta en un mensaje.

    http://ciudadblogger.com/2009/07/mostrar-solo-los-titulos-de-las.html

    Gracias.

    ResponderEliminar
  16. Hola de nuevo, es posible que haya echo un estrapalucio, te comento, esta mañana añadí el purecss para poner un bonito menú, pero me aparecían luego todas las entradas duplicadas, después quise arreglarlo y creo que fue peor el remedio que la enfermedad, y ahora estoy desesperada, ¿me echarías una mano?
    mi blog http://elblogdepastriz.blogspot.com
    Gracias

    ResponderEliminar
  17. Hola El Potro
    gracias por el post esta muy bueno y queria preuntarte como hacer que mis entradas aparescan cuando haces una busqueda en google porque en google solo aparece la pagina principal de mi blog, haver si tienes un post por ahi
    Gracias

    ResponderEliminar
  18. Potro, ¿podrías poner una entrada poniendo como poner un mensaje que aparezca una vez a los visitantes? Es decir, si vengo a este blog por primera vez, qe aparezca un mensaje que bienvenida, pero que no aparezca la segunda vez.

    ResponderEliminar
  19. Hola Potro muy buenas Tardes.. Tengo una Duda Potro se puede Cambiar el ancho de un sidebar de una plantilla...
    ya dichas plantillas no se le puede modificar con el diseñador de plantillas qnos brinda el bloger..
    se podra anchar el siderbar? con codigos

    ResponderEliminar
  20. PERDONA ME SDALE FIJA ABAJO A LA IZQUIERDA Y NOS E MUEVE COMO LA TRUYA DEL BLOG DE PRUEBAS QUE PUEDO HACER?
    GRACIAS

    ResponderEliminar
  21. SDK, claro que se puede, aqui hay mas info.

    ________________________________ , mira esta entrada, el proceso es mucho mas sencillo.

    Idennis12, pues si los pones transparentes dejaran de verse, de cualquier modo solo localiza donde van los titulos, generalmente es .post h3 { y debajo busca donde este el color y cambia el codigo del color por transparent

    Juan, pues elimina la ultima parte que se ha agregado y con eso dejara de salir.

    mariocrack6, en las paginas estaticas si se pueden habilitar los comentarios, solo entra para editar la pagina, luego abajo veras que dice 'Opciones de entrada', ahi da click y veras la opcion de habilitar los comentarios para esa pagina.

    Microboy90, si cuando lo configuras en el panel de Blogger le pones las WWW entonces si se vera asi.

    Sandra, gracias a ti por tu visita :)

    ResponderEliminar
  22. Luvodico Rey, ya te he respondido alla, saludos!

    ANA ISABEL CANO, en los menus no debes tocar las areas de las entradas, eso es muy aparte de donde debe ir. Quiza la mejor opcion por ahora es que reinstales de nuevo la plantilla.

    josevp, pues eso no es cuestion de trucos, si la entrada tiene buen contenido, es original y esta bien redactada tendras mas posibilidades de posicionarla y asi aparecera en las busquedas.

    Toptrucos/Emilio, estoy trabajando en uno de esos, en cuanto lo tenga listo lo publico.

    BonuX Track, en las plantillas hechas con el Diseñador de plantillas de Blogger si es posible cambiar el ancho de la sidebar.

    CRISJAPA, en cual blog?

    MaG@S RaDioMuSiC , lo mismo, en cual blog?

    ResponderEliminar
  23. No potro no se puede.... modificar me dice q con esa plantilla no se puede modificar por eso te pregunto si se puede atravez de codigos....

    ResponderEliminar
  24. Este es mi blog http://ampalainmaculadacordoba.blogspot.com/
    y como puedes ver se queda abajo fijo a la izquierda y no se mueve como el tuyo de pruebas y sale la X para quitarlo.
    gracias por tu ayuda

    ResponderEliminar
  25. Gracias Potro, creo que ya lo tengo, tu ayuda de gran importancia en mi blog.

    ResponderEliminar
  26. MaG@S RaDioMuSiC, jajaja, por desgracia no tengo agua bendita. Lo que sucede es que usas Prototype y Scriptaculous, y este anuncio requiere de jQuery, estas librerias de scripts no son compatibles entre ellas y por eso no funciona.

    BonuX Track, exactamente cual plantilla y de cual blog es?

    CRISJAPA, lo que sucede es que el archivo lo has alojado en MediaFire y no permite "leer el archivo" sino que abre una ventana de descarga. Necesitas subirlo a otro alojamiento como por ejemplo Dropbox, Google Sites, o Fileden.

    Ana Isabel Cano no hay de que, gracias a ti por tu visita!

    ResponderEliminar
  27. necesito alguien que por favor me ayude con el codigo url del archivo es que no se subirlo y no puedo ni en dropbox ni ninguno, pasadmelo por favor


    gracias

    ResponderEliminar
  28. Hola potro Comente en tu Post de El reproductor de yahoo media player en que se oculta y se pone visible cuando precionas en la Flecha lo que quisiera saber es como hacer para que se mantenga visible

    ResponderEliminar
  29. Hola Potro,me gusta mucho esta entrada y quiero agradecer tu tiempo con nosotros,la entrada la tengo en mi blog Ampa-Arteagabeitia,pero quisiera saber la forma de que solo saliera al pulsar,es decir, quitar el que salga cuando bajamos el scroll,que sea la visita quien decida quitar.Un saludo.

    ResponderEliminar
  30. Hola Potro se trada del simple Black metal la plantilla la q te hablo... tambien tenia un problemita con ponr imagen dentro de un Gadget estube intentando intentando pero nada...
    me rendi despues de 4 horas en un fin de semana de amanecida... gracias

    ResponderEliminar
  31. Exelente como siempre potro!, desviandome un poco del tema, desde hace como 2 semanas me he dado cuenta que no sirve el buscador de mi blog, ni el feed de ultimos comentarios, tienes idea a que se deba?, a alguien mas le paso esto?

    http://thenewfusionweb.blogspot.com/

    ResponderEliminar
  32. Potro otra pregunta es que quiero saber como colocar la barra de carga pero que salga como uuna specie de portada con la barra de carga y luego aparezca el contenido

    ResponderEliminar
  33. Hola potro, me gusto mucho este artilugio :)

    Potro de que manera podemos controlar el aviso, para q no salga a cada rato... digamos ponerle un tiempo, para q salga cada 1 min, o mas.. espero tu respuesta :)

    ResponderEliminar
  34. Hola potro oye a donde subo el archivo de secuencia eh?
    n se a donde subirlo, ilustrame, o alguien de los que ya lo hicieron que me diga x favor

    ResponderEliminar
  35. CRISJAPA, mira este video tutorial de cómo usar Dropbox.

    DexMax, si mal no recuerdo hace un par de días te respondí en esa entrada.

    AMPA- IGE, lamentablemente no tiene esa configuración :(

    ResponderEliminar
  36. Hola potro paso a saludarte y hacerte una pregunta, me gustaria agregar un botón para twittear los artículos de mi blog, pero no se si se pueda hacer en blogger o como hacerlo. Tal vez tu me puedas ayudar

    Un saludo

    ResponderEliminar
  37. potro lo que quiero saber es lo de el preoloader en flash kiero que salga una pagina en blanco con la barra cargando pero noc trabajar en flash si me pudieras ayudar o crear una entrada con ese tutorial porfavor

    ResponderEliminar
  38. BonuX Track, esa no es de las nuevas, mira este enlace que explica cómo ensanchar la sidebar: http://ayudaparatublog.com/como-cambiar-el-ancho-de-la-plantilla-de-tu-blog-blogger/

    Krizald max, el feed de tu blog está funcionando bien, ¿exactamente dónde o cuál es el problema que has notado?

    vito, desconozco cómo pueda hacerse :S

    Fer, me parece que no tiene esa opción de configuración.

    ResponderEliminar
  39. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  40. Ahora si funciono Potro gracias por la ayuda solo me quedaba 1 duda. potro me gustaria poner una imagen como fondo de un gadget mi plantilla influye en algo es el simple dark black! no se puede en esa plantilla o si gracias ----

    ResponderEliminar
  41. Idennis12, aún no he usado Lazy Load así que no sabría cómo ayudarte :(

    BonuX Track, no conozco esa plantilla.

    ResponderEliminar
  42. Samantha, mira esta entrada. Saludos!

    DexMax, estamos igual porque yo tampoco sé usar Flash.

    ResponderEliminar
  43. a ok potro busco y busco y no encuentro el codigo para ese preoloaer

    ResponderEliminar
  44. OWNNER - CHEOFLOW - CONTACT : 829-303-6918, una disculpa, se me había filtrado tu comentario en la bandeja de SPAM.
    Sólo deshaz el truco ese que habías aplicado y regresará como estaba.

    ResponderEliminar
  45. Hola Potro, me encanta esta entrada de notificaciones, solo que a mi me gustaria que no fuera deslizante, es decir, que al acceder al blog se viera, y los visitantes fueran los que la cerraran. En tu entrada se abre al mover la página, pero ¿hay alguna forma de que se abra al cargarla aunque no la muevas?
    Gracias y saludos

    ResponderEliminar
  46. Hola Francisco,

    Con este me temo que no es posible pero quizá te interese este otro método para mostrar un aviso.
    Saludos.

    ResponderEliminar
  47. Hola de nuevo Potro, habia visto también esa entrada, pero no se porque me gustaba más la otra, en fin, muchas gracias, me conformare con el post-it
    Saludos

    ResponderEliminar
  48. Hola otra vez Potro, aqui sin poder dormir pensando en mi nueva historia, mira quiero crear algo parecido a un foro, pero sin serlo, me dijeron de usar Cbox, pero en mis pruebas haciendo una pregunta ya se quedo corto de caracteres, conoces tu alguna forma en que el límite no sea demasiado, en Cbox limita a 200 caracteres.
    Gracias de antemano como siempre y enhorabuena por tu blog

    ResponderEliminar
  49. Cbox más que un foro es un chat. Quizá lo más apropiado sería que hagas un libro de visitas (en Google encontrarás algunos) y el código lo pongas dentro de una entrada, en caso de que no te permita poner el código directo en la entrada podrías poner el enlace hacia el libro de visitas.
    Saludos.

    ResponderEliminar
  50. Saludos Potro y feliz año nuevo!!
    Me dirijo a ti con una preguntilla... a ver si se puede hacer
    En mi blog tengo unas paginas estaticas con los trabajos en lapiz, color, tintas, etc, cada categoria por separado y, segun lo que contengan, cada entrada etiquetada segun esa categoria... bien ¿hay modo de etiquetar o diferenciar las imagenes dentro de una misma entrada?
    ¿por que digo esto?
    Veras, hay entradas con tres etiquetas (color, tinta b/n y lapiz, por ejemplo) siendo cada imagen correspondiente a una de esas secciones, bien, la diea es saber si hay metodo para diferenciarlas sin que tengan que estar en entradas diferentes y crear algun sistema para que aparezcan en esa pagina estaticca de forma automatica al ser publicadas en su entrada normal... no se si me explico bien pero esa es mi duda.....

    Gracias por adelantado, Maestro

    ResponderEliminar
  51. Lamentablemente no, Blogger sólo agrupa las entradas a través de las Etiquetas y de los Archivos, pero dentro de estas no se pueden crear subcategorías o diferenciar otros elementos como las imágenes.

    ResponderEliminar
  52. Habia que intentarlo
    Gracias por responder tan rapido colega

    ResponderEliminar
  53. y donde puedo subir el archivo js?

    ResponderEliminar
  54. ya logre subirlo a drop box. gracias por todo.

    ResponderEliminar
  55. Hola a todos, por favor alguién me puede ayudar con el tema. he intentado colocar una imagen y me sale fuera del marco de la notificación.
    Gracias,

    Saludos

    ResponderEliminar
  56. Necesito saber en qué blog lo quieres hacer y que lo tengas puesto junto con la imagen que deseas para darte las indicaciones exactas.
    Saludos.

    ResponderEliminar
  57. Gracias, lo quiero hacer en www.robolucionciudadana.com
    ya me diras, saludos.

    ResponderEliminar
  58. Siento no poder ayudarte pero no vi que lo tengas puesto.
    Saludos.

    ResponderEliminar
  59. http://ciudadblogger.com/2009/05/protege-tus-imagenes.html

    http://ciudadblogger.com/2009/10/como-evitar-que-te-copien-imagenes-y.html

    ResponderEliminar
  60. Hola....Este truco no me sirve con el orbit slider... entra en conflicto.. empiesa a entrar y salir en el tiempo que tiene el orbit y el orbit desaparece... sera que hay alguna manera de resolverlo?? ademas tratando de colocar una imagen se sobrepone al boton de cerrar queda como por fuera del limite de la nota ademas de que cuando pongo el mouse sobre ella comienza a moverse... me gusta mucho este efecto y espero que halla una solucion... gracias

    ResponderEliminar
  61. Prueba eliminando de este código esta línea:
    <script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>

    ResponderEliminar
  62. Muchas Gracias!! quedo perfecto, ^_^ me diras que soy una piedra en el zapato, luego de esto no molestare mas, pero tengo solo un detalle mas... coloque una imagen alli, no importa si hago la nota mas grande ella se coloca en la esquina superior izquierda tapando el boton de cerrar, ya probe con < div align="center" >< img src="URL DE LA IMAGEN" > < /div> y con < img src="URL DE LA IMAGEN" align="right" > pero simplemente no funcionan...:( que puedo hacer??? "Nota: di espacio entre los <> para evitar error en el comentario"

    ResponderEliminar
  63. Necesitaría que pongas la imagen y luego me muestres el blog donde lo has puesto para ver cómo puede arreglarse.

    ResponderEliminar
  64. ya coloque la imagen puedes verlo en http://stormyradio.blogspot.com/

    ResponderEliminar
  65. Probablemente la mejor forma sería que agregaras la imagen como parte del fondo del anuncio. Eso puedes hacerlo cambiando esta parte:

    background: #FFFFFF; /* Color de fondo */

    Por esta:
    background: #FFFFFF url(URL de la imagen) no-repeat;

    ResponderEliminar
  66. AHHH genial!!! eres la merma!! te montare un altar XD muchas gracias!!!

    ResponderEliminar
  67. Un gusto haber podido ayudarte :)

    ResponderEliminar
  68. Muy bueno el post, pero me gustaria saber que tendria que poner de texto si quisiese que en la notificación apereciese un link que llevase a otra pagina web. Muchas Gracias.

    ResponderEliminar
  69. Sólo poner el código de un enlace normal Sergio, por ejemplo:

    <a href="URL del enlace">TEXTO</a>

    ResponderEliminar
  70. Hola Potro,

    No puedo descargar el archivo... Me dice que la cuenta ha generado mucho trafico.

    Podrias "colgarlo" en otro sitio. Me interesa mucho!!

    ResponderEliminar
    Respuestas
    1. Por supuesto Luis, ya lo he resubido :)
      Saludos y gracias por avisar.

      Eliminar
    2. Gracias a ti Potro!!

      Voy a probar...

      Un Saludo.

      Eliminar
    3. Gracias a ti Potro!

      Voy a probarlo...

      Un Saludo.

      Eliminar
  71. Hola:
    He intentado poner esta nota deslizante en una página web gratis (PaginaWebGratis) y creo estar haciéndolo bien pero no hay forma de que salga la notificación.
    Copié el código a DreamWeaver y me dice que hay uerro de sintaxis en la línea 27. No sé que significa.
    Por cierto, cuando hago todo lo que dices se borra todo el contenido de la página web.
    ¿Sabes si este código es válido para una página de PaginaWebGratis.es?
    Gracias por tus tutoriales.

    ResponderEliminar
    Respuestas
    1. No sé decirte, todo lo que hay aquí ha sido probado sólo en Blogger, ignoro cómo funcione en otras plataformas.
      Saludos.

      Eliminar
  72. Como pongo este aviso en mi web, mi web es www.cosasdepareja.jimdo.com

    ResponderEliminar
    Respuestas
    1. No sé decirte, todo lo que hay aquí ha sido probado únicamente en Blogger.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger