Citas automáticas para las Entradas en Blogger con Normas APA: Guía práctica para integrar referencias
Resumen
El presente artículo ofrece una guía técnica y práctica para implementar referencias automáticas en Blogger utilizando el estilo APA (7.ª edición). Se detalla cómo generar 'citas para blogs' y 'publicaciones actualizadas (UpToDate)', incorporando estructuras HTML y estilos CSS que automatizan la inclusión de datos como autor, fecha, título y URL. La propuesta busca fomentar el reconocimiento de autoría, mejorar la ética digital y facilitar el acceso a referencias correctas en plataformas de publicación abiertas. Esta herramienta resulta esencial para quienes gestionan contenidos digitales y desean integrar buenas prácticas académicas en sus entradas de blog.
Introducción
Citar correctamente las fuentes es un pilar de la comunicación ética, especialmente en entornos digitales como Blogger, donde la omisión de créditos es común. Este artículo responde a la necesidad de simplificar el proceso de citación, proporcionando estructuras automatizadas en HTML y CSS que integran el formato APA directamente en cada entrada del blog. El objetivo es que tanto autores como lectores cuenten con una guía clara para dar reconocimiento adecuado a los contenidos. A través de ejemplos y códigos editables, se busca profesionalizar la presentación de referencias en sitios autogestionados, promoviendo prácticas de responsabilidad informativa.
Ejemplo de referencias automáticas en las entradas individuales
Referencias para Blogs
La siguiente estructura está basada en el Estilo APA para referencias y citas, pero en códigos HTML para la lectura en las plantillas en Blogger, así como también se estructura en base a la lista central de datos proporcionada por Ayuda de Blogger (s.f.). Estos códigos han sido probados en la plantilla Emporio.
El formato para las referencias en un blog de la American Psychoogical Association (2020) siguen las siguientes normas.
Ejemplo del resultado Estilo APA para Blogs
| Referencia en Estilo APA | |
|---|---|
| Referencia completa | Rosado, M.J. (2023, julio 14). Inclusión de nuevos movimientos: la cuarta ola del movimiento feminista [Video]. Fundación iS+D. https://isdfundacion.org/2023/07/14/inclusion-de-nuevos-movimientos-la-cuarta-ola-del-movimiento-feminista/ |
| Cita entre paréntesis | (Rosado, 2022) |
| Cita narrativa | Rosado (2022) |
Referencia automatica para Blogs estilo APA 7
Para colocar este formato en las entradas individuales, te diriges a Tema, Editar HTML y buscas (Ctrl+F) la siguiente linea:
Debajo de la línea anterior pegas el siguiente código.
Código para Referencias automáticas en los Blogs
<!-- Referencias en Blogger -->
<b:if cond='data:blog.pageType == "item"'>
<div class='referenceBlog'>
<div class='dataReference'><div class='citar'>
<p><img src='URL de la Imagen'/> Citar este artículo en estilo APA 7</p>
<div class='referencia'>
<!-- Lista de referencias (Articulo de blog) -->
<!-- Autor y Fecha -->
<data:post.author.name/> (<b:eval expr='format(data:post.date, "YYYY, MMMM dd")'/>).
<!-- Título del post, Título del Blog -->
<span><data:post.title/></span>. <span class='cursivaCitaReferencia'><data:blog.title/></span>.
<!-- Etiquetas Posts -->
<span><b:loop values='data:post.labels' var='label'><b:if cond='data:label.name in ["Video","Videos","Fotografía","Fotografías","Audio","Audios","Ilustración","Ilustraciones","Episodio de podcast de audio","Podcast de audio","Episodio de pódcast de audio"]'>[<data:label.name/>].<b:if cond='data:label.isLast != "true"'/></b:if></b:loop></span>
<!-- URL del Post -->
<data:post.url/>
<!-- Termina Lista de referencias (Articulo de blog) -->
<!-- Citas en el texto -->
<p><img src='URL de la Imagen'/> Cita entre paréntesis: <span class='dataReference-2'>(Mendoza, <b:eval expr='format(data:post.date, "YYYY")'/>)</span></p>
<p><img src='URL de la Imagen'/> Cita narrativa: <span class='dataReference-2'>Mendoza (<b:eval expr='format(data:post.date, "YYYY")'/>)</span></p>
<!-- Termina Citas en el texto -->
</div></div></div></div>
</b:if>
<!-- Fin Referencias en Blogger -->
Div para la Referencia Completa (class='referencia'): Este div contendrá la referencia completa del artículo, construida dinámicamente:
-
⦁ <data:post.author.name/>: Inserta el nombre del autor de la publicación
⦁ (<b:eval expr='format(data:post.date, "YYYY, MMMM dd")'/>): Aquí se usa la etiqueta b:eval para formatear la fecha de publicación del artículo.
⦁ data:post.date obtiene la fecha, y se utiliza (..., "YYYY, MMMM dd") esto la presenta en un formato como "2022, marzo 10", ideal para APA.
⦁ <data:post.title/>: Inserta el título de la publicación.
Bucle para etiquetas de formato (b:loop):
-
⦁ <b:loop values='data:post.labels' var='label'>: Itera (recorrer uno por uno) sobre todas las etiquetas (labels) asignadas al artículo.
⦁ <b:if cond='data:label.name in [...]'>: Verifica si el nombre de la etiqueta (data:label.name) es una de las palabras clave especificadas para indicar el tipo de contenido (por ejemplo, "Fotografías", "Audios", "Videos", "Ilustraciones"). Esto es ingenioso porque te permite añadir automáticamente el formato entre corchetes, como [Video], siguiendo las guías APA para medios no textuales.
⦁ [<data:label.name/>]: Si la etiqueta coincide, inserta el nombre de la etiqueta entre corchetes.
⦁ <b:if cond='data:label.isLast != "true"'/>: Esta sub-condición es para evitar añadir una coma o separador extra después del corchete si es la última etiqueta de ese tipo. (Aunque el código muestra un b:if vacío, su intención es a menudo controlar la adición de comas o espacios. En tu caso, al no haber contenido, solo asegura que no se añada nada adicional si no hay más etiquetas relevantes).
-
⦁ <i><data:blog.title/></i>: Título de tu blog, que suele ir en cursiva en las referencias APA.
⦁ <data:post.url/>: Finalmente, la URL permanente (enlace) del artículo (data:post.url).
Párrafos para las citas cortas:
-
⦁ Cita entre paréntesis: Muestra (Apellido(s), [Año]). Aquí sustituirán "Apellido(s)" por el apellido del autor (tu apellido, Mendoza Salazar). b:eval expr='format(data:post.date, "YYYY") extrae solo el año de la publicación.
⦁ Cita narrativa: Muestra Apellido(s) ([Año]). Similar a la anterior, pero en el formato narrativo donde el apellido precede al año entre paréntesis.
Manipulación de Datos
<b:eval expr='format(data:post.date, "YYYY, MMMM dd")'/>: Esta es una función de manipulación de datos. Toma la fecha (data:post.date) y la formatea de una manera específica. Es importante diferenciarlo de un script del lado del cliente, como JavaScript, que se ejecuta directamente en el navegador del usuario. El código que estamos viendo se ejecuta en los servidores de Blogger para generar el HTML.
Referencias para publicaciones que se actualizan con el tiempo (UpToDate) estilo APA 7
La estructura para las Referencias UpToDate menciona la American Psychological Association (2020) que este tipo de formato son para las publicaciones que van cambiando con el paso del tiempo. El resultado sería como se muestra a continuación.
Ejemplo del resultado Estilo APA para blogs UpToDate
| Referencia UpToDate en Estilo APA | |
|---|---|
| Referencia completa | Rebelo, A. (2023, octubre 03). Wolters Kluwer unveils generative AI Labs for UpToDate. Wolters Kluwer. Consultado el 5 de agosto de 2023 en https://www.wolterskluwer.com/es/news/wolters-kluwer-unveils-generative-ai-labs-uptodate |
| Cita entre paréntesis | (Rebelo, 2022) |
| Cita narrativa | Rebelo (2022) |
Para colocar este formato en las entradas individuales, te diriges a Tema, Editar HTML y buscas (Ctrl+F) la siguiente linea:
Debajo de la línea anterior pegas el siguiente código.
Código para Referencias automáticas en los blogs UpToDate
<!-- Referencias en Blogger -->
<b:if cond='data:blog.pageType == "item"'>
<div class='referenceBlog'>
<div class='dataReference'><div class='citar'>
<p><img src='URL de la Imagen'/> Citar este artículo en estilo APA 7</p>
<div class='referencia'>
<!-- Lista de referencias (Articulo de blog) -->
<!-- Autor y Fecha -->
<data:post.author.name/> (<b:eval expr='format(data:post.date, "YYYY, MMMM dd")'/>).
<!-- Título del post, Título del Blog -->
<span><data:post.title/></span>. <span class='cursivaCitaReferencia'><data:blog.title/></span>.
<!-- Etiquetas Posts -->
<span><b:loop values='data:post.labels' var='label'><b:if cond='data:label.name in ["Video","Videos","Fotografía","Fotografías","Audio","Audios","Ilustración","Ilustraciones","Episodio de podcast de audio","Podcast de audio","Episodio de pódcast de audio"]'>[<data:label.name/>].<b:if cond='data:label.isLast != "true"'/></b:if></b:loop></span>
<!-- Consultado -->
Consultado el <script type='text/javascript'> var meses = new Array ("enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre"); var f=new Date(); document.write(f.getDate() + " de " + meses[f.getMonth()] + " de " + f.getFullYear()); </script> en
<!-- URL del Post -->
<data:post.url/>
<!-- Termina Lista de referencias (Articulo de blog) -->
<!-- Citas en el texto -->
<p><img src='URL de la Imagen'/> Cita entre paréntesis: <span class='dataReference-2'>(Mendoza, <b:eval expr='format(data:post.date, "YYYY")'/>)</span></p>
<p><img src='URL de la Imagen'/> Cita narrativa: <span class='dataReference-2'>Mendoza (<b:eval expr='format(data:post.date, "YYYY")'/>)</span></p>
<!-- Termina Citas en el texto -->
</div></div></div></div>
</b:if>
<!-- Fin Referencias en Blogger -->Script para la automatización de la fecha:
Este es un pequeño fragmento de código que se agrega al código de la Tabla 4 que ayuda a una página web a mostrar la fecha de hoy de forma automática. En lugar de que el dueño del blog tenga que escribir la fecha cada día, este código se encarga de hacerlo solo.
Funciona de una manera muy sencilla: primero, tiene una lista con los nombres de todos los meses del año. Luego, le pide a tu computadora que le diga qué día, mes y año es hoy. Con esa información, el código busca el nombre del mes en su lista y junta todas las partes, como un rompecabezas.
El resultado final es que la fecha completa, por ejemplo, "5 de agosto de 2025", aparece donde se coloque el código en la página. Es muy útil para mostrar la fecha de publicación de un artículo de blog o en el pie de página de un sitio web para que siempre esté actualizado.
Desglose del JavaScript:
-
⦁ var meses = new Array ("enero", "febrero", ..., "diciembre"); Crea un arreglo (array) con los nombres de los 12 meses en español. Cada posición corresponde al índice del mes según Date.getMonth(), que empieza en 0 (enero) y termina en 11 (diciembre).
⦁ var f = new Date(); Crea un nuevo objeto Date que representa la fecha y hora actuales del sistema del usuario que está viendo la página.
⦁ document.write(...) Escribe directamente en el HTML del documento lo que se le indique dentro de los paréntesis.
⦁ Dentro de document.write(...) se compone la fecha de la siguiente forma:
-
⦁ f.getDate() Devuelve el día del mes (por ejemplo, 5).
⦁ meses[f.getMonth()] Usa el número del mes actual (0–11) para seleccionar el nombre del mes correspondiente del array.
⦁ f.getFullYear() Devuelve el año completo en formato de cuatro dígitos (ej. 2025).
Estilos CSS
Códigos para personalizar las referencias automáticas
/* Referencias en Blogger */
.dataReference { /* Contenedor General */
background-color: #D7DBDD;
font-family: ;
padding: 0px 5px 0px 5px;
margin-left: auto !important;
margin-right: auto !important;
}
.dataReference .referencia { /* Sangria */
padding: 0 5px 0 9%;
text-indent: -9%;
}
.dataReference .citar { /* Estilos de la Fuente de Letra */
font-size: ;
color: #000;
}
.dataReference .citar p { /* Títulos */
font-weight: bold;
text-transform:;
}
.dataReference .citar img { /* Imagen */
height: 18px;
width: 18px;
}
.dataReference-2 { /* Parentesis y Narrativa */
font-weight: normal !important;
}
/* Termina Referencias en Blogger */Notas Finales
Elementos para su modificación que están de color rojo dentro de las Tablas 2 y 4:
-
⦁ "URL del icono" Poner la imagen del icono a mostrar, puedes utilizar iconos de Google Fonts
⦁ "Apellido(s)" Escribir tu apellido para las citas directas o paráfrasis.
⦁ <data:post.author.name/> Esta linea puedes eliminarla y escribir tu nombre.
⦁ En la parte donde aparece un dato similar a este "Fotografías" puedes agregar las etiquetas que sean necesarias, recuerda separarlas con comas (,).
Para una mejor información respecto a las referencias UpToDate puedes consultar los siguientes temas en Publication Manual of the American Psychological Association:
-
⦁ 9.15 Updated or Reviewed Online Works y 9.16 Retrieval Dates, p. 290.
⦁ 14. Article from the UpToDate database, p.319.
⦁ 9.30 Database and Archive Sources, p. 296.
¿Para qué se usa? Este tipo de código es útil cuando se quiere:
-
⦁ Mostrar dinámicamente la fecha de consulta en una referencia APA.
⦁ Evitar tener que actualizar manualmente la fecha en un artículo que cambia frecuentemente.
⦁ Añadir credibilidad y contexto temporal en entradas de blog, noticias o bibliografías actualizadas.
Conclusión
Incorporar referencias automáticas con estilo APA en Blogger es una práctica clave para fortalecer la transparencia, la autoría y la credibilidad de los contenidos publicados. Este artículo ha demostrado que es técnicamente viable adaptar estructuras HTML y CSS para mostrar al lector cómo citar adecuadamente una entrada, sin necesidad de recurrir a plataformas externas. Aplicar estos estándares no solo mejora la presentación del contenido, sino que también promueve una cultura de respeto al trabajo intelectual en entornos digitales abiertos. Finalmente, se invita a los administradores de blogs a adoptar este enfoque como parte integral de sus estrategias editoriales.
Referencias
American Psychological Association. (2020). Publication manual of the American Psychological Association (7th ed.). https://doi.org/10.1037/0000165-000
Ayuda de Blogger (s.f.). Etiquetas de datos para Diseños. https://support.google.com/blogger/answer/47270?hl=es-419
Minitutoriales. (s.f.). Cómo mostrar la fecha actual con JavaScript (7 alternativas). https://minitutoriales.blogspot.com/2013/10/como-mostrar-la-fecha-actual-con.html
Oloman (2015, septiembre 19). Mostrar en entradas sólo ciertas etiquetas. Oloblogger. https://www.oloblogger.com/2015/09/blogger-artilugio-etiquetas-mostrar.html
Reedit (s.f.). ¿Es literalmente solo la segunda línea que desea sangrar, o es de la segunda línea (es decir, una sangría francesa )? (Comentario en un foro: "Aplicar sangría a partir de la segunda línea de un párrafo con CSS". QA Stack. https://qastack.mx/programming/17158253/indent-starting-from-the-second-line-of-a-paragraph-with-css
serenesat (2020, junio 22). Como JavaScript ralentiza la página, es mejor utilizar la variable de datos XHTML pura para la marca de fecha y hora, disponible en Blogger [Comentario en el foro "How to put last modified date in blog post on Blogger?"]. Stack Exchange. Recuperado el 03 de noviembre de 2021 en https://webapps.stackexchange.com/questions/28516/how-to-put-last-modified-date-in-blog-post-on-blogger
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial 4.0 Internacional. Si necesitas utilizar alguna imagen, video o audio dirígete a la información proporcionada en las referencias. Esta publicación puede o no contener material con protección de datos o derechos de autor.
article_person Citar este artículo en estilo APA 7
article_person Cita entre paréntesis: (Mendoza, 2021)
article_person Cita narrativa: Mendoza (2021)
![Entradas Populares para Blogger [Widget]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWA4bg17Pl9cMsM3AWmV1u4t1uV1GQSDS-sQclao79FHOnDSR41qXO82tUcVTWhLRRC746aunxIWZWnlKEpqYDgu57NyI1DXlxnK97aL_8lp9z9PUv-m7SDWgjTJwTmAl78CmLCkpSGZmr-VIO_PAyljl0nRP2szI2LpI2yuOuGNMbaRolQxwE12cfoXSP/w600/Entradas%20Populares%20para%20blogger.jpg "Entradas Populares para Blogger [Widget]")
![Entradas Relacionadas en Blogger [Widget]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUgpj9ok-Cd-VHW1IQRrReOPBwShhzhJHrquvmmjd5McmaYhqhFQNxaaRP3O-xrimpyNG5Kzp3cckPlFBV3L2jnp6owzoph8WhkpkGIJphoSaV1mFjnD2UNefjb-qW_MMZO3lykN2ElO4wibF5iw2qCeYwFhUDsuFoJOREz_Eetz4fXm5KV-h2A9uLezGh/w600/Entradas%20relacionadas.jpg "Entradas Relacionadas en Blogger [Widget]")
Comentarios
Publicar un comentario
No agredas a otros usuarios, no violentes ni faltes al respeto a otras personas que no conozcas.