Este intro para el blog que les mostraré aunque es algo sencillo puede tener más elementos si asi lo desean, ya será a opción de cada cual, yo sólo le puesto una imagen de presentación y un botón para entrar. Y atención, que sólo se verá en la portada del blog para que no sea molesto para los lectores, así que cuando naveguen por las entradas o páginas del blog el intro no será visible. Puedes ver el demo en este blog de pruebas.
Ahora lo mas importante, primero entra en Plantilla | Edición de HTMl | Continuar y busca esta etiqueta:
<body>O si usas una plantilla del Diseñador de Plantillas de Blogger entonces busca esta línea:
<body expr:class='"loading" + data:blog.mobileClass'>
Justo debajo de cualquiera de una de ellas agrega lo siguiente:
<b:if cond='data:blog.url == data:blog.homepageUrl'>Y luego busca la etiqueta </body> y arriba de ella agrega esto:
<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;}
body#layout #Intro {display:none !important;}
</style>
<div id='Intro'>
<div style='margin-top:200px;'>
<!-- Inicio del contenido del intro -->
<img src='URL de la imagen'/>
<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>
<!-- Fin del contenido del intro -->
</div>
</div>
</b:if>
<div class='BlogOculto' id='BlogContenedor'>
</div>
Eso es todo, ahora sólo vamos a personalizarlo.
En el primer código que hemos agregado están señalados en color azul claro algunos aspectos como el color que tendrá el intro, el tamaño de letra del botón, color del botón, etc.
Luego, en donde dice URL de la imagen puedes poner la URL de alguna imagen de bienvenida o cualquier otra imagen. El texto del botón 'Entrar' puede cambiarse por cualquier otro, ahí lo he señalado, o bien, si lo deseas puedes reemplazar el botón por una imagen, sólo elimina el texto Entrar y en su lugar pon el código de una imagen:
<img src="URL de la imagen" />Si haces eso entonces deberás eliminar el borde y color de fondo del botón señalado en color verde.
Pero es Muy Importante que si cambias ese texto o si pones una imagen en su lugar NO modifiques el código amarillo que se encuentra alrededor.
Cualquier elemento que quiera agregarse al intro debe ir antes de donde dice Fin del contenido del intro o después de Inicio del contenido del intro. Regularmente los intros no tienen muchos elementos por cuestión de presentación, así que entre menos cosas tenga mejor.
En donde dice margin-top:200px es la distancia que tendrán los elementos del intro respecto a la parte superior de la pantalla, puede modificarse por otro valor.
De Apoco no es fácil?
Saludos.
No hay comentarios:
Publicar un comentario