Página 404 en las búsquedas de Blogger

Página 404 en las búsquedas de Blogger

Un Error 404 en una página es un aviso de contenido no encontrado en un servidor, para esta oportunidad enseñaré como simular un error 404 de búsquedas fallidas. Cuando hacemos una búsqueda y no arroja resultados en Blogger no aparece nada, símplemente aparece un espacio en blanco sin información, con esto podremos simular un error de ''búsqueda no encontrada''.


Podemos añadir lo que queramos, para ver un ejemplo prueba usar el buscador que se encuentra en la zona superior derecha de mi blog con un contenido al azar.

¿Cómo añadir esta función a Blogger?

Primero, vamos a ''Diseño | Edición HTML'' en donde marcamos ''Expandir plantillas de artilugios''. Buscaremos la siguiente línea:
<!-- navigation -->
Arriba de ésta, pega el siguiente código:

<b:if cond='data:numPosts == 0'>
<div id='pagina404'>
Acá escribe el contenido del error 404
</div>
</b:if>


Ahora busca la siguiente línea:
]]></b:skin>
Arriba de ésta, pega el siguiente fragmento CSS:
#pagina404 {
margin: 10px;
padding:20px;
}


Pueden usar también este error 404 el cual muestra un sitemap:

<b:if cond='data:numPosts == 0'>
<div id='pagina404'>
<b>¡Lo sentimos!</b>No hay resultados de búsqueda, pero puedes revisar el siguiente índice:
<script src='https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts/sitemap.js'>
</script>
<script src='http://ayuda-bloggers.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc'>
</script>
</div>
</b:if>

O bien, puedes añadir una imagen en lugar de escribir algún contenido:
<b:if cond='data:numPosts == 0'>
<div id='pagina404'>
<img src="URL IMAGEN" alt="Descripción de la imagen" />
</div>
</b:if>



Recuerda que para que no aparezca el mensaje por defecto de las búsquedas fallidas, puedes visitar este tutorial.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger # - Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger