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
Demostracoin online: http://ciudadblogger11.blogspot.com/
Ahora veamos cómo ponerlo, primero entra en Diseño | Edición de HTMl y busca esta etiqueta:
dijo:<body>
O si usas una plantilla del Diseñador de Plantillas de Blogger entonces busca esta línea:
dijo:<body expr:class='"loading" + data:blog.mobileClass'>
Justo debajo de cualquiera de una de ellas agrega lo siguiente:
dijo:
<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='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 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'>
Bueno si se ve esto: eske se puso la carita del guiño solo cuando copienpongan como si escrivieras el guiño jejejeje
FUENTE: