Oferta SiteGround Black Friday

Como hacer listas donde quieras

Cuando nos enfrentamos a un blog y no tenemos experiencia en programación de ningún tipo nos solemos llevar mas de una sorpresa. Y es que, aunque es cierto que con WordPress puedes tener un blog en pocos minutos y sin saber de programación, no es menos cierto que unos conocimientos básicos de HTML te ayudarán a mejorarlo y personalizarlo, a darle su carácter personal y único.

Es algo que todos descubrimos tarde y temprano, y al final, en los Foros, terminamos por animarnos a «tocar el código».

Pues bien, hay uno de los elementos básicos de edición que, con un conocimiento simple, podemos incorporar algo mas de alegría y personalidad a nuestro blog: las listas.

Por supuesto, puedes crear listas en un post con el editor visual, pero no estoy hablando de eso, sino de hacerlas en nuestra plantilla, incluso en los widgets de texto. Hay muchas situaciones en las que puede que quieras hacer una lista (ordenada o no) y por falta de conocimiento de como hacerlo en HTML terminas recurriendo a plugins, cosa que no es necesaria.

Para crear una lista solo necesitas conocer 3 tags HTML: ul, ol y li.

Las tags ol y ul son las etiquetas de apertura de una lista e indican si será ordenada (1, 2, 3, etc) o no, respectivamente. Por otro lado li es la etiqueta que «encierra» cada elemento de la lista, y se usa en ambos tipos de lista indistintamente.

Todas las tags HTML tienen código de apertura y de cierre, y la única diferencia es que el de cierre lleva una barra «/». De este modo,

    abriría una lista ordenada, y para cerrarla pondríamos . Lo mismo se aplica a cualquier etiqueta HTML y es uno de los errores mas corrientes. Márcatelo a fuego.

    Volviendo a nuestro tutorial de iniciación, y aplicando lo anterior, hacer una lista es tan sencillo como esto …

    Índice de contenidos

    Lista Ordenada

    El código a utilizar sería algo así:

    <ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>....</li>
    </ol>

    Y lo que obtienes es esto:

    1. Primer elemento
    2. Segundo elemento
    3. ….

    Lista sin orden

    El código a utilizar sería algo así:

    <ul>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>....</li>
    </ul>

    Y lo que obtienes es esto:

    • Primer elemento
    • Segundo elemento
    • ….

    Como puedes ver es muy sencillo, y te permitirá añadir listas allí donde quieras. Combinando estas tags con las de enlaces o imágenes puedes añadir listas de enlaces, imágenes, casi lo que quieras.

    ¿De cuánta utilidad te ha parecido este contenido?

    ¡Haz clic en los emoticonos para valorarlo!

    Promedio de puntuación 3 / 5. Total de votos: 2

    Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

    Ya que has encontrado útil este contenido...

    ¡Sígueme en las redes sociales!

    ¡Siento que este contenido no te haya sido útil!

    ¡Ayúdame a mejorar este contenido!

    Por favor, dime, ¿cómo puedo mejorarlo?

    ¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

    AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)

    Sobre el autor

    3 comentarios en “Como hacer listas donde quieras”

    1. Qué coincidencia, justo hoy por la tarde estuve trabajando en algunos aspectos visuales y técnicos del blog y entre otras cosas barajé la posibilidad de hacer varias listas para los widgets de texto… Tenía alguna duda sobre ello pero ahora ya lo tengo claro… Gracias!!

    2. Novatilla en Apuros

      Hola!!,me esta viniendo de maravilla tu blog,por que tengo recien traspasado mi blog de wordpress al hosting de mi amigo Eduardo y ahora si que puedo meter mano al codigo.Asi que a aprender se ha dicho.Muchas gracias.Un saludo!!

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Información base sobre privacidad:
    - Responsable: Fernando Tellado ([email protected])
    - Fin del tratamiento: Moderación de comentarios para evitar spam
    - Legitimación: Tu consentimiento
    - Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
    - Derechos: Acceso, rectificación, portabilidad, olvido
    

     

    Scroll al inicio