Cómo crear una página sencilla de error 404 en Blogger con la nueva interfaz - TECNOXPS

Páginas

viernes

Cómo crear una página sencilla de error 404 en Blogger con la nueva interfaz


Crear una página sencilla de error 404 en Blogger es de mucha utilidad para no perder visitas en nuestro blog
Una página de error 404 (archivo no encontrado) para nuestro blog es muy necesaria, aun cuando Blogger ha automatizado el proceso y básicamente si no la tenemos nos redirige a espacio en blanco en nuestro blog, no debemos perder de vista la utilidad de tener un "Room 404" en nuestro blog, el cual nos permitirá brindarle opciones al usuario y no dejarlo en un "limbo".

A continuación expondré una página 404 muy sencilla, creada utilizando la capacidad que nos estrega Blogger y que se nos establece en [Preferencias de búsqueda] >> [Errores y redireccionamientos] >> [Mensaje de página no encontrada personalizado].

La idea es muy básica, incorporar una imagen y el texto que deseemos para la página de "archivo no encontrado" (Files not found).

Primero necesitamos incorporar un codigo a la plantilla de nuestro blog, para ello nos vamos a [Plantilla] >> [Edición de HTML] >> [Continuar] y cuando se abre la ventana en seleccionamos [Expandir plantillas de artilugios]; utilizando el comando buscar del navegador (Ctrl+F en Chrome), buscamos la siguiente línea de código:
<b:include data='top' name='status-message'/>
Nos aparecerá que existen dos líneas, una es para el formato de dispositivos móviles y la otra es para el formato normal, nos dirigimos hacia la primera que es la que nos interesa y reemplazamos dicha línea de código por el código que se muestra a continuación:
(nótese que el código incluye dicha línea que vamos a reemplazar.) 
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
     <b:include data='top' name='status-message'/>
<style type='text/css'>
.status-msg-wrap { position: relative; width: 100%; margin: 0px auto;  padding: 0px; font-size: 100%; }
.status-msg-wrap a { padding: none; text-decoration: inherit; }
.status-msg-border {display:none; }
.status-msg-body { position: relative; width: 100%; padding: 0; text-align: inherit; z-index: auto; color: #0058cd } /*color del texto #0058cd */
.status-msg-body h1 { position: absolute; top: 15px; left: 10px; font-size:150%; color: #ffffff; } /*color del titulo #ffffff */
 </style>
</b:if>
Nota: este fragmento de código fue extraído de Oloblogger y ha sido modificado para utilizarlo en TXPS, he realizado una variación del mismo, dado que inicialmente el código completo no me funcionaba   ;-(   y genere mi propia variación, la cual me gusto como resultado final y es la que expongo  ;-)

Una vez establecido el código procedemos a [Guardar Plantilla] y nos dirigimos hacia [Mensaje de página no encontrada personalizado], allí le decimos [Editar] y en el cajón podemos pegar un código como este:
<img src="Ingresa_la_dirección_de_tu_imagen"/>
<h1>Ingresa_el_Titulo_Aquí</h1>
<span style= "position: absolute; top: 150px; left: 15px" ><b>Texto_Sin_Enlace_Altura_150_Izquierda_15</b></span>
<span style= "position: absolute; top: 190px; left: 15px" ><b> Texto_Con_Enlace_Altura_190_Izquierda_15<a href="Enlace_Inicio_Blog" rel="nofollow">Inicio</a></b></span>
<span style= "position: absolute; top: 280px; left: 30px" ><b> Texto_Con_Enlace_Altura_280_Izquierda_30<a href="Enlace_ Búsqueda_Etiqueta" rel="nofollow">Etiqueta</a></b></span>
Nota: del anterior texto reemplazamos lo establecido en rojo por los textos y enlaces correspondientes a nuestro blog. 

Tip de edición
En el anterior código el texto está en formato Negrita por el uso de  <b></b> dentro de <span></span>

La imagen que utilicé para la página de error 404 tienen unas dimensiones de 1010x800 pixeles, esto dado que al blog tiene el ancho definido en 1010px.

Tip de edición
Para ver el ancho predefinido de la plantilla nos dirigimos a [Plantilla] >> [Personalizar] >> [Ancho de la plantilla] y en [Ancho del blog] (la barra más larga) podemos ver el ancho que posee en pixeles, luego la imagen la creamos de dicho ancho para que no nos quede por fuera del marco natural y nos quede como si fuera un post.

Tip SEO
Al establecer la página de error de esta forma, la misma no será indexada por Google y cuando alguna dirección mal establecida existiese dentro o fuera de nuestro blog (incluso que la hayamos eliminado nosotros) y accediera a la misma, nuestra 404 le permitirá al usuario poder acceder al contenido de nuestro blog y a las secciones/publicaciones que queramos sugerirle y así mismo, al buscador (que hemos establecido previamente con el widget que nos proporciona Blogger para buscar en nuestro blog) que establecemos en la parte superior de nuestra barra de widgets; a veces no tenemos que mostrarlo, solo "iluminarlo" un poco   ;-D

En la imagen de este post, se observa la página de error de TXPS y si quieres acceder a ella es muy simple, puedes hacerlo a través de esta dirección que efectivamente no existe como un post o página en TXPS 
http://tecnoxps.blogspot.com/room-404-estoy-tan-perdido-que-no-existo.html
También puedes encontrar otras formas de establecer la página de error 404 en CiudadBlogger y al ya mencionado previamente de Oloblogger.

Tip SEO
Es bueno tener presente las recomendaciones que nos proporciona Google para la creación de páginas 404 útiles.


¿Te gusto la idea de establecer una página 404 personalizada en tu blog?


¿ ¡ La verdad está ahí afuera ! ?.... Expediente # 582d46696c657320636f6d6d656e74733a

  1. Hola, muchas gracias por la información. Estoy tratando de incluir la imagen pero tengo una duda. Al poner la imagen en una nueva entrada, la publico o no? Si no la publico como obtengo la dirección? Disculpa por la pregunta tan tonta, pero soy muy nueva. Muchisimas gracias

    ResponderEliminar
    Respuestas
    1. Hola Dulce VO

      Primero, disculpa la demora, a veces se me pasan entre trabajo, comentarios y otros :-)

      No sabría si tu pregunta está enfocada particularmente en esta publicación, es decir, en crear una página de error 404 personalizada, pero si lo que quieres es subir una imagen para luego poder utilizarla, lo que debes hacer es ingresar al sitio de picasaweb

      https://picasaweb.google.com

      Mismo que está asociado con la cuenta de Gmail con la cual gestionas el blog y luego de que la hayas subido podrás ver dando click derecho sobre la misma la opción de copiar el enlace, por lo que obtendrás algo como esto:

      https://lh3.googleusercontent.com/-PuRSiqr0YpM/Vh6gIL4Nd5I/AAAAAAAANL4/AqbgaSrioTM/s800-Ic42/Captura-ampliacion-video-codigo.JPG

      Luego con dicha URL podrás anexarla según desees.

      Claro que al redactar una entrada normalmente, si utilizas la opción que te brinda Blogger de subir una imagen, el mismo realizará por ti el proceso anteriormente descrito y la misma quedará incrustada en tu entrada.

      Revisa y me cuentas.

      Saludos


      Eliminar

Nota: sólo los miembros de este blog pueden publicar comentarios.