function NEWemoticonComentario() { $("blockquote.comment-content").each(function(index) { var nuevoTexto = DRAWemo($(this).html()); $(this).html(nuevoTexto); }); }

lunes, 17 de marzo de 2014

►http://ciudadblogger.com/

http://ciudadblogger.com/


►Fecha tipo calendario en las entradas del blog

Hay una forma muy particular de mostrar la fecha que llama mucho la atención a muchos, y es lafecha tipo calendario, que le da un aspecto bastante interesante y distinto a este dato de las entradas que usualmente no le damos mucha importancia.


Para poner la fecha tipo calendario en el blog, primero descarga este archivo, es el que contiene todas las imágenes del calendario, elige la que más te guste y súbela a Picasaweb o al hosting que prefieras.

Luego entra en Configuración | Formato | Formato de cabecera de fecha, y cambia la fecha de manera que quede primero el día, luego el mes y por último el año, por ejemplo: 29 noviembre 2011


Si usas la nueva interfaz entonces entra en Configuración | Idioma y formato | Formato de cabecera de fecha, y cámbiala de igual forma.



Ahora entra en la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y busca esta línea:

Es posible que la encuentres dos veces, la segunda es la que nos interesa.
Ya que la hayas localizado elimínala y en su lugar pon esto:




Ahora agrega antes de 
 lo siguiente:


Agrega la URL de la imagen donde se indica y listo. En color verde verás dónde cambiar el color de los datos de la fecha.
Si el calendario no se viera por completo, o si quieres que se muestre dentro del post cambia el-70px  por 0px
El archivo contiene 14 imágenes con distintos colores para que elijas el que mejor se adapte a los colores de tu plantilla.

ACTUALIZACIÓN: Es importante que para que la fecha pueda mostrarse primero deba estar habilitada en las entradas, para ello ingresa a Elementos de la página | Entradas del blog, y haz click en Editar, ahí marca la casilla de la fecha. Si usas la nueva interfaz sigue el mismo procedimiento entrando en Diseño.


http://ciudadblogger.com/2011/11/fecha-tipo-calendario-en-las-entradas.html

►Crear un intro para el blog con jQuery y cookies


Cuando publiqué la entrada sobre crear un intro para el blog, una de las primeras inquietudes que se tenían era cómo hacer para que el Intro sólo se mostrara una vez pues podría resultar molesto regresar al inicio y ver siempre la pantalla de bienvenida.

En esta entrada vamos a ver cómo crear un intro para el blog con jQuery, el cual hará que cuando éste desaparezca tenga un efecto de desvanecimiento.
Podrá elegirse si se muestra siempre o cada ciertos días, ya que usa cookies, y tiene un temporizador, el cual permite que si en determinado tiempo el lector no hizo click en el botón de Entrar entonces el Intro podrá quitarse automáticamente.

El script es una creación de Meerkat y la instalación no es nada complicada.
Puedes ver un demo en este blog de pruebas, si no haces click en el botón entonces el Intro se quitará por sí solo en 15 segundos.

Para poner este Intro en tu blog, entra en la Edición HTML de la plantilla, y pega después de el siguiente script:



Luego antes de 
 pega este código:







Entrar
Este último código es el Intro en sí, ahí es donde podremos agregar una imagen de bienvenida, algún texto, etc. Todo lo que quieras que se vea en el intro deberá ir en el área marcada en color rojo.
Si quieres que en lugar de un texto el botón de entrar sea una imagen sólo cambia ese texto (el de Entrar) por el código de una imagen:
URL de la imagen
" />

Por último agrega antes de ]]>
 estos estilos:
#enter{margin-top:150px;} /* Distancia de los elementos del Intro desde arriba */
#close{
cursor:pointer;
font-size:17px; /* Tamaño del texto ENTRAR */
color:#FFF; /* Color del texto ENTRAR */
}
Esos son estilos muy básicos, pero pueden agregarse muchos más, ya dependerá de qué tipo de diseño quieras para tu pantalla de presentación.

En el primer código que hemos añadido veremos estos comandos:
background: '#000 ',
timer: 15,
dontShowAgainAuto: false,
cookieExpires: 2,
background es el color de fondo del Intro, es decir, de toda la pantalla, y también puedes añadir una imagen de fondo, si así fuera quedaría así:
background: '#000 url(URL de la imagen)',
timer es el tiempo en segundos que durará el intro en caso de que el usuario no dé click para entrar.
dontShowAgainAuto indica si el intro se mostrará siempre o no, false indica que siempre se mostrará, cámbialo a true si quieres sólo se muestre una vez cada cierto tiempo.
cookieExpires indican los días que tardará el intro en volver a mostrarse en caso de que lo hayas cambiado por true.

Como puedes ver el script tiene muchas opciones y me parece que es mucho más completo y atractivo que el que habíamos visto primeramente.
El intro se mostrará en cualquier página del blog, pero si quisieras que sólo se muestre en la portada entonces deberás encerrar el código que va antes de 
 en una condicional para que sólo se muestre en la portada del blog.

Consideraciones finales:
  • El script ya está modificado para que sea compatible con Scriptaculous.
  • Si activas la opción de que no se vea en cierto tiempo entonces tampoco tú lo verás hasta que haya transcurrido el tiempo que configuraste. Para verlo antes de ese tiempo deberás borrar las cookies de tu navegador.
  • No se recomienda poner videos o música en el Intro, pues éstos se ejecutarían aun después de quitarse el Intro.
  • Si tuvieras en el blog un video o un archivo en flash deberás aplicarle una transparenciapara que no se sobreponga en el Intro.
  • Si ya usas jQuery asegúrate de tener sólo la última versión y eliminar las versiones repetidas o antiguas.
  • Recuerda que se verá en todas las páginas del blog, así que si quieres que sea visible sólo en la portada deberás encerrar el código en una condicional como se ha señalado.

http://ciudadblogger.com/2012/01/crear-un-intro-para-el-blog-con-jquery.html>

►Entradas Menús



http://ciudadblogger.com/search/label/Men%C3%BAs

►Definir la imagen del producto al compartir en facebook

En algunas ocasiones cuando queremos añadir plugins para compartir en las redes sociales como por ejemplo Addthis tenemos el problema de que a menudo Facebook coge la primera imagen que se encuentra en la página o la que quiere en vez de la imagen del producto, efecto que crea algo de confusión en los usuarios que intentan compartir.
Para evitar que facebook se tome la libertad de coger la imagen que quiera, o evitar que todas las imagenes de tu web sean seleccionadas por el, basta con añadir el atributo y valor rel=”image_src” al tag que contenga la imagen que deseamos escoger como única y predeterminada para esta compartición. En el caso de Prestashop, lo lógico sería añadírselo a la imagen principal.
Un ejemplo de este tributo seria:


http://www.jose-aguilar.com/blog/definir-la-imagen-del-producto-al-compartir-en-facebook%E2%80%8F/

sábado, 15 de marzo de 2014

►Menú horizontal con subpestañas y buscador integrado 2



Hace algún tiempo vimos el menú horizontal con subpestañas y buscador integrado y desde eso me han preguntado cómo hacer ese mismo menú pero de varios niveles, es decir, que las subpestañas del menú también tengan subpestañas. El menú a continuación tiene esa característica, además de conservar el buscador dentro del menú.
Los estilos redondeados en los submenús se han quitado por cuestiones estéticas, pero ya saben que cualquiera de estas monerías pueden personalizarse a consideración y gusto propio.

El menú puedes verlo en este blog de pruebas.

ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.


Para poner este menú horizontal con submenús en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]>
 pega los estilos:
/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1khYMnuKNP-tZfJS4Rz8B6clyp-CuL4hJXUOgrmqCI0ZxpyUxelcKQRs7V4vOxU4Y6JJAMVXwpoUB5eH3zY69MaSWE6MNsS5CmJZzp8lq7fbjpFfRyip1ZY9ABet9KX6bBGlcmHh38wKl/) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1khYMnuKNP-tZfJS4Rz8B6clyp-CuL4hJXUOgrmqCI0ZxpyUxelcKQRs7V4vOxU4Y6JJAMVXwpoUB5eH3zY69MaSWE6MNsS5CmJZzp8lq7fbjpFfRyip1ZY9ABet9KX6bBGlcmHh38wKl/) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFCOrps3zxhpJ4R6v0Psi0JkLLD6ToVRPWVzvg8HZIFvuvyzOHbeCJ7aUesZRCAMVpuraURgCz0qkbh-P3eNwTLGn_7ryq-s6aEYeqa7yOFa575HVPxyNeutJdzwpBiCZRaq7ZUf2C0Ok/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
Luego entra en Diseño y en un gadget HTML/Javascript pega lo siguiente:
Guarda los cambios y listo. En color verde puedes ver las áreas para cambiar los colores.

Antes de  puedes agregar más pestañas si lo deseas.
Si quisieras añadir otra pestaña simple, agrega una línea como esta:
  • URL del enlace
  • " class="top_link">PestañaSi quisieras agregar una pestaña con subpestañas entonces agrega este código:
  • Pestaña
  • ">Sub pestaña
  • URL del enlace
  • ">Sub pestaña

    Y si quisieras que una de las subpestañas tuviera otras subpestañas entonces elimina una línea como la que está en color naranja y cámbiala por un código como este:
  • Sub pestaña
  • ">Otra Sub pestaña
  • URL del enlace
  • ">Otra Sub pestaña
  • URL del enlace
  • ">Otra Sub pestaña


    Con esta variación del menú podemos agrupar más enlaces y categorías en poco espacio, y que además, al conservar el buscador dentro del menú hace que sea un menú práctico, compacto y útil.


    http://ciudadblogger.com/2013/03/menu-horizontal-con-subpestanas-y-buscador-integrado-2.html

    ÍNDICE

    <script src="http://mbv-xxx.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>

    ►Z+Kreations 4.2 - Plantilla Blogger

    Tema Elisabeth+D2


    Como se los habia prometido, aqui tienen el template anterior que use para z+kreations, el nombre del template es Elisabeth+D2 y esta inspirado de una persona muy importante para mi, por eso estos diseños no los pueden encontrar en otra parte ya que los desarrollo en exclusivo para mi web, les dejo el boton de descarga y la demo para que puedan revisr la plantilla antes de obtenerla n_n 


    Z+Kreations

    Manual de configuracion

    Logo

    para empezar hay que cambiar el logo, asi que nos dirigiremos a Plantilla > Edicion HTML y buscaremos esto:
    <a class='a-tl' expr:href='data:blog.homepageUrl'>
        <img alt='Tu blog/web' border='0' class='im-zk' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBvgOXYvUchUcy5NGBHMlCi3gpzx1FxMgZnyqt_gsXArIJeADMvICpN_gFihV_Uzf6ZBWsewXe7V4NqgjllnLdh_G3lmk5poAuk_Fkbw6VCbl64PLuNyM7PjSW7AdBIIG-2xgamFWPgoQ/s1600/tu+logo.png'/>
    </a>
     lo que esta en Azul lo cambian por el nombre o titulo de su web y lo que esta en Rojo por la url correspondiente al logo de su web, asegurencen de tener el tamaño correspondiente

    Estadisticas

    Vamos a configurar las estadisticas del blog, para ello buscaremos:
    <div class='estadisticas'>
    <ul class='stats-data'>
     Debajo de esto encontraremos mucho codigo en JavaScript, solo nos interesa encontrar esto:

    DiasOnline(dd, mm, aaaa, &quot;&quot; );

     reemplazaran "dd, mm, aaaa" por la fecha se se fundo su blog, ejemplo: 15, 9, 2012

    mas abajo localicen esto "url de tu blog", lo encontraran dos veces, reemplacen eso por la url que corresponde a su web

    Extras

    Al template le eremovido 2 cosas que no puedo incluirlas gratis debido a que son pagas y hay que comprarlas, les dejare el link de ambos elementos por si desean hacer la compra de los mismos:

    Estro Slider - Codecanyon 
    Lightbox Evolution - Codecanyon

    Si tienen problemas para mostrar todas las entradas en la pagina principal les recomiendo que se pasen por esta entrada:Etiqueta more y su utilidad


    Cualquier problema o inquietud no olviden dejarme un comentario y si te gusto esta entrada compartela en las redes sociales n_n

    ►Crear sitemap o tabla de contenido para Blogger

    Una de las limitaciones de un blog es no poder tener uníndice o sitemap del sitio que pueda facilitarle a los lectores poder encontrar el contenido que buscan.
    Si bien el gadget de etiquetas y archivos de blogtienen la información de todos los post publicados, estos no se presentan en una sola página de forma completa, por lo que buscar los posts no siempre es cosa fácil.

    Por suerte Amanda creó un gadget que permite mostrar una tabla de contenido del blog con la cual todos los post se muestran separados por las etiquetas. Éste gadget que es bastante bueno ha sido optimizado y simplificado por Abu Farhan por lo que no tendremos que hacer otra cosa que copiar un código y pegarlo.

    Como dije antes, se trata de un sitemap o tabla de contenido que muestra el índice de todos los posts que se han publicado separados por categorías, además de que los posts más recientes aparecen con un texto que dice Nuevo!
    Para que vean de qué les hablo pueden verlo funcionando haciendo click aquí.

    Para implementarlo en tu blog entra en Plantilla | Edición de HTML y antes de </head> pega este script:
    <script>
    //<![CDATA[
    var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postMp3[ii]=o;if(h<10){postBaru[ii]=true}else{postBaru[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postMp3[e];postMp3[e]=postMp3[g];postMp3[g]=f;var f=postBaru[e];postBaru[e]=postBaru[g];postBaru[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postMp3[f];postMp3[f]=postMp3[h];postMp3[h]=g;var g=postBaru[f];postBaru[f]=postBaru[h];postBaru[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Judul Artikel";var m="Klik untuk sortir berdasarkan judul";var d="Tanggal";var k="Klik untuk Sortir bedasarkan tanggal";var c="Kategori";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Klik untuk menampilkan semua"}h+="<table>";h+="<tr>";h+='<td class="toc-header-col1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="toc-header-col2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="toc-header-col3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="toc-header-col4">';h+="Download MP3";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Menampilkan Semua '+postTitle.length+" Artikel<br/></span>"}else{var f='<span class="toc-note">Menampilkan '+l+" artikel dengan kategori '";f+=postFilter+"' dari "+postTitle.length+" Total Artikel<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postBaru[a]==true){document.write(' - <strong><em><span style="color: rgb(255, 0, 0);">Nuevo!</span> </em></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Menampilkan Daftar Isi</a> <img src="http://radiorodja.googlepages.com/new_1.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Download mp3 : <a href="'+postMp3[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
    //]]>
    </script>
    Luego crea una nueva entrada o una nueva página y ahí pega esto:
    <script src="http://nombre-de-mi-blog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

    Cambia la URL de tu blog donde se indica y listo.

    Así de fácil podrás tener un sitemap en tu blog. El índice de los post se ordena alfabéticamente y se actualiza de modo automático cada vez que publicas una nueva entrada.


    http://ciudadblogger.com/2009/09/crear-sitemap-o-tabla-de-contenido-para.html