Tutorial: Crear un listado para mostrar las entradas o post más leídos en un blog

Para crear un listado con los artículos más leídos de nuestra web, voy a usar tanto html como css.

Pero, es a nivel básico y voy a proporcionar el código.

Lo primero es crear un listado no ordenado, para ello vamos a abrir una etiqueta ul.

Un detalle que debes tomar en consideración es que el foro detecta las etiquetas html.

Así que voy a colocar un asterisco dentro de la etiqueta <*ul> para abrir y en el caso del cierre <*/ul>

Para que el código funcione basta con eliminar el asterisco.

Eso mismo voy a hacer con el resto de etiquetas.

Si no lo hago así, entonces no vas a poder ver el código que es el objetivo del tutorial. En todo caso, si tienes dudas trataré de aclararte el tema.

En caso de querer que el listado sea ordenado, se usan las etiquetas ol.

Comenzamos abriendo las etiquetas para crear una lista desordenada:


<*ul>


<*/ul>

Una vez abiertas las etiquetas ul, procedemos a abrir una etiqueta li dentro de las etiquetas ul
<*ul>
<*li> <*/li>

<*/ul>

Dentro del elemento li, voy a colocar el enlace


<*ul>
<*li><*a href="#">Entrada más leída<*/a><*/li>

<*/ul>
El resultado sin los asteriscos se vería así:

Ahora hay que colocar el resto de artículos:

<*ul>
<*li><*a href="#">Entrada más leída-1</a></li>
<*li><*a href="#">Entrada más leída-2</a></li>
<*li><*a href="#">Entrada más leída-3</a></li>
<*li><*a href="#">Entrada más leída-4</a></li>
<*li><*a href="#">Entrada más leída-5</a></li>
<*li><*a href="#">Entrada más leída-6</a></li>

<*/ul>
El resultado sin los asteriscos se vería así:


Para envolver todo y que se muestre en una caja, uso una etiqueta div, pero todavía no se va a poder ver:

<*div>
<*ul>
<*li><*a href="#">Entrada más leída-1</a></li>
<*li><*a href="#">Entrada más leída-2</a></li>
<*li><*a href="#">Entrada más leída-3</a></li>
<*li><*a href="#">Entrada más leída-4</a></li>
<*li><*a href="#">Entrada más leída-5</a></li>
<*li><*a href="#">Entrada más leída-6</a></li>

<*/ul>
<*/div>

Para que se vea la caja, hay que usar css, razón por la cual le agrego un identificador id al <*div>


<div id="agregar_fondo_caja">
<ul>
<li><a href="#">Entrada más leída-1</a></li>
<li><a href="#">Entrada más leída-2</a></li>
<li><a href="#">Entrada más leída-3</a></li>
<li><a href="#">Entrada más leída-4</a></li>
<li><a href="#">Entrada más leída-5</a></li>
<li><a href="#">Entrada más leída-6</a></li>

</ul>
</div>


Ahora hay que crear las etiquetas de estilo (style.css) y proceder a dar los estilos que deseamos:

<style type="text/css">
#agregar_fondo_caja{
font-size: 18px;
background: #FA960E;
border: 1px solid #cacaca;
padding: 12px 10px;
margin-bottom: 20px;
color: #0EFA27;}
</style>


El resultado final es:

Hola EspErpENto,

Buen tuto compi, con un poco de SEO creativo se le puede sacar bastante partido a este tipo de cositas 🙂