Blogger. Página estática como portada del blog.

Este es un sistema que nos permitirá crear una portada para el blog de una forma sencilla, sin necesidad de editar siquiera la plantilla.

El truco está en redireccionar al visitante que acceda mediante la dirección principal del blog a una página estática. En ella podremos poner el contenido que nos parezca, pero el sentido de hacer esto sería el de convertirla en una especie de portada o frontal del blog.

Además de no ser necesario editar la plantilla, el hecho de que usemos una página como lugar de aterrizaje nos permitirá convertir el blog en una especie de web con secciones fijas (el resto de páginas estáticas) y mantener el acceso al blog normal como si fuera un apartado más de esa web. Todo ello sin salir de nuestro subdominio. Enlazado en esta imagen podéis ver un ejemplo.

El invento no es de un servidor, sino de Blogger Tips Pro quién además ha hecho pruebas para ver la forma en que Google indexa esa página redirigida, con resultados satisfactorios. Así que prácticamente sólo os solucionaré el trabajo de traducir el texto y las capturas de pantalla.

Los pasos a seguir son los siguientes:

Añadimos una página estática para nuestro nuevo Inicio

Accedemos al escritorio y en apartado Páginas seleccionamos Página nueva > Página en Blanco.

A la página la titularemos como Inicio o cualquier otra denominación similar que se nos antoje, excepto el nombre que estemos usando para la actual página de inicio, que en el ejemplo es la que viene por defecto en Blogger (Página principal).

En está será dónde pondremos todo lo que queremos que se vea en la página de aterrizaje, pero de momento y por seguir la explicación, podemos incluir cualquier texto, que luego ya la confeccionaremos a nuestro gusto.

Hechas ambas cosas la publicaremos.

Ahora vemos en nuestra lista de páginas al menos estas dos citadas, la que teníamos originalmente (Página principal) y la nueva creada (Inicio). Si teníamos más páginas también se verán en la lista y quizás sea un buen momento para reordenarlas poniendo la nueva creada (Inicio) al principio. Da igual que esté la primera o la segunda porque luego ocultaremos la pre-existente (Página principal).

Si reordenamos habrá que pinchar arriba a la derecha para que los cambios se salven.

Añadimos otra página que nos servirá como enlace al blog

Como lo que se pretende es que cuando accedamos a la dirección principal de nuestro sitio acabemos en la portada y desde ahí no se verá el blog en sí mismo, tenemos que habilitar una manera de que nuestros visitantes puedan acceder y esto será con un enlace. Este enlace lo incorporaremos a nuestro menú como otra página. Esta será del tipo Dirección web y la dirección en cuestión tiene que ser forzosamente la de nuestro blog más index.html.

Cuando se abre la ventana emergente de rigor, en el primer casillero escribiremos Blog y en la segunda la dirección en la forma antes expresada: http://DIRECCION-BLOG/index.html.

Como no es la primera vez que me pasa, insisto en que en lugar de DIRECCION-BLOG hay que poner vuestra propia dirección.

Tras Guardar observaremos que ya tenemos tres páginas, Página principal, Inicio y Blog, siempre siguiendo el ejemplo.

Lo podemos hacer más tarde, pero creo que es el momento de mostrar nuestras pestañas del menú de páginas que estamos modificando asegurándonos de que NO tenemos la opción para Mostrar páginas en situación de No mostrar. Tenemos que seleccionar Pestañas principales o Enlaces laterales.

Redireccionar la Página principal por defecto a la nueva Inicio

Ahora viene el paso clave del truco y el único con el que tendremos que tener algo más de cuidado. Se trata de aplicar una redirección para que cuando se acceda a la dirección principal de nuestro blog, automáticamente se nos lleve a la portada que hemos creado (Inicio).

Para ello entramos en la sección Preferencias para motores de búsqueda y en Redireccionamiento personalizado pinchamos en Editar.

Aquí tenemos que marcar las dos casillas de verificación que hay (De: http://... y Permanente) y lo más importante, teclear en el primer casillero una simple barra (/) y en el el segundo la dirección de la nueva página de Inicio antes creada.

Sólo es necesario incluir a partir de la primera barra de la dirección. Esto es que si nuestra página es http://nombre.blogspot.com y la página nueva http://nombre.blogspot.com/p/inicio.html, lo único que hay que teclear es /p/inicio.html.

Repasamos que todo esté como en la captura y pinchamos primero en el pequeño enlace Guardar bajo Permanente y luego en el botón naranja .

Ocultar Página principal original

Por último lo que haremos será esconder el enlace del menú de páginas primitivo que teníamos y que ahora no servirá para nada porque nos llevará al mismo sitio que el nuevo Inicio, es decir, a la página estática que usaremos como portada.

Para eso nos vamos ahora a Diseño y desde allí editamos el gadget de Páginas.

Otra ventanita emergente, pero aquí sólo hay que desmarcar la casilla de Página principal. En el bloque de la derecha veremos que desaparece esa página. y le damos más abajo a Guardar para terminar.

Ya que estamos aquí, si queréis cambiar el orden en que esas páginas saldrán en el menú sólo es cuestión de pinchar el bloque correspondiente y moverlo de sitio.

Y tranquilos, que no hemos borrado esa página. Sólo la hemos ocultado. Si volvemos al apartado Páginas comprobaremos que esta aparece ahora en un bloque inferior al que vimos antes, con el título Oculto.

Construir nuestra portada

Esta ya es la parte creativa y no puedo detallar qué es lo que se podría hacer aquí, pero sí puedo hacer un resumen: TODO.

Pensad que es una página estática y que se puede incluir cualquier cosa: texto, imágenes, marcas HTML, vídeos, etc.

Incluso podemos añadir directamente CSS entre etiquetas STYLE y el estilo sólo afectará a esta página.

Con eso podemos por ejemplo ocultar la sidebar, cambiar el color de fondo, modificar los colores... cualquier cosa.

En la imagen de al lado podéis acceder a un blog que tiene este sistema y a continuación el código que yo puse en la página de inico de la demo cuya captura estaba al principio de esta entrada. Y sí... sólo con eso en la página tenemos una landing page como la que vistéis.

Ver código

<div class="mapa_imagen">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2RYdX1OlMBq4z5u1QOzcbVGT6JsoTO_g7S3yIUhPNUB-qPeonAw-qr-PICEDIWRh0_lgYHPENljsOVrj4m-x1aCXwiNEiOSSh1uiQtm8wAoF4zoQ4XgM9PIWCGfko8MYyL8u0POmBgNQ/s1600/landing.jpg" />
<ul class="notas">
<a href="http://casi-web.blogspot.com.es/p/pagina-estatica_31.html">
<li id="nota1">
<p>Esto es lo que verás aquí</p>
</li>
</a>
<a href="http://casi-web.blogspot.com.es/p/pagina-estatica_31.html">
<li id="nota2">
<p>Contempla nuestro lorem</p>
</li>
</a>
<a href="http://casi-web.blogspot.com.es/p/pagina-estatica.html">
<li id="nota3">
<p>Ipsum sit amet ¡Seguro!</p>
</li>
</a>
<a href="http://casi-web.blogspot.com.es/index.html">
<li id="nota4">
<p>Nuestra publicaciones periódicas</p>
</li>
</a>
</ul>
</div>


<style>
/* Ocultar-Modificar parte de la estructura original */
.tabs-inner, .main-inner .fauxcolumn-right-outer, .sidebar, h3.post-title, .post-footer, .comments, .blog-pager, .feed-links { display: none;width: 0;}
.main-inner, .main-inner .columns {padding: 0;}
.header-inner .Header .titlewrapper {padding: 0 30px;}
.post img {padding:0;border:0;}

/* Mapa para la imagen */
* {-moz-transition:all 1s ease-out; -webkit-transition:all 1s ease-out; transition:all 1s ease-out; }
div.mapa_imagen {position: relative;}
ul.notas li {list-style: none; opacity: 0; position: absolute; border: 2px dashed #ffd966; border-width: 0 0 4px 0; width: 130px; height: 63px;}
div.mapa_imagen:hover ul.notas li { opacity: 1;}
ul.notas li p { margin: 5px 0 0 0; padding: 10px; position: absolute; top: 100%; text-align: center; color: white; background: black; opacity: 0; }
ul.notas li:hover p { opacity: .8;}
ul.notas li#nota1 { top: 190px; left: 375px;}
ul.notas li#nota2 { top: 175px; left: 549px;}
ul.notas li#nota3 { top: 274px; left: 530px;}
ul.notas li#nota4 { top: 465px; left: 679px;}
</style>

Nota: Este mismo código puede no funcionar bien en tu blog porque está preparado para una plantilla de las del nuevo diseñador con los selectores que estas incluyen. Cada plantilla usa sus propios nombres de selectores.

Actualización.

Hay un pequeño problemilla cuando se navega por etiquetas o recientes/antiguas y que se manifiesta en la segunda página al ir hacia "más recientes". En ese caso el enlace manda a la página Home que tras haber aplicado este truco, ya no es la portada del Blog, sino la portada nueva que hemos construído.

Para solucionar esto se puede editar el gadget nextprev que es el que monta los correspondientes enlaces. Ojo que hay uno para móviles y otro para web. El que se muestra aquí es el de web y habría que añadir lo marcado en verde:

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <b:if cond='data:newerPageUrl == data:blog.homepageUrl'> 
        <span id='blog-pager-newer-link'>
          <a class='blog-pager-newer-link' expr:href='data:blog.homepageUrl + &quot;index.html&quot;' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
        </span>
      <b:else/>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
      </b:if>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>

Otra actualización.

Esta para solucionar el tema de la redirección errónea que se producía en dispositivos móviles.

Solución aportada por +Aran Comín  a través de un comentario. A ver si cunde el ejemplo :)

Lo que hay que incluir en la plantilla es el siguiente código. Buscad cualquier section que tenga widgets (la de la barra lateral es la más socorrida, aunque lo mejor es que esté lo más arriba posible en la plantilla) y justo después de la línea de apertura de sección, incluid esto:

<b:section-contents id="sidebar-left-1">
(Podría ser otra.Línea puesta como referencia. No copiar)

<b:widget id='HTML47' locked='false' mobile='only' title='' type='HTML'>
 <b:includable id='main'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <div class='widget-content'>
    <script type='text/javascript'>window.location="http://DIRECCION_HABITUAL/p/NUEVO_INICIO.html?m=1";</script>
   </div>
  </b:if>
 </b:includable>
</b:widget>

Ojo a la dirección tras window.location, que es lo único que hay que personalizar poniendo vuestra "falsa" dirección de Inicio, la que creasteis como portada.

Marzo 2014

Como definitivamente el anterior sistema para el fallo en móviles dejó de ser útil, estuvimos un tiempo buscando una solución y esta fue publicada en la siguiente entrada:

Un apaño para poder usar una página como portada en móviles

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter