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.
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:
¿Les gustó el resultado?
Instrucciones paso a paso
-
Ir a Blogger
Accede a tu panel de control en Blogger
-
Crear entrada nueva o página nueva
-
Habilitar el modo HTML
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.
0 comments:
Publicar un comentario