Barra para Links

Veis la barra con numeritos que está al final de la página en "Clásica"?...

Pues ahí tengo ordenaditos todos mis links. Cada número es una URL que lleva a la página al pinchar sobre él.

La verdad que es una solución muy práctica ésta que ofrece dynamicdrive

y tan fácil como insertar en la plantilla expandida dos piezas de código: una para el CSS, que se colocará antes del cierre de "skin"-o "style"- y otra de HTML, que irá... pues dónde quiera uno ver el resultado: yo lo puse al final de mi plantilla, antes de terminar el contenido.

Código CSS:

<style type="text/css"><br /><br />/*Credits: Dynamic Drive CSS Library */<br />/*URL: http://www.dynamicdrive.com/style/ */<br /><br />.pagination{<br />padding: 2px;<br />}<br /><br />.pagination ul{<br />margin: 0;<br />padding: 0;<br />text-align: left; /*Set to "right" to right align pagination interface*/<br />font-size: 16px;<br />}<br /><br />.pagination li{<br />list-style-type: none;<br />display: inline;<br />padding-bottom: 1px;<br />}<br /><br />.pagination a, .pagination a:visited{<br />padding: 0 5px;<br />border: 1px solid #9aafe5;<br />text-decoration: none; <br />color: #2e6ab1;<br />}<br /><br />.pagination a:hover, .pagination a:active{<br />border: 1px solid #2b66a5;<br />color: #000;<br />background-color: lightyellow;<br />}<br /><br />.pagination li.currentpage{<br />font-weight: bold;<br />padding: 0 5px;<br />border: 1px solid navy;<br />background-color: #2e6ab1;<br />color: #FFF;<br />}<br /><br />.pagination li.disablepage{<br />padding: 0 5px;<br />border: 1px solid #929292;<br />color: #929292;<br />}<br /><br />.pagination li.nextpage{<br />font-weight: bold;<br />}<br /><br />* html .pagination li.currentpage, * html .pagination li.disablepage{ /*IE 6 and below. Adjust non linked LIs slightly to account for bugs*/<br />margin-right: 5px;<br />padding-right: 0;<br />}<br /><br /></style><br />


Código HTML:

<div class="pagination"><br /><ul><br /><li class="disablepage">« previous</li><br /><li class="currentpage">1</li><br /><li><a href="#">2</a></li><br /><li><a href="#">3</a></li><br /><li><a href="#">4</a></li><br /><li><a href="#">5</a></li><br /><li><a href="#">6</a></li><br /><li><a href="#">7</a></li><br /><li><a href="#">8</a></li><br /><li><a href="#">9</a>...</li><br /><li><a href="#">15</a></li><br /><li><a href="#">16</a></li><br /><li class="nextpage"><a href="#">next »</a></li><br /></ul><br /></div><br />


Sólo hay que reemplazar las celdillas que aparecen tras cada a href= por la URL del sitio... y santas pascuas :)

¡Ah!: al pasar el cursor por encima de cada número, podéis ver el nombre del blog al que corresponde (en la barra del navegador, abajo de vuestra pantalla)