Mil Trucos Blogger

Espectacular mapa del sitio para tu blog

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

24 Comentarios

  1. Anonymous Anonymous
    septiembre 21, 2013    

    excelente lo implementare en mi blog

  2. septiembre 22, 2013    

    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!

    • septiembre 22, 2013    

      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 Anonymous
      enero 31, 2014    

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

  3. septiembre 22, 2013    

    ¡Buenísimo!

  4. septiembre 22, 2013    

    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.

    • septiembre 22, 2013    

      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

  5. septiembre 29, 2013    

    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

    • septiembre 30, 2013    

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

      Saludos

  6. septiembre 29, 2013    

    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

    • septiembre 30, 2013    

      Voy a revisar el código del mapa, luego te respondo 😉

  7. diciembre 18, 2013    

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

    • diciembre 18, 2013    

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

      Saludos

  8. febrero 24, 2014    

    GRACIAS!! YA LO ESTOY UTILIZANDO EN MI BLOG!

    • marzo 30, 2014    

      Gracias a ti por comentar y por usar nuestros trucos.

      Saludos

  9. febrero 27, 2014    

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

  10. marzo 16, 2014    

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

    • marzo 30, 2014    

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

      Saludos

  11. Anonymous Anonymous
    abril 24, 2014    

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

  12. noviembre 19, 2014    

    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

  13. noviembre 19, 2014    

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

Deja un comentario

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




Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo