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='"loading" + 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'><a href="javascript:void(0);" onClick="document.getElementById('BlogContenedor').className = 'quitarIntro', document.getElementById('Intro').className = 'entrar', document.getElementById('ElementosAudio').innerHTML = '', document.body.style.overflow='auto' ">Entrar</a></p><div id='ElementosAudio'>
<iframe allowfullscreen='' frameborder='0' height='0' src='http://www.youtube.com/v/XXXXXXX&autoplay=1&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
89 comentarios
Anonymous · julio 9, 2011 a las 3:47 am
no me salio u.u
que he hecho mal ?
se me hace que ha de ser el tamaño de la letra 🙁
Juvinao · julio 9, 2011 a las 3:41 pm
@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 :))
Priscila · mayo 21, 2012 a las 1:07 am
Holaaaaaaa, me podés ayudar con mi blog? Si serias tan amable, mi e-mail es priz_n@live.com.ar
Michel Abraham Ramos Soto · julio 9, 2011 a las 11:31 pm
no entendi
Juvinao · julio 10, 2011 a las 12:29 am
@Michel Abraham Ramos Soto Que no entendistes si todo esta muy claro :-/
Michel Abraham Ramos Soto · julio 10, 2011 a las 12:47 am
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?
Juvinao · julio 10, 2011 a las 1:35 am
@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.
Michel Abraham Ramos Soto · julio 10, 2011 a las 6:32 pm
@Juvinao entiendo entiendo solo un poco novato en esto grax!
Juvinao · julio 11, 2011 a las 12:27 am
@Michel Abraham Ramos Soto Ok no te preocupes para enseñar estamos,saludos.
vigilantes2020seguridad · julio 12, 2011 a las 2:08 pm
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
Juvinao · julio 12, 2011 a las 3:20 pm
@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.
Perdida bajo la superficie. · julio 31, 2011 a las 8:49 pm
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 ?
Juvinao · julio 31, 2011 a las 9:58 pm
@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-(
Annnn · agosto 9, 2011 a las 10:42 pm
No entiendo como poner una imagen mia ? ocea, quiero reemplazar lo de bienvenidos por una imagen, como hago?:/
roccìo. · agosto 11, 2011 a las 6:11 pm
Una pregunta el «inicio del contenido del intro » que esta en azul se pone ?
Juvinao · agosto 11, 2011 a las 7:09 pm
@roccìo. Pon el codigo tal cual esta asi no tendras ningun problema 🙂
Chiknaui.Mikistli · agosto 16, 2011 a las 4:37 am
Hola de nuevo, pero en la intro se puede poner un SWF?
saludos que andes bien
thebam · agosto 16, 2011 a las 12:22 pm
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
Juvinao · agosto 16, 2011 a las 1:59 pm
@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…
Juvinao · agosto 16, 2011 a las 1:59 pm
@thebam no puedes poner un video ya que es formato flas,reemplazalo por una imagen.
For the heart i once had · agosto 22, 2011 a las 7:59 pm
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?
Juvinao · agosto 23, 2011 a las 3:08 am
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 🙂
Leandro Jam · septiembre 13, 2011 a las 4:51 pm
no me salio =( > Ahora solo me muetra la pagina de intro y los otros post ocultos atras de ella
Juvinao · septiembre 13, 2011 a las 7:33 pm
Leandro Jam no se porque no te sirve,el truco funciona muy bien 😮
Nicolas · septiembre 24, 2011 a las 12:34 am
que codigo hay que pegar y en donde
Juvinao · septiembre 24, 2011 a las 1:22 pm
Nicolas no entiendo tu pregunta.
Sasha · septiembre 24, 2011 a las 9:22 pm
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
Juvinao · septiembre 25, 2011 a las 2:01 pm
Sasha en cual de tus blogs aplicaste el tutorial? :S
Sasha · septiembre 25, 2011 a las 4:07 pm
En mi blog de pruebas :3
Juvinao · septiembre 25, 2011 a las 4:18 pm
Sasha tienes razon no se ve en la pantalla completa bueno poes revisare cual es el problema ok y mas luego te comento :O
Sasha · septiembre 25, 2011 a las 4:30 pm
Talvez sean por las medidas de la imagen? :I ? o algo asi? :I
Juvinao · septiembre 25, 2011 a las 6:39 pm
Sasha todavia no he encontrado alguna solucion :I
Joswa Chacon · octubre 18, 2011 a las 2:17 pm
Gracias Hermano!
Juvinao · octubre 18, 2011 a las 3:49 pm
Joswa Chacon de nada amigo
Ellery&Kira + Louki♥! · noviembre 30, 2011 a las 4:06 pm
oye yo hize todo bien & si me salio pero desaparecio mi barra de desplazamiento D:
Juvinao · noviembre 30, 2011 a las 4:26 pm
Ellery&Kira + Louki♥! no se que puedes ser porque el tuto funciona muy bien
☜♥☞Paula☜♥☞ · diciembre 19, 2011 a las 11:33 am
Parece muy chulo eso , pero no se hacer ni el 1 paso xDD , no encuentro lo de body.
AMISTOWEER · marzo 12, 2012 a las 6:10 am
jaja me pasa igual hace dos dias ke estoy buscando a body xd xd
☜♥☞Paula☜♥☞ · diciembre 19, 2011 a las 12:20 pm
Ah ya se como encontrarlo xD , Pro iwalmente no me sale :/
☜♥☞Paula☜♥☞ · diciembre 19, 2011 a las 12:25 pm
Me dice «Se ha encontrado más de un artilugio con el ID: HTML7. Los ID de artilugio deben ser exclusivos.
Error 500″
Eliana Maimo · diciembre 21, 2011 a las 3:16 am
Este comentario ha sido eliminado por el autor.
Eliana Maimo · diciembre 21, 2011 a las 3:18 am
me pasa cuando quiero cambiar la imagen de «Bienvenido», osea me anda con el Bienvenido pero no con otras imagenes…
Juvinao · diciembre 22, 2011 a las 7:59 pm
☜♥☞Paula☜♥☞ y Eliana Maimo el truco funciona muy bien pero para mas informacion comuniquense con el creador del tutorial que es el Potro (ciudadblogger)
Angie · enero 24, 2012 a las 6:05 pm
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? :/
Juvinao · enero 24, 2012 a las 6:13 pm
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.
Angie · enero 24, 2012 a las 7:31 pm
Bueno ahora me vuelvo a fijar, gracias 🙂
Anonymous · enero 24, 2012 a las 9:47 pm
como se hace para que el intro solo salga una vez por ip ?
`·.·•¤ Angie ¤•·.·´ · enero 25, 2012 a las 10:13 pm
Me sigue apareciendo lo mismo, que puedo hacer? Que plantilla tengo que usar?
Juvinao · enero 26, 2012 a las 7:32 pm
Te digo que yo revise el tutorial hace poco y sale muy bien te recomiendo que cambies de plantilla.
Anonymous · enero 27, 2012 a las 4:18 pm
está todo claro!! me salió bienn!! y hasta se puede poner un gif!!!! graciasssssss
Juvinao · enero 27, 2012 a las 5:45 pm
Gracias a ti por comentar,ojala a los demas les sirva tambien,Saludos. 😀
hola · febrero 4, 2012 a las 4:24 pm
hola, a mi no me sale lo de entrar, me salen unos codigos, miren mi blog http://holaarturo.blogspot.com/, porque pasa? 🙁
Juvinao · febrero 4, 2012 a las 5:20 pm
Pues yo no veo nada en tu blog. :zombie:
julio lipez · febrero 4, 2012 a las 10:52 pm
Nos la puedes poner exa ya con todo solo copiar y pegar porfavor XDDD
Juvinao · febrero 5, 2012 a las 12:49 am
Mira julio lo que te recomiendo es que cambies tu plantilla porque por lo general son errores en las plantillas.
AMISTOWEER · marzo 12, 2012 a las 6:13 am
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 .
Juvinao · marzo 12, 2012 a las 3:13 pm
AMISTOWEER tienes que poner esta etiqueta para que el truco cierre bien ya que esta es una etiqueta de cierre.
Eva92 · marzo 12, 2012 a las 7:31 pm
lo pongo tal cual y me dice que tengo que terminar de editar :S
Juvinao · marzo 12, 2012 a las 8:20 pm
Eva92 como he dicho el principal problema es que este truco no es compatible con todas las plantillas 😥
Jorges Sandoval · marzo 14, 2012 a las 4:48 pm
como elimino el mensaje de intro de bienvenida?
Juvinao · marzo 15, 2012 a las 3:39 pm
Elimina la imagen aca te dejo la URL para que la busques y la borres.
https://lh5.googleusercontent.com/_dsEG33PDaHw/Tb46olrY5BI/AAAAAAAABWo/4vkghvGatUI/bienvenido2.gif
sophie · abril 8, 2012 a las 12:47 am
Hola..muchas gracias!!!! me salió pero abajo de la intro me aparece el video de la última publicación…qué puedo hacer?
sophie · abril 8, 2012 a las 12:53 am
http://jonasbbiggestfans.blogspot.com.ar/
Juvinao · abril 8, 2012 a las 12:54 am
sophie dejame la URL de tu blog para mirar cual es el problema.:haaa:
sophie · abril 8, 2012 a las 12:54 am
Este comentario ha sido eliminado por el autor.
Priscila · mayo 21, 2012 a las 1:21 am
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.
Anonymous · junio 16, 2012 a las 6:12 pm
no lo entiendo:/
etiqueta body?
Juvinao · junio 23, 2012 a las 7:37 pm
Debes buscar esa etiqueta y poner debajo de ella el resto del codigo.
Anonymous · julio 12, 2012 a las 3:38 am
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.
Anonymous · julio 12, 2012 a las 3:29 am
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
Juvinao · julio 12, 2012 a las 8:23 pm
Lo estas aplicando en un blog de Blogger? :zombie:
El Barón Cervecero · julio 12, 2012 a las 4:13 pm
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.
Juvinao · julio 12, 2012 a las 8:22 pm
Revisa la plantilla de tu blog y dime si agregastes recientemente algun script que pueda hacer interferencia.
Eve Ohana · agosto 13, 2012 a las 12:16 am
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?
Alison Shanick · agosto 30, 2012 a las 4:03 am
HOla, consulta, se puede agregar un flash slv o swf en vez de la imagen? de poder como es el codigo, Gracias.
Juvinao · agosto 30, 2012 a las 3:44 pm
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.
Alison Shanick · agosto 30, 2012 a las 10:32 pm
Awwwwwwwww muchas Gracias por tu respuesta ♥.
Juvinao · agosto 30, 2012 a las 11:49 pm
De nada Alison,para ayudar estamos :zombie:
Alison Shanick · septiembre 6, 2012 a las 12:41 am
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 😕
Juvinao · septiembre 9, 2012 a las 12:20 am
Alison creo que este te puede servir…
http://www.miltrucosblogger.info/2011/04/leer-mas-con-imagen-en-miniatura.html
Erick Vásquez · noviembre 4, 2012 a las 6:55 pm
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?
Juvinao · noviembre 5, 2012 a las 9:32 pm
Erick pidele soporte al autor del truco.
http://ciudadblogger.com/2011/05/crear-un-intro-para-el-blog.html
Saludos Erick 😛
eLIAS M · febrero 27, 2013 a las 1:15 am
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.
Hayder Juvinao · febrero 27, 2013 a las 8:07 pm
Elias en eso tienes razon.
Gracias por comentar 🙂
Anonymous · abril 20, 2013 a las 7:10 am
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
Megapcjuegos · diciembre 11, 2013 a las 2:36 pm
Me pregunto como poner este tipo de emoticones
Annabella Giovannetti · marzo 7, 2014 a las 9:41 pm
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)?
Sergio Ravello Carranza · agosto 25, 2014 a las 6:50 am
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/
ahmed · septiembre 13, 2014 a las 12:35 am
sale mucha publicidad es normal???