Cuando es la primera vez piensas en hacer un blog seguro se te viene a la mente algo m?s del estilo p?gina Web con alg?n tipo de pantalla de bienvenida, pero luego descubres que una p?gina Web no es lo mismo que un blog, y aunque un blog tiene demasiados puntos positivos a favor de repente hay quien quiere usar estos elementos de las p?ginas Webs para su propio blog, tal es el caso de las pantallas de presentaci?n o intros.
Aunque hay muchos m�todos para ello algunos de estos requieren que se cree un documento html que ser? el se muestre como presentaci?n, sin embargo esto no es muy recomendable cuando se trata de posicionar el blog. As? que experimentando un poco dise?� un m�todo con el cu?l no usaremos p?ginas adicionales para no afectar el PageRank, y para evitar da?ar el posicionamiento o ser sancionados por Google no ocultaremos el contenido del blog, s?lo usaremos dos capas, una que es el contenido del blog le pondremos un z-index muy bajo, y otra que ser? el intro con otro z-index pero m?s alto, esto har? que los robots de Google puedan leer el contenido del blog sin problemas.
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='"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>
<div id='ElementosAudio'>
<iframe 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>
<div class='BlogOculto' id='BlogContenedor'>
</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 el c?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 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.
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?.
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?.
Y ahora s?, parece que es todo, que lo disfruten :)
No comments:
Post a Comment