Espectacular mapa del sitio para tu blog

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.
0
Shares

24 thoughts on “Espectacular mapa del sitio para tu blog

  • septiembre 21, 2013 en 3:44 am
    Permalink

    excelente lo implementare en mi blog

    Responder
  • septiembre 22, 2013 en 12:40 am
    Permalink

    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!

    Responder
    • septiembre 22, 2013 en 11:04 pm
      Permalink

      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

      Responder
    • enero 31, 2014 en 7:32 pm
      Permalink

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

      Responder
  • septiembre 22, 2013 en 7:42 pm
    Permalink

    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.

    Responder
    • septiembre 22, 2013 en 11:08 pm
      Permalink

      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

      Responder
  • septiembre 29, 2013 en 9:04 pm
    Permalink

    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

    Responder
  • septiembre 29, 2013 en 10:43 pm
    Permalink

    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

    Responder
  • diciembre 18, 2013 en 3:14 am
    Permalink

    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..

    Responder
  • marzo 16, 2014 en 10:15 pm
    Permalink

    ;(( 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 :-#

    Responder
  • abril 24, 2014 en 6:52 pm
    Permalink

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

    Responder

Deja un comentario

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