Un mapa del sitio es muy importante porque le muestra a tus visitantes un resumen muy completo de todos los artículos que has publicado en tu blog, haciéndole así mas fácil a los usuarios encontrar tus artículos.

Hoy les enseñare a agregar un espectacular mapa del sitio para Blogger, que se vera de la siguiente manera:

Para agregar este mapa del sitio en tu blog, ve a una Paginas, Pagina nueva, Pagina en Blanco y pega allí el siguiente código:
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<style type="text/css">
#resultDesc {
    margin:0 30px;
    padding:0 0;
    border-bottom:4px solid #58ACFA;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#58ACFA;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 30px;
    padding:0 0;
    overflow:hidden;
    position:relative;
    border:1px solid #58ACFA;
    border-top:none;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
    content:"";
    display:block;
    width:1px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    background-color:#58ACFA;
}
#feedContainer li {
    list-style:none;
    margin:0 0;
    padding:0 0;
    border-top:1px solid #58ACFA;
    color:#999;
    width:50%;
    float:left;
    display:inline;
}
#feedContainer li .inner {
    margin:15px 16px;
    height:120px;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#58ACFA;
}
#feedContainer li a:hover {
    text-decoration:none;
    color:##58ACFA;
}
#feedContainer li a.toc-title {
    font-weight:bold;
    font-size:12px;
    margin:0 0;
}
#feedContainer li .news-text {
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:4px 4px;
    background-color:#58ACFA;
    border:1px solid #111;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 1px 0 #444;
    -moz-box-shadow:0 1px 0 #444;
    box-shadow:0 1px 0 #444;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal bold 12px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
    background-color:#58ACFA;
    padding:0 0;
    color:#999;
    text-decoration:none;
    display:block;
}
#feedNav a:hover, #feedNav a:active {
    background-color:black;
    color:white;
    border:none !important;
}
#feedNav span {
    cursor:wait
}
#table-outer {
    padding:7px 10px;
    margin:30px 30px 0;
}
#table-outer input {
    display:inline-block;
    vertical-align:top;
    margin:0 2px 0 0;
    padding:0 0;
}
#table-outer table {
    border:none
}
#table-outer td {
    padding:2px 2px;
    border:none;
}
#table-outer label {
    font-weight:bold;
    color:#999;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
    display:block;
    text-align:right;
    margin:0 10px 0 0;
}
#table-outer select[disabled] {
    opacity:.4
}
#postSearcher {
    display:block;
    margin:0 0;
    padding:0 0;
}
#postSearcher input, #table-outer select {
    width:180px;
    background-color:#111;
    border:none;
    display:block;
    margin:0 0;
    padding:5px 5px;
    font:normal normal 10px Tahoma, Verdana, Arial, Sans-Serif;
    text-transform:uppercase;
    color:#777;
    outline:none;
    -webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    -moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
    width:170px;
    padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
    background-color:#090909
}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>
<script type="text/javascript">
//<![CDATA[
var tocConfig = {
 url: "URL DE TU BLOG",
 feedNum: 30,
 labelName: false,
 numChars: 0,
 thumbWidth: 80,
 navText: "Siguiente ▼",
 frontText: "Atras ⇑",
 resetToc: "Reset",
 noImage: "https://www.governmentresource.com/files/blog_icon.png",
 loading: "<span>Cargando...</span>",
 searching: "<span>Mencari...</span>",
 noResult: "No se ha encontrada nada con ese titulo"
};
//]]>
</script>
<br />
<div id="table-outer">
<table border="0">
        <tbody>
<tr>
                <td><label for="orderFeedBy">Ordenar las entradas por:</label>
                </td>
                <td><select id="orderFeedBy">
                        <option selected="" value="published">ULTIMA ENTRADA</option>
                        <option value="updated">PUBLICAR INFORMACIÓN ACTUALIZADA</option>
                    </select>
                </td>
            </tr>
<tr>
                <td><label for="labelSorterSelect">Filtrar las entradas por categorias</label>
                </td>
                <td><span id="labelSorter"><select disabled="" id="labelSorterSelect"><option selected="">MEMUAT...</option></select></span>
                </td>
            </tr>
<tr>
                <td><label for="feed-q-box">Buscar por palabras claves:</label>
                </td>
                <td><form id="postSearcher">
<input id="feed-q-box" type="text" />
                    </form>
</td>
            </tr>
</tbody>
    </table>
</div>
<br />
<br />
<br />
<br />
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
</div>
<script src="https://dl.dropboxusercontent.com/u/35784805/Mil%20Trucos%20Blogger/sitemapnuevo.js" type="text/javascript"></script></div>
Ahora reemplaza lo que esta resaltado en color azul por la URL de tu blog, y si quieres reemplazar la imagen que se muestra por defecto solo sustituye lo que esta resaltado en color rojo por la URL de la imagen que quieras.
Espero que te guste este tutorial y que sigas visitando Mil Trucos Blogger.
Categorías: Trucos Blogger

24 comentarios

Anonymous · septiembre 21, 2013 a las 3:44 am

excelente lo implementare en mi blog

Paula · septiembre 22, 2013 a las 12:40 am

Me encantó! ya lo puse en el blog y cambié un poco los colores para que quede con la plantilla. Eso sí, quería preguntarte porqué me queda tanto espacio desde el título al buscador. ¿Será porque tengo para las páginas el ocultar sidebar para que ocupe toda la pantalla? igual no molesta, es de quisquillosa jajaja.
Muchas gracias!

    Hayder Juvinao · septiembre 22, 2013 a las 11:04 pm

    Paula gracias por comentar.

    Puedes reducir los espacios en el CSS del truco, mañana te digo cual es la parte exacta que debes cambiar 😉

    Saludos

    Anonymous · enero 31, 2014 a las 7:32 pm

    Puedes decir publicamente como reducir el espacio desde el titulo al buscador ???

Gabriella Yu · septiembre 22, 2013 a las 1:41 pm

¡Buenísimo!

Iván Darío Agudelo A. · septiembre 22, 2013 a las 7:42 pm

Hola Hayder, cordial saludo. Está muy bueno este truco. Te pido el favor de que me ayudes con algo, si se puede. Quisiera quitar lo de los comentarios, no lo veo necesario y si también me indicas cómo puedo reducir el tamaño de las letras del título, en algunos artículos no está saliendo completo.
Gracias por tu respuesta y por el truco.

    Hayder Juvinao · septiembre 22, 2013 a las 11:08 pm

    Ivan mucho tiempo que no comentabas, pues bueno amigo, te digo que me envíes la plantilla a mi correo y yo te la edito 🙂

    Saludos

elvencejodemieresduerme · septiembre 29, 2013 a las 9:04 pm

Hola «Mil Trucos Blogger»!

Estaba dispuesta a hacer el mapa de mi mano, pero me ha gustado mucho el tuyo. Lo he visto y ya está puesto.

Un saludín desde Asturies

Carmen

    Hayder Juvinao · septiembre 30, 2013 a las 8:45 pm

    Carmen que bueno que te haya gustado el truco, gracias por comentar.

    Saludos

Imagenes graciosas · septiembre 29, 2013 a las 10:43 pm

Juvinao me gusto este mapa, mi pregunta es la siguiente: Como puedo modificar la opcion para quitar que aparescan cuantos comentarios puesto que tengo activo solo los de facebook y me sale simpre 0 Comentarios

Joralgom Joral · diciembre 18, 2013 a las 3:14 am

Hola Hayder… primera vez que veo tu blog y que lo comento… esta muy bueno te felicito y agradezco por tus aportes… te he visto comentando mis post en CA… pero ahora preciso de tu ayuda.. quiero poner este mapa en mi blog pero la duda es : lo pongo en el menu horizontal del header? gracias..espero tu respuesta.. un Abrazo bro..

    Hayder Juvinao · diciembre 18, 2013 a las 1:36 pm

    Joralgom me ha gustado mucho como ha quedado este menú en tu blog.

    Saludos

TodosobreVWT3 · febrero 24, 2014 a las 12:33 pm

GRACIAS!! YA LO ESTOY UTILIZANDO EN MI BLOG!

Mavel de la Rosa · febrero 27, 2014 a las 4:09 pm

Gracias! Lo intentaré en mi blog http://mybookofexperience.blogspot.com.es/ Saludos

ruben iglesias perez · marzo 16, 2014 a las 10:15 pm

;(( no me sale compañero,sera porke tengo un menu desplegable?en otro blog ya tengo paginas como si fuera un menu y tampoco me sale este truco y es genial :-#

    Hayder Juvinao · marzo 30, 2014 a las 4:21 pm

    Amigo no hay razón para que este truco no funcione en tu blog.

    Saludos

Anonymous · abril 24, 2014 a las 6:52 pm

Puedes decir publicamente como reducir el espacio desde el titulo al buscador ???

Emilio - Vw T3 · noviembre 19, 2014 a las 7:35 am

ya no funciona este Mapa del sitio verdad??? a mi me ha dejado de funcionar en mi blog. http://www.vwt3.net/p/blog-page.html

Emilio - Vw T3 · noviembre 19, 2014 a las 7:36 am

dejo de funcionar.. de repente… http://www.vwt3.net/p/blog-page.html

Responder a Imagenes graciosas Cancelar la respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *