martes, 6 de diciembre de 2011

Crear intro para blog

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6r3-j0qbfX55woPFS4clOjYEdicLWi0GSJAs-HSflicjX21lo2vhCEg0NBIfMiCsf_taZOCCepI5j9lco3CGyvQetOERiyLTquInr0T2Wp1KhuMN9-LkdKXRcuq4h532ZmQupLheL3rqD/'/>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6r3-j0qbfX55woPFS4clOjYEdicLWi0GSJAs-HSflicjX21lo2vhCEg0NBIfMiCsf_taZOCCepI5j9lco3CGyvQetOERiyLTquInr0T2Wp1KhuMN9-LkdKXRcuq4h532ZmQupLheL3rqD/'/>
Reemplazas lo que esta en azul por la URL de tu imagen. 


De: http://ciudadblogger.com

No hay comentarios:

Publicar un comentario

Related Posts Plugin for WordPress, Blogger...