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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-egKln_sGdqVQtsgTKiVjAji9iQbUM4AflUpw-3lP6T1ojbuW2TcCnOiGIPUS3Zr-3uQ1iKViJ6PI9zwVCvsodTxI4BKk7zeqQVXztGtagU3YbLmxzOiwbYtwo1J8FVqxDG_e-mXkD-Q_/'/>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-egKln_sGdqVQtsgTKiVjAji9iQbUM4AflUpw-3lP6T1ojbuW2TcCnOiGIPUS3Zr-3uQ1iKViJ6PI9zwVCvsodTxI4BKk7zeqQVXztGtagU3YbLmxzOiwbYtwo1J8FVqxDG_e-mXkD-Q_/'/>
Reemplazas lo que esta en azul por la URL de tu imagen.
Via/
Ciudad Blogger