Podremos crear un atractivo sitemap para nuestro sitio creado mediante CSS, y así hacer que Google indexe mejor nuestras páginas.
Aquí se enseña mediante unos sencillos pasos a crearlo:
- Iniciamos creando el código HTML mediante una lista metida en un div:
- Ya estaría listo, pero quedaría muy feo sin CSS, así que le añadiremos un poco de CSS:
<div <del datetime="2007-10-20T04:08:18+00:00"><ins datetime="2007-10-20T04:08:18+00:00">id</ins>="sitemap"> <ul> <li>Web Root <ul> <li>stuff <ul> <li>nested-deep <ul> <li>nested-deeper <ul> <li>nested-deepest</li> </ul> </li> </ul> </li> <li>nested deep</li> </ul> </li> </ul> </li> </ul> </div>
#sitemap { font:normal 16px Arial,sans-serif; overflow:hidden; } #sitemap ul { list-style:none; margin:0; padding:0; } #sitemap li { background-color:#eee; margin:0 0 -0.1em; min-height:1em; padding:.2em .4em; position:relative; width:9em; } #sitemap ul ul { font-size:90%; margin-top:-1.4em; } #sitemap ul ul li { background:#ddd; border-top:0.5em solid #fff !important; border-left:0.5em solid #66c; left:10.4em; } #sitemap ul ul ul li { background:#ccc; border-color:#9c3; } #sitemap ul ul ul ul li { background:#bbb; border-color:#c93; } #sitemap ul ul ul ul ul li { background:#999; border-color:#c33; color:#fff; }
Listo, ya estaría creado.
(Si deseamos crear el efecto al expandir el directorio, necesitaremos usar JQuery en “collapse directory”, para recrear este bonito efecto).
Vía | beTech