Aprende como hacer una barra de paginación muy básica utilizando HTML y CSS
Muchas personas me han preguntado como he hecho la paginación este este sitio web, y la verdad es que yo no he sido el que ha programado la navegación, es un plugin de WordPress, el CMS que yo utilizo para que todo este sitio funcione. Debido a esta pregunta he decidido explicarles como hacer una paginación sencilla, para que puedan entender el funcionamiento de estas.
Las paginaciones completas se conectan al servidor y revisan que paginas son las que siguen o cuales son las anteriores, eso es mas avanzado, en este tutorial aprenderemos como hacer una sencilla, sera una paginación estática, que es mas facil de hacer pero tiene un problema, cada que queramos modificar un enlace tendremos que hacerlo a mano, editando el código y por si fuera poco, tenemos que editarlo en cada una de las paginas que tengamos. Es una gran desventaja si tienes un sitio grande, si es uno pequeño con muy pocas paginas no tendrás problema.
Comencemos por la estructura básica de HTML, yo he agregado un section con algunos párrafos de texto, para simular que es una pagina, en mi caso yo he agregado 5 paginas, por lo que tengo 5 archivos de la siguiente manera:
- pagina1.html
- pagina2.html
- pagina3.html
- pagina4.html
- pagina5.html
En cada pagina tienes que copiar y pegar la paginación, que tiene la siguiente estructura:
<section class="paginacion"> <ul> <li><a href="pagina1.html" class="active">1</a></li> <li><a href="pagina2.html">2</a></li> <li><a href="pagina3.html">3</a></li> <li><a href="pagina4.html">4</a></li> <li><a href="pagina5.html">5</a></li> </ul> </section>
Como puedes ver en el primer elemento li dentro tengo un elemento a, pero he agregado una clase llamada active, esta clase la vamos a utilizar para darle unos estilos especiales a ese botón y que el usuario sepa que se encuentra en esa pagina. Esta clase la tenemos que quitar y poner dependiendo de en que archivo nos encontremos, por ejemplo en la pagina1.html la clase estara en el primer elemento, en pagina2.html le pondremos la clase al segundo elemento y asi sucesivamente.
Ahora vamos con el código CSS de la paginación:
.paginacion {
margin:20px 0;
}
.paginacion ul {
list-style:none;
text-align: center;
}
.paginacion ul li {
display:inline-block;
margin-right:10px;
}
.paginacion ul li a {
display:block;
padding:10px 20px;
color:#fff;
background:#024959;
text-decoration: none;
}
.paginacion ul li a:hover {
background:#037E8C;
}
.paginacion ul li .active {
background:#037E8C;
font-weight:bold;
}
Y eso seria para tener la paginación, se que es complicado tener que modificarla para cada pagina, pero es una navegación estática muy sencilla, para sitios de muy pocas paginas y que sean estáticas.
Como hacer una barra de paginación (Estatica) con HTML y CSS
excelente, Yo tengo muchas paginas en mi web y esto me ayuda a darle mas estilo. Gracias Bro!
Genial me alegra que te sirva :D
es el mejo tutorial
Muchas Gracias!, esta página es muy inspiradora :)
Muito bom está paginação, valeu Falcon…
Gracias por tus aportes. Excelente trabajo… Felicidades
hola ayudame con una duda ami no me salen los numeros para poder elejirlos solo me salen como fotos no se en que estare fayando cuando le quiero dar al numero 2 por ejemplo no se puede porque aparece como foto no se puede pinchar con el mouse
Hola Falcon, primero que nada, excelentes tutoriales, de verdad, hay cosas que son muy sencillas de hacer pero uno a veces no tiene la idea de como realizarlo correctamente, tus aportes de verdad sacan a uno del «hoyo» hahaha xD
Gracias, sigue así =D
Hola que tal tocayo, la verdad es que si pasa que muchas veces no sabemos como hacer algo y en realidad es muy facil. Muchas gracias a ti :)
Buenas yo tengo un mac, me puedes decir que programa necesito para el código?
Fantastico, pero, una pregunta, ¿funciona de igual forma en PHP?
php es el lenguaje de programacion o el backend, como esto es HTML y CSS entonces si se puede implementar este menu con un codigo php
hey amigo, me podes ayudar a hacer una paginacion pero con php o con cualkier otro lenguaje de programacion… te lo agradeceria .