Inicio Condiciones de Uso Mapa del sitio ▼ Ayuda Blogger Afiliación ¡Enlázame! Vótanos en... ▼ Contáctame Acerca de...

miércoles, 24 de agosto de 2011

Intro para el blog con efecto deslizante

Una de las cosas más reclamadas hoy en día por las web 2.0, es tener un buen intro que tenga un mensaje para saludar a los visitantes y un botón para entrar en la página, esto se puede crear de muchas maneras, pero hoy explico la forma que a mi me ha parecido más sencillo de realizar, además de ligera.


El Intro que he creado es simplemente un capa de color oscuro que cubre el 100% de la pantalla en larga y en ancho, que contiene una imagen de "Bienvenido" y un botón que al pulsar hace que desaparezca todo con un efecto deslizante hacia arriba, con los códigos mostrados a continuación el intro solo se mostrará en la pagina principal del blog, ya que puede resultar muy molesto que se abra en todas las páginas del blog.

En este blog de pruebas podéis ver como es el ejemplo

1ª PARTE.
Para añadirlo a nuestro blog tenemos que ir a Diseño, Edición de HTML y a continuación, buscar lo siquiente: <head>si utilizas Google Chrome pulsa Ctrl + F para buscar más deprisa, justo debajo añadimos lo siguiente:



2ª PARTE.
Después buscamos la siguiente parte:
<body>
Si no la encuentras es posible que aparezca así:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Justo debajo añade lo siguiente:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='fondointro'><div id='imagenintro'><img src='https://lh4.googleusercontent.com/-BOCsd3dR7D4/TlQPGpuZOSI/AAAAAAAAAWQ/8wDQr78k7-w/Bienvenido.gif' style='position:fixed; top:40%; left:39%;'/></div>
<a href='javascript:void(0)' onclick='entrarblog(); Effect.toggle(&quot;fondointro&quot;,&quot;slide&quot;); return false' style='text-decoration:none'><div id='botonintro' onmouseout='botonpulsado()' onmouseover='botonopulsado()'><span id='textoboton'>Entrar</span></div></a></div></b:if>

<script type='text/javascript'>
function entrarblog() {
document.getElementById(&#39;imagenintro&#39;).style.display=&quot;none&quot;;
document.getElementById(&#39;botonintro&#39;).style.display=&quot;none&quot;;
}
</script>

<script type='text/javascript'>
function botonopulsado() {
document.getElementById(&#39;botonintro&#39;).style.top=&quot;55.2%&quot;;
document.getElementById(&#39;botonintro&#39;).style.left=&quot;45.1%&quot;;
}
</script>

<script type='text/javascript'>
function botonpulsado() {
document.getElementById(&#39;botonintro&#39;).style.top=&quot;55%&quot;;
document.getElementById(&#39;botonintro&#39;).style.left=&quot;45%&quot;;
}
</script>

La parte de código en rojo, es la URL de la Imagen que se mostrará, puedes cambiarla si quieres.
La parte de código en verde, es el texto que irá dentro del botón, puedes cambiarla por otro que prefieras.

3º PARTE.
Ahora añadimos los estilos, justo antes de ]]></b:skin>:

#fondointro {
z-index:12000;
height:100%;
width:100%;
position: fixed;
top:0px;
left:0px;
background:#26829E; /* Color de fondo del intro */
}


#botonintro {
z-index:12001;
background:white;  /* Color de fondo del botón */
height:40px;  /* Altura del botón */
width:90px;  /* Ancho del botón */
top:55%;
left:45%;
position: fixed;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
box-shadow: 3px 3px 2px #AFAAAA;
-webkit-box-shadow: 3px 3px 2px #AFAAAA;
-moz-box-shadow: 3px 3px 2px #AFAAAA;
}

#textoboton {
font-size:15pt;  /* Tamaño de la letra del botón */
position:absolute;
top:10px;
left:19px;
color:blue; /* Color del texto del botón */
}
Aquí están marcadas en verde todas las opciones de personalización que hay para el intro, tan sólo he explicado las más básicas, para no enrollar mucho el tema, pero cualquiera con una ligera idea de CSS podrías modificar todos los atributos a su gusto.

Si te funciono el truco o te gusta el post, un comentario se agradece.

32 comentarios:

  1. ami me da miedo abrir un sitio que no veo, ya que puede ocultar algo que no sea bueno me me gsute

    ResponderEliminar
  2. En realidad una vez te sale el intro si la pagina web tenía algo que ocultar (virus) ya se te infecto el ordenador, porque esto solo es una capa por encima del blog, y cuando le das al botón desaparece.
    Aunque claro supongo que tu no referirás a los virus... jajaja
    Es bueno, en internet hay que tener cuidado.

    ResponderEliminar
  3. tienes un enlace a tu pagina en mi blog de viajes en la zona de enlaces amigos
    un saludo

    ResponderEliminar
  4. Hola Ramon, muchas gracias por el enlace, enseguida te agrego entre los mios :)

    ResponderEliminar
  5. Los estilos debes añadirlos justo antes de:

    ]]>

    ResponderEliminar
  6. Perdon David es que en los comentarios no se puede comentar algunas partes de códigos, pero en la entrada ya añadí en que parte deben añadirse los estilos.
    Un saludo,
    Óliver.G

    ResponderEliminar
  7. Muy lindo efecto.La imagen con texto ya la hice y sale a la perfección.
    Un abrazo,Elsa

    ResponderEliminar
  8. Llevo un enlace de tu sitio a mi blog Actos Escolares. Allí hallarás el código para traer el mío.
    La dirección del blog es: http://actosescolareseempa.blogspot.com/
    Un saludo.

    ResponderEliminar
  9. Hola Elsa, me alegro mucho de que al final lograrás hacer que funcionara,
    Ahora mismo traigo ese banner al blog.
    Un saludo,
    Óliver.G

    ResponderEliminar
  10. Me parece interesante este efecto, el problema es la forma de introducirlo en el blog, ¿se podria colocar como si fuera un gadget?
    Saludos

    ResponderEliminar
  11. No lo siento Gilasanz, ya que si se introduce como gadjet solo se vería dentro del cuadro del gadjet, a no ser que aumentaras el tamaño del gadjet al 100% de la pantalla,
    Sinceramente, parece mucho más sencillo aplicarlo como explico en la entrada

    ResponderEliminar
  12. olle as un video tutoria mejor para entenderlo mas

    ResponderEliminar
  13. Hola WWW.BAINARD.TK, creo que queda bastante bien explicado, pero es que ahora no tengo apenas tiempo para llega a hacer un videotutorial.
    Tan solo debes pegar tres códigos y modificar lo que quieras.
    Un saludo,
    Óliver.G

    ResponderEliminar
  14. Espetacular!!!!!!!!!!!!!!!!!

    ResponderEliminar
  15. Me alegro de que te gustara Anónimo :)

    ResponderEliminar
  16. amigo podrias decirme en que archivo php encuentro la parte donde debo ubicar los estilos, ademas el intro no me funciona en la plantilla que uso de wordpress, en el header del tema lo ubique pero no funciona

    ResponderEliminar
  17. Hola Anónimo, la verdad es que wordpress nunca ha sido mi plataforma, pero los estilos nunca debes colocarlos en un archivo PHP, en todo caso en un archivo externo enlazado con la extensión .css, pero es más sencillo que introduzcas los estilos que ofrezco en el head del blog entre la seguientes lineas:
    <style>
    ...Aqui los estilos...
    </style>

    ResponderEliminar
  18. COOL!!!!! MUCHAS GRACIAS LO ESTABA BUSCANDO!! :)

    ResponderEliminar
  19. La Verdad Muy Bueno!! Me gustó y quedó bárbaro......, como se podría hacer para poner no un color de background sino un fondo propio?? Te pasaste!

    ResponderEliminar
  20. Holaa, no encontre ni el body ni el otro código más largo, me ayudas ? :(

    ResponderEliminar
  21. Hola Jerson e Ipal me alegro mucho de que os gustara y os sirviera, con respecto a lo del fondo propio, a que te refieres? a añadir una imagen nueva?
    claro que puedes, simplemente en la tercera parte(los estilos) donde pone:

    background:#26829E; /* Color de fondo del intro */

    cambialo por algo así:

    background: url(URL DE LA IMAGEN) repeat;

    En ocasiones necesitaras poner la URL de la imagen entre comillas y en otras no te hará falta, a mi me funciona sin comillas pero en otros blogs, supongo que por la plantilla no me ha funcionado sin comillas.

    ResponderEliminar
  22. Stephany, el problema reside en que tu ya has modificado la etiqueta body de la plantilla de tu blog:

    Si no me equivoco al visitar tu blog me salia algo así:

    <body oncontextmenu='return false;' onmousedown='return false;' onselectstart='return false;'

    ResponderEliminar
  23. se le puede cambiar el boton por una imagen?????????? yo quiero poner esta imagen.. sin boton o sea hacerle clik y que entre peor no se como :( no se si ponerselo a donde dice url de imagen o en entrar https://lh3.googleusercontent.com/-lHntRC1NOBI/TzPDqqqvrCI/AAAAAAAAAys/U8wQWuOtlyI/s706/ddd.png
    AYUDAME POR FAVOR DESDE ANOCHE QUE ESTOY CON ESTO!!!! MUCHAS GRACIAS

    ResponderEliminar
  24. Gracias, gracias... :D...

    Justo lo que necesitaba...
    Habia utilizado otros pero este me ha quedado a la medida...

    Excelente...

    Many Kisses :)

    ResponderEliminar
  25. Puse eldiseño default como vos lo pusiste en esta entrada para probarlo, apreto "enter" y se queda el fondo celeste, sin moverse nada.

    ResponderEliminar
  26. en mi blog no me va!!
    Donde lo pongo en plantilla html

    ResponderEliminar
  27. Si pudieras hacer un video explicandolo i esnseñandolo seria mucho mejor!!
    Gracias!!

    ResponderEliminar

Puedes comentar todo tipo de cosas, absteniéndote de:
- Realizar SPAM.
- Escribir insultos faltando al respeto de los demás usuarios.
Recuerda que en este blog, la moderación de comentarios está activada, así que piénsalo bien antes de enviar tu comentario si tiene algo "prohibido".