CREAR INTRO EN BLOGGER

CREAR INTRO EN BLOGGER

Este intro para el blog aunque es algo sencillo puede tener más elementos si lo desean, ya será a opción de cada quien, yo por lo pronto sólo le puesto una imagen de presentación, un botón para entrar y música de fondo. 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 veamos cómo ponerlo, primero entra en Diseño | Edición de HTMl 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='&quot;loading&quot; + data:blog.mobileClass'>

Justo debajo de cualquiera de una de ellas agrega 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;}
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'>&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 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>

<div class='BlogOculto' id='BlogContenedor'>
Y luego busca la etiqueta </body> y arriba de ella agrega esto:
</div>
¿Es todo? Sí, eso es todo, ahora sólo vamos a personalizarlo.
En el primer código que hemos agregado están señalados en color verde 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 la imagen del logotipo de tu blog, alguna imagen de bienvenida o cualquier otra imagen. El texto del botón 'Entrar' puede cambiarse por cualquier otro, ahí lo he señalado en negrita, 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 elcódigo púrpura que se encuentra alrededor.

Cualquier elemento que quiera agregarse al intro debe ir antes de donde dice Fin del contenido del intro odespué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.

Yo le he puesto una música de fondo utilizando un video de YouTube sólo que le he puesto en ceros los valores de alto y ancho para que el reproductor sea invisible. Si deseas poner también una música de fondo entonces cambia las XXXXXXX por la ID del video que quieres poner.
Si quisieras poner un archivo en flash SWF quita el código del reproductor (sólo lo gris) y en su lugar pon el código del SWF. Pero ojo, que sólo debe eliminarse lo que está en color gris.
Si no deseas poner audio, ni tampoco un archivo en flash puedes eliminar el código gris o dejarlo como está.

Si tu blog tiene música que se reproduce al entrar al blog te recomiendo que le quites el autoplay, de lo contrario también se escuchará en el intro del blog. De igual forma, si tienes un video o gadget en flash en las entradas o dentro de la plantilla tendrás que seguir los pasos de esta entrada para que el video o gadget no se sobreponga.

Y ahora sí, parece que es todo, que lo disfruten :)

Busqueda