Como crear un Mapa de sitio para Blogger Wordpress Páginas web

Apende a crear un Mapa de Sitio profesional

Guía completa para implementar un sitemap con diseño web profesional en tres columnas

Introducción

Con unos simples pasos podrán crear un mapa de sitio de su blog de Blogger. Este código también sirve para utilizarlo en su página de WordPress o cualquier plataforma web.

La inserción del código es muy fácil de realizar, solo tendrán que copiar un código en un post o en una página, como ustedes lo prefieran. Al insertar el código y publicarlo les mostrará su mapa de sitio totalmente diferente, con el título de sus etiquetas y los posts publicados bajo cada categoría, divididos en tres columnas y con un diseño web profesional.

Ejemplo de mapa de sitio profesional en tres columnas
Ejemplo del resultado final del mapa de sitio

En un artículo anterior expliqué cómo crear un Sitemap automático, el cual es diferente al que van a aprender hoy. Puedes verlo en: Cómo crear un Sitemap automático

Demostración del resultado

Puedes ver cómo queda implementado en el siguiente blog de demostración:

Demo de mapa de sitio implementado
Haz clic en la imagen para ver la demo funcional

¿Les gustó el resultado?

Instrucciones paso a paso

  1. Ir a Blogger

    Accede a tu panel de control en Blogger

  2. Crear entrada nueva o página nueva

    Interfaz de creación de nueva entrada en Blogger
  3. Habilitar el modo HTML

    Cómo cambiar al modo HTML en el editor de Blogger

Código para implementar

Inserta el siguiente código en tu entrada o página:


<script src="https://googledrive.com/host/0B-P4_Fs3S76ydURacVd6TlJyWW8" type='text/javascript'></script>
<script src="http://www.ayudadeblogger.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }
</style>
                

Modificación importante

Debes reemplazar la URL marcada: www.ayudadeblogger.com por la URL de tu propio blog de Blogger o página web.

Finalización

Publica tu entrada o página con el mapa de sitio (sitemap) y podrás ver los resultados inmediatamente.

¡Fácil verdad!

Recuerda suscribirte para recibir nuevas actualizaciones directamente en tu bandeja de entrada.

¿Necesitas ayuda?

Cualquier duda no dudes en hacérmelo saber y te responderé lo antes posible.

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

0 comments:

Publicar un comentario