Sitemap o tabla de contenido de nuestras publicaciones por fecha

Ese sitemap es un índice que muestra el título de todas las entradas publicadas en el blog y ordenas por etiquetas.

Partiendo del mismo script podemos implementar un sitemap que muestre el índice de todas las entradas publicadas pero ordenadas por fecha, agrupándolas por mes y mostrando a un lado la fecha que fue publicada (ver ejemplo en ciudadblogger).

Para poner en tu blog una tabla de contenido como esta entra en Diseño > Edición de HTML y antes de </head> pega esto:
<script type='text/javascript'>
// <![CDATA[
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postYear=new Array();var postMonth=new Array();var postYearMonth=new Array();var postYearMonth2=new Array();var postTanggal=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;var month2=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre",
"Octubre","Noviembre","Diciembre"];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 m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}
postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);
postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2();document.write('')}
function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write("<p/>");
document.write('<p><strong><a href="'+postYearMonth2[b]+'">'+temp1+"</a></strong></p>
<ul>");firsti=a;do{document.write("<li>");document.write("["+postTanggal[a]+'] <a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");document.write("</li>");
a=a+1}while(postYearMonth[a]==temp1);b=a;document.write("</ul>");
if(b>postTitle.length){break}}};
// ]]>
</script>
Ahora en una entrada nueva pega este código:
<script src="http://tublog.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>
Cambia lo que está en rojo por el nombre de tu blog y listo. Si lo deseas puedes cambiar el órden de la entrada para que aparezca hasta el último.

Así de sencillo podrás tener una tabla de contenido ordenada por fechas.
--> Leer Más...

Menú horizontal drop and down con CSS

He visto que los menús con subpestañas (drop and down) son lo más solicitados y aunque el menú con efecto deslizante es del agrado de muchos no todos lo pueden usar debido a que requiere jQuery, así que veamos cómo hacer un menú drop and down sólo con CSS sin usar ningún tipo de script que pueda interferir con el funcionamiento del sitio Web.

En cuanto al diseño de estos menús las posibilidades son enormes, este me gusta por lo sencillo de su aspecto y lo adaptable que es con muchas plantillas aunque con las nuevas plantillas de Blogger no funciona pero bueno, ya hemos visto que casi nada funciona en esas plantillas...

Puedes ver el menú haciendo clik en el siguiente botón.



Para ponerlo en tu blog entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu li {
float: left;
position: relative;
width: 140px;
/* Ancho de las pestañas */
}

#menu li ul {
position: absolute;
display: block;
top: 2em;
left: 0;
}

#menu li>ul {
top: auto;
left: auto;
}

#menu li:hover ul { display: block; }
#menu li:hover>ul { visibility:visible; }
#menu ul ul { visibility:hidden; }
#menu ul, li { margin: 0 0 0 0; }

#menu ul a {
display: block;
text-decoration: none;
color: #777;
/* Color del texto de las pestañas */
background: #f9f9f9;
/* Color de fondo de las pestañas */
padding: 5px;
border: 1px solid #ccc;
/* Borde de las pestañas */
text-align: center;
/* Alineación del texto */
}

#menu ul a:hover {
color: #E2144A;
/* Color del texto al pasar el cursor */
}

#menu li ul a {
text-align: left;
text-decoration: none;
color: #777;
/* Color del texto de las subpestañas */
background: #fff;
/* Color de fondo de las subpestañas */
border: 1px solid #ccc;
/* Borde de las subpestañas */
padding: 5px;
}

#menu li ul a:hover {
color: #E2144A;
/* Color del texto de las subpestañas al pasar el cursor */
background: #f9f9f9;
/* Color de fondo de las subpestañas al pasar el cursor */
}
Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:

<div id="menu">
<ul id="menuList">
<li><a class="submenu" href="
URL del enlace">Pestaña 1</a></li>
<li><a class="submenu" href="
URL del enlace">Pestaña 2</a>
<ul>
<li><a href="
URL del enlace">Pestaña 2.1</a></li>
<li><a href="
URL del enlace">Pestaña 2.2</a></li>
<li><a href="
URL del enlace">Pestaña 2.3</a></li>
</ul>
</li>
<li><a class="submenu" href="
URL del enlace">Pestaña 3</a>
<ul>
<li><a href="
URL del enlace">Pestaña 3.1</a></li>
<li><a href="
URL del enlace">Pestaña 3.2</a></li>
<li><a href="
URL del enlace">Pestaña 3.3</a></li>
</ul>
</li>
<li><a class="submenu" href="
URL del enlace">Pestaña 4</a>
<ul>
<li><a href="
URL del enlace">Pestaña 4.1</a></li>
<li><a href="
URL del enlace">Pestaña 4.2</a></li>
<li><a href="
URL del enlace">Pestaña 4.3</a></li>
</ul>
</li>
</ul>
</div>
Cambia la URL del enlace donde se indica así como el nombre de la pestaña y de las subpestañas.

Si deseas agregar otra pestaña sólo agrega antes del </ul> de color azul otra línea como esta:
<li><a class="submenu" href="URL del enlace">Otra pestaña</a></li>
Si deseas que la pestaña tenga subpestañas entonces agrega este código en lugar del otro:
<li><a class="submenu" href="URL del enlace">Otra pestaña</a>
<ul>
<li><a href="
URL del enlace">Pestaña 5.1</a></li>
<li><a href="
URL del enlace">Pestaña 5.2</a></li>
<li><a href="
URL del enlace">Pestaña 5.3</a></li>
</ul>
</li>
Como puedes darte cuenta es un menú simple, elegante y fácil de personalizar que no requiere nada más que CSS.

Fuente: ciudadblogger
--> Leer Más...

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika