viernes, 29 de junio de 2012

Poner indice o mapa del sitio en nuestro blog

Añadir un Indice o mapa del sitio a nuestro blog es de gran utilidad y mejora la búsqueda de las entradas.

Agregando este gadget a tu blog, puedes tener, todas las etiquetas y respectivas entradas en una sola página , en otras palabras los visitantes podrán ver todo lo que tiene tu blog.

Este gadget te muestra una tabla de contenidos de todos los artículos publicados y separados por categoría, el índice de los artículos se ordena alfabéticamente y se actualiza automáticamente cada vez que publiquemos una nueva entrada.

Para ver este gadget funcionando en mi blog clic aquí.

Para Instalar el indice (Mapa del sitio) en tu blog, debes copiar el siguiente código:

<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#252524; /*color fondo etiquetas*/
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 10px Arial,Sans-Serif;
color:white;}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;}
#tabbed-toc .toc-tabs {
width:15%;
float:left;}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc; /* color enlace etiqueta */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;}
#tabbed-toc .toc-tabs li a:hover {
background-color:#4B4B4B; /* background de etiquetas */
color:white;} /* color enlace etiqueta con background */
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#ccc; /* background de la primera etiqueta */
color:white; /* color enlace primera etiqueta con background */
-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0;}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:85%;
float:right;
background-color:#ffffff; /* color separación entre entradas */
border-left:5px solid #ccc; /* borde separación entre etiquetas y entradas */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:0 0 7px rgba(0,0,0,.7);
box-shadow:0 0 7px rgba(0,0,0,.7);}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif;}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:bold;
font-size:11px;
color:#3A3A3A; /* color enlace de entradas */
line-height:20px;
height:20px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden;}
#tabbed-toc .panel li:nth-child(even) {
background-color:#DFDDDD;} /* primer color separación entre entradas */
#tabbed-toc .panel li:nth-child(even) {
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li.bold a {
background-color:#333; /* color background de las entradas */
color:white; /* color del enlace con el background de las entradas */
outline:none;}
@media (max-width:700px) {
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;}
#tabbed-toc .toc-content {
border:none;}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;}}
</style>
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.blogginred.com/" title="indice">Bloggin Redd</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "URL DE TU BLOG", /* url de tu blog */
containerId: "tabbed-toc",
activeTab: 1,//()
showDates:false,
numChars: 200,
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 5,
newText: " - <em style='color:red;'>Nuevo!</em>"
};
</script>
<script src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/indice.js
' type='text/javascript'></script>

Pégalo en una nueva entrada en edición HTML (no en redactar), ahora cambia por la URL de tu blog donde se indica en color naranja y dice en el código URL de tu blog.

Hecho lo anterior editarás la fecha de la entrada cambiándole  la fecha para que se muestre como la primera entrada que publicaste.

Y listo sólo queda publicarlo.

COMENTAR ES AGRADECER

10 comentarios:

  1. Respuestas
    1. Saludos José si el anterior no funcionaba pero ya lo actualicé !! SALUDOS

      Eliminar
  2. Muchisimas gracias, lo acabo de hacer y funciono perfectamente. Justo lo que estaba buscando.

    ResponderEliminar
    Respuestas
    1. Hola g-save Con gusto amigo me alegra que te sirva el "mapa de sitio para blogger"

      Saludos desde Colombia,

      Eliminar
  3. Gracias:) lo puse en mi blog, y quedo muy bien.

    ResponderEliminar
  4. Hola Andres! Aqui dando lata. Fijate que hace unos dias detecte que el indice no esta dando completa la lista de entradas de cada etiqueta. Tambien detecte que si envio mi sitemap a google con el formato de

    "/atom.xml?redirect=false&start-index=1&max-results=500"
    solo manda 150 entradas y el

    "/atom.xml?redirect=false&start-index=501&max-results=1000"
    manda 97, siendo que el blog tiene derca de 600 entradas.

    En google lo solucione cambiando el sitemap a "sitemap.xml" que el si manda 597 entradas para indexar.

    Todo esto para preguntarte si el indice esta fallando por este motivo y si tiene arreglo.

    Disculpa que te distraiga, pero es que realmente tu gadget me resulta de una enorme utilidad. De antemano, te doy las gracias por el tiempo y tu atencion.

    ResponderEliminar
    Respuestas
    1. Hola g-save Gracias por tu comentario tan detallado voy a revisarlo con calma cada cosa que me dijiste, lo haré en unos 4 o 5 días posiblemente ya que ahorita ando en líos de matrícula con mis estudios... Tan pronto tenga algo de ser un error actualizaré el post y un comentario aquí para informarlo..

      Saludos amigo,

      :)

      Eliminar
  5. No Andres, muchas gracias a ti por tu rapida respuesta. No corre ninguna prisa, espero que todo te salga bien en la escuela. Aprovecho para mandarte otro dato que pase por alto. Mi sitemap.xml sale asi:



    -


    -

    http://lordwinrar.blogspot.com/sitemap.xml?page=1




    -

    http://lordwinrar.blogspot.com/sitemap.xml?page=2




    -

    http://lordwinrar.blogspot.com/sitemap.xml?page=3




    -

    http://lordwinrar.blogspot.com/sitemap.xml?page=4



    ResponderEliminar
  6. Perdon, se ve del asco.... te mando una foto:

    http://3.bp.blogspot.com/-IzMH5dhpuFM/Vph90vAmiVI/AAAAAAABkVQ/-O5IaSG1IeM/s1600/Ashampoo_Snap_2016.01.14_23h02m53s_001_.jpg

    ResponderEliminar

SÍGUENOS EN: