Mil Trucos Blogger

Crear un intro para el blog

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
11

Un intro es una pantalla de bienvenida o presentacion que se desplega apenas abrimos el blog,aunque es un elemento tipico de una pagina web se puede adaptar muy bien para Blogger y justo eso es lo que les quiero presentar hoy.

El intro se ve de la siguiente manera:

Para agregarlo vamos a Diseño,Edicion HTML y buscas la etiqueta 

<body>

Si utilizas una plantilla del Diseñador de plantillas de Blogger busca lo siguiente:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Debajo de el codigo anterior (depende de cual sea tu caso) pega lo siguiente.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
body {margin:0; padding:0; overflow:hidden;}
.entrar, #navbar-iframe, .navbar {display:none;}
.BlogOculto {z-index:-100;} #Intro {z-index:5000;}
#Intro {text-align:center;
background:#000; /* Color de fondo de la pantalla */
position:absolute;
width:100%;
height:100%;
overflow-x:hidden;
}
p.btnEntrar a {
font-size: 16px; /* Tamaño de la letra del botón */
font-style: italic;
font-weight: bold;
text-decoration: none;
color: #1C1C1C; /* Color de la letra del botón */
background: #ccc; /* Color de fondo del botón */
padding: 6px;
border: 1px solid #2E2E2E; /* Color del borde del botón */
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
p.btnEntrar a:hover {position:relative; top:1px; left:1px;}
</style>

<div id='Intro'>
<div style='margin-top:200px;'>
<!-- Inicio del contenido del intro -->

<img src='https://lh5.googleusercontent.com/_dsEG33PDaHw/Tb46olrY5BI/AAAAAAAABWo/4vkghvGatUI/bienvenido2.gif'/>
<p class='btnEntrar'>&lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;document.getElementById(&#39;BlogContenedor&#39;).className = &#39;quitarIntro&#39;, document.getElementById(&#39;Intro&#39;).className = &#39;entrar&#39;, document.getElementById(&#39;ElementosAudio&#39;).innerHTML = &#39;&#39;, document.body.style.overflow=&#39;auto&#39; &quot;&gt;Entrar&lt;/a&gt;</p>

<div id='ElementosAudio'>
<iframe allowfullscreen='' frameborder='0' height='0' src='http://www.youtube.com/v/XXXXXXX&amp;autoplay=1&amp;loop=1' width='0'/>
</div>

<!-- Fin del contenido del intro -->
</div>
</div>
</b:if>

<span class='BlogOculto' id='BlogContenedor'>

Ahora buscas la etiqueta </body> y arriba de ella agrega esto:

</span>

Por ultimo guardas.

Puedes cambiar la imagen de “Bienvenido” que aparece en el intro en la siguiente parte.

<img src='https://lh5.googleusercontent.com/_dsEG33PDaHw/Tb46olrY5BI/AAAAAAAABWo/4vkghvGatUI/bienvenido2.gif'/>

Reemplazas lo que esta en azul por la URL de tu imagen.

Vía/Ciudad Blogger

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
11

89 Comentarios

  1. Anonymous Anonymous
    Julio 9, 2011    

    no me salio u.u
    que he hecho mal ?
    se me hace que ha de ser el tamaño de la letra 🙁

  2. Julio 9, 2011    

    @Anónimo Men lo que pasaba era que por solo una coma que habia puesto mal el truco dejaba de funcionar pero ya lo arregle asi que ya funciona muy bien,gracias por avisar :))

  3. Julio 9, 2011    

    no entendi

  4. Julio 10, 2011    

    @Michel Abraham Ramos Soto Que no entendistes si todo esta muy claro :-/

  5. Julio 10, 2011    

    esq mira #Intro {text-align:center;
    background:#000; /* Color de fondo de la pantalla */
    position:absolute;
    width:100%;
    height:100%;
    overflow-x:hidden;
    }
    p.btnEntrar a {
    font-size: 16px; /* Tamaño de la letra del botón */
    font-style: italic;
    font-weight: bold;
    text-decoration: none;
    color: #1C1C1C; /* Color de la letra del botón */
    background: #ccc; /* Color de fondo del botón */
    padding: 6px;
    border: 1px solid #2E2E2E; /* Color del borde del botón */
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px; lo verde no se q poner por ejemplo 1 2 3 o q?

  6. Julio 10, 2011    

    @Michel Abraham Ramos Soto Dejalo tal cual esta el codigo y el truco quedara como lo muestra la imagen,esos items son para personalizarlos pero para eso debes tener conocimientos en HTML.

  7. Julio 10, 2011    

    @Juvinao entiendo entiendo solo un poco novato en esto grax!

  8. Julio 11, 2011    

    @Michel Abraham Ramos Soto Ok no te preocupes para enseñar estamos,saludos.

  9. Julio 12, 2011    

    me puedes ayudar por favor al poner los codigos sale lo de bienvenidos bien el problema a sido que me ha desaparecido la barra de menu de blogger y no puedo acceder a meter noticias gracias por tu ayuda saludos

  10. Julio 12, 2011    

    @vigilantes2020seguridad Pues mira esa barra no es muy util si quieres agregar una entrada a tu blog entra al escritorio de Blogger y desde alli añade tu entrada,pero si quieres que aparezca de nuevo dejame tu plantilla y yo te arreglo el problema.

  11. Julio 31, 2011    

    No entiendo lo de la imagen, va no me sale, que tengo que poner una imagen que diga bienvenidos y entrar ? (por ejemplo) y listo ?

  12. Julio 31, 2011    

    @Perdida bajo la superficie. El truco funciona muy bien y con respecto a la imagen,es a decision personal por si la quieres cambiar o no b-(

  13. Agosto 9, 2011    

    No entiendo como poner una imagen mia ? ocea, quiero reemplazar lo de bienvenidos por una imagen, como hago?:/

  14. Agosto 11, 2011    

    Una pregunta el “inicio del contenido del intro ” que esta en azul se pone ?

  15. Agosto 11, 2011    

    @roccìo. Pon el codigo tal cual esta asi no tendras ningun problema 🙂

  16. Agosto 16, 2011    

    Hola de nuevo, pero en la intro se puede poner un SWF?
    saludos que andes bien

  17. Agosto 16, 2011    

    oye yo quiero poner un video de youtube y me da error algien me puede ayudar k tengo meses tratando hacerle la intro a mi blogger y aun no e e consegido nada y cuando pongo estos codigos me da error

  18. Agosto 16, 2011    

    @Chiknaui.Mikistli no puedes poner poner un SWF ya que no es una imagen,pero puedes reemplazar la imagen de bienvenidos por otra pero en formato GIF,PNG JPG…

  19. Agosto 16, 2011    

    @thebam no puedes poner un video ya que es formato flas,reemplazalo por una imagen.

  20. Agosto 22, 2011    

    No me sale, y me aparece esto, 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 “html” must be terminated by the matching end-tag “”. Me podrás ayudar?

  21. Agosto 23, 2011    

    For the heart i once had con lo que te puedo ayudar es diciendote que repitas los pasos con calma y mires donde fue el error 🙂

  22. Septiembre 13, 2011    

    no me salio =( > Ahora solo me muetra la pagina de intro y los otros post ocultos atras de ella

  23. Septiembre 13, 2011    

    Leandro Jam no se porque no te sirve,el truco funciona muy bien 😮

  24. Septiembre 24, 2011    

    que codigo hay que pegar y en donde

  25. Septiembre 24, 2011    

    Nicolas no entiendo tu pregunta.

  26. Septiembre 24, 2011    

    Holas el truco me funciono mas o menos porque no cubre toda la pantalla y se nota una parte de mi blog, pero yo hise todo igualito, me dices que me fallo? porfavor!!! Por cierto me encanta tu pagina me ayudo muchisimo :3

  27. Septiembre 25, 2011    

    Sasha en cual de tus blogs aplicaste el tutorial? :S

  28. Septiembre 25, 2011    

    En mi blog de pruebas :3

  29. Septiembre 25, 2011    

    Sasha tienes razon no se ve en la pantalla completa bueno poes revisare cual es el problema ok y mas luego te comento :O

  30. Septiembre 25, 2011    

    Talvez sean por las medidas de la imagen? :I ? o algo asi? :I

  31. Septiembre 25, 2011    

    Sasha todavia no he encontrado alguna solucion :I

  32. Octubre 18, 2011    

    Gracias Hermano!

  33. Octubre 18, 2011    

    Joswa Chacon de nada amigo

  34. Noviembre 30, 2011    

    oye yo hize todo bien & si me salio pero desaparecio mi barra de desplazamiento D:

  35. Noviembre 30, 2011    

    Ellery&Kira + Louki♥! no se que puedes ser porque el tuto funciona muy bien

  36. Diciembre 19, 2011    

    Parece muy chulo eso , pero no se hacer ni el 1 paso xDD , no encuentro lo de body.

    • Marzo 12, 2012    

      jaja me pasa igual hace dos dias ke estoy buscando a body xd xd

  37. Diciembre 19, 2011    

    Ah ya se como encontrarlo xD , Pro iwalmente no me sale :/

  38. Diciembre 19, 2011    

    Me dice “Se ha encontrado más de un artilugio con el ID: HTML7. Los ID de artilugio deben ser exclusivos.

    Error 500″

  39. Diciembre 21, 2011    

    Este comentario ha sido eliminado por el autor.

  40. Diciembre 21, 2011    

    me pasa cuando quiero cambiar la imagen de “Bienvenido”, osea me anda con el Bienvenido pero no con otras imagenes…

  41. Diciembre 22, 2011    

    ☜♥☞Paula☜♥☞ y Eliana Maimo el truco funciona muy bien pero para mas informacion comuniquense con el creador del tutorial que es el Potro (ciudadblogger)

  42. Enero 24, 2012    

    Cuando quiero guardar la plantilla me aparece esto:
    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 reference to entity “set” must end with the ‘;’ delimiter.

    Que tengo que hacer? :/

    • Enero 24, 2012    

      Mira bien porque puede ser un error de la plantilla,acabo de probar los codigos en un blog de pruebas y funciona a la marravilla.

  43. Enero 24, 2012    

    Bueno ahora me vuelvo a fijar, gracias 🙂

  44. Anonymous Anonymous
    Enero 24, 2012    

    como se hace para que el intro solo salga una vez por ip ?

  45. Enero 25, 2012    

    Me sigue apareciendo lo mismo, que puedo hacer? Que plantilla tengo que usar?

    • Enero 26, 2012    

      Te digo que yo revise el tutorial hace poco y sale muy bien te recomiendo que cambies de plantilla.

  46. Anonymous Anonymous
    Enero 27, 2012    

    está todo claro!! me salió bienn!! y hasta se puede poner un gif!!!! graciasssssss

    • Enero 27, 2012    

      Gracias a ti por comentar,ojala a los demas les sirva tambien,Saludos. 😀

  47. Febrero 4, 2012    

    hola, a mi no me sale lo de entrar, me salen unos codigos, miren mi blog http://holaarturo.blogspot.com/, porque pasa? 🙁

    • Febrero 4, 2012    

      Pues yo no veo nada en tu blog. :zombie:

  48. Febrero 4, 2012    

    Nos la puedes poner exa ya con todo solo copiar y pegar porfavor XDDD

    • Febrero 5, 2012    

      Mira julio lo que te recomiendo es que cambies tu plantilla porque por lo general son errores en las plantillas.

  49. Marzo 12, 2012    

    no encuentro a budy … hice todo y no se para que sirve budy…diganme donde lo encuentro y para que tengo que cambia esa etiqueta .

    • Marzo 12, 2012    

      AMISTOWEER tienes que poner esta etiqueta para que el truco cierre bien ya que esta es una etiqueta de cierre.

  50. Marzo 12, 2012    

    lo pongo tal cual y me dice que tengo que terminar de editar :S

    • Marzo 12, 2012    

      Eva92 como he dicho el principal problema es que este truco no es compatible con todas las plantillas 😥

  51. Marzo 14, 2012    

    como elimino el mensaje de intro de bienvenida?

  52. Abril 8, 2012    

    Hola..muchas gracias!!!! me salió pero abajo de la intro me aparece el video de la última publicación…qué puedo hacer?

  53. Mayo 21, 2012    

    No me sale, me dice esto :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 “
    Me gustaría si fueras tan amable de ayudarme, que te contactes conmigo por favor. Mi e-mal es prizn@live.com.ar Por favor. Muchísimas gracias.

  54. Anonymous Anonymous
    Junio 16, 2012    

    no lo entiendo:/
    etiqueta body?

    • Junio 23, 2012    

      Debes buscar esa etiqueta y poner debajo de ella el resto del codigo.

    • Anonymous Anonymous
      Julio 12, 2012    

      Esa etiqueta de “<-p->” y la de referencia “<-a->” puedes decirme como seria convertida por que segun entiendo tiene caracteristicas especiales de html por ejemplo “<” es “<” trate de hacer una traduccion para que jale en mi documento pero aparece el boton pero no ejecuta el script.Ayudame si puedes de antemano gracias carnal.

  55. Anonymous Anonymous
    Julio 12, 2012    

    Una duda muy urgente el boton no me aparece y no ejecuta la acccion solo en la pantalla negra aparece como un texto
    f=”javascript:void(0);” onClick=”document.getElementById(‘BlogContenedor’).className = ‘quitarIntro’, document.getElementById(‘Intro’).className = ‘entrar’, document.getElementById, la verdad estoy lo estoy aplicando a mi pagina web en php pero tambien tiene html cual es el problema

    • Julio 12, 2012    

      Lo estas aplicando en un blog de Blogger? :zombie:

  56. Julio 12, 2012    

    Estimado, me resultó muy bien el intro en mi blog pero tengo un problema ya que mi blog cuenta con un menu de 3 opciones y la primera es la de “inicio”, después de pasar el intro llega a mi blog y su pagina principal el cual pertenece a “inicio” pero si presiono la pestaña de “inicio” vuelve al intro… Como solucionar eso y que intro aparezca solo cuando se entra al blog?

    Saludos.

    • Julio 12, 2012    

      Revisa la plantilla de tu blog y dime si agregastes recientemente algun script que pueda hacer interferencia.

  57. Agosto 13, 2012    

    Hola bueno yo escribía porque tengo el problema de que tras pegar y editar el código, a la hora de encontrar < /body> no me aparece.
    ¿Me podrías ayudar?

  58. Agosto 30, 2012    

    HOla, consulta, se puede agregar un flash slv o swf en vez de la imagen? de poder como es el codigo, Gracias.

    • Agosto 30, 2012    

      Alison mira borra el siguiente codigo:

      <iframe allowfullscreen=” frameborder=’0′ height=’0′ src=’http://www.youtube.com/v/XXXXXXX&autoplay=1&loop=1′ width=’0’/>

      Y en su lugar pon el código del SWF. Pero ojo, que sólo debe eliminarse lo que está en color gris.

  59. Agosto 30, 2012    

    Awwwwwwwww muchas Gracias por tu respuesta ♥.

    • Agosto 30, 2012    

      De nada Alison,para ayudar estamos :zombie:

  60. Septiembre 6, 2012    

    Huy Perdon que te moleste, consulta? Tendras algun tutorial sobre readmore y poder aplicarlo solo en etiquetas? Gracias y perdon es que no encontre el buscador 😕

  61. Noviembre 4, 2012    

    No puedo me sale este error Juvinao Error al analizar XML, línea 2676, columna 3: The element type “span” must be terminated by the matching end-tag “”.

    Que puedo hacer?

  62. Febrero 27, 2013    

    ESTE INTRO, TIENE SU PARTE NEGATIVO, Y ES QUE CADA VEZ QUE UN USUARIO HACE CLIC AL MENU DE INICIO, PARA REGRESAR A LA PORTADA PRINCIPAL, VUELVE Y SALE EN INTRO, ESO SERIA MOLESTOSO, Y PERDERIA EL ATRACTIVO.

    • Febrero 27, 2013    

      Elias en eso tienes razon.

      Gracias por comentar 🙂

  63. Anonymous Anonymous
    Abril 20, 2013    

    ANGEL:
    hola no me funciono tan bien esque al probar me sale la imagen de bienvenida pero no me sale es voton de entrar que hice mal porfavor ayudame

  64. Diciembre 11, 2013    

    Me pregunto como poner este tipo de emoticones

  65. Marzo 7, 2014    

    Me preguntaba, hay manera de poner dos botones? Por ejemplo en mi blog yo escribo Fanfics y novelas, y quiero separarlas. por ejemplo que aparezca una flecha hacia la derecha y diga “Fanfics” y otra fecha a la izquierda que diga “Novelas” ¿es posible con este codigo? o sería mejor con una página estática (leí por ahí que se podía hacer con esta también)?

  66. Agosto 25, 2014    

    Mi consulta es como podria agregar un intro mio
    que esta hecho con codigo html
    en este blog en blanco lo puse como muestra , pero el codigo lo poseo yo
    http://intronexoanime.blogspot.com/

  67. ahmed ahmed
    Septiembre 13, 2014    

    sale mucha publicidad es normal???

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo