Agregar el gadget de Entradas Recientes en Blogger y personalizarlo

Mostrar la últimas publicaciones de tu blog en cada entrada ayuda a incrementar las visitas en tus posts recientes al igual que aumenta la interacción y tiempo dentro de tu blog. Facilitar este gadget para el uso de tus usuarios hace más agradable y fácil la navegación entre publicaciones.

Contenido

1. Instalación
1.1 Infografía ¿Cómo instalar?

1.2 Estructura

2. Personalizar el gadget "Entradas Recientes"
2.1 ID del gadget HTML/JavaScript

2.2 Infografía ¿Cómo instalar?

3. Resultado de este tutorial
4. Video tutorial de instalación
5. Referencias

1. Instalación

Primero te diriges a Diseño, una vez que estés ahí entras en Añadir un gadget y agregas HTML/JavaScript

Figura 1. Gadget HTML/JavaScript

Dentro de este gadget colocas el siguiente Código JavaScript

Tabla 1
Código JavaScript para agregar las entradas recientes

<div id='RecentsPosts'>Publicaciones Recientes</div>

<script type='text/javascript'>
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='URL de la Imagen';
}
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Ene";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Abr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Ago";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dic";document.write('<li class="clearfix">');
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><h4><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b></h4>');
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}
var towrite='';var flag=0;
document.write('<br><strong>');
if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+' - '+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true){
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='0 Comments') commenttext='0 comentarios';
if(commenttext=='1 Comment') commenttext='1 comentario';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
if(displaymore==true){
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==true)
if (i!=(numposts-1))
document.write('');
}document.write('</ul>');
}
//]]>
</script>
<script style='text/javascript'>
var numposts = 4;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 120;</script>
<script src='http://URL de tu Blog/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

1.1 Infografía ¿Cómo instalar?

Figura 2. Infografía ¿Cómo instalar?

1.2 Estructura

<div id='RecentsPosts'>Publicaciones Recientes</div>

Esta parte es opcional, hay algunas plantillas en las que no pueden admitir agregarle un Titulo al Gadget es por eso que se agrego esta linea en caso de no poderse configurar el titulo, en caso de no ocupar esta linea se puede borrar.

thumburl=d;} else thumburl='URL de la Imagen';

En esta parte puedes poner una imagen predeterminada en caso de que algún post no contenga una imagen propia.

if(showpostthumbnails==true)

Aquí selecciona si quieres o no mostrar una imagen en miniatura de la publicación siendo true/false como mostrar/ocultar.

<script style='text/javascript'>

var numposts = 4; Numero de publicaciones a mostrar

var showpostthumbnails = true; Imagen en miniatura del post

var displaymore = false; Más Información

var displayseparator = false; Linea vertical separador

var showcommentnum = false; Número de comentarios

var showpostdate = false; Fecha

var showpostsummary = false; Resumen

var numchars = 120;</script> Número de caracteres a mostrar

En esta zona del javascript se encuentran las configuraciones para mostrar la información necesaria de cada post, las opciones true/false se refieren a mostrar/ocultar, puedes elegir la configuración como mejor te convenga

<script src='http://URL de tu Blog/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

La lectura en este gadget se realiza a traves del Feed RSS

2. Personalizar el gadget "Entradas Recientes"

En la barra lateral izquierda te diriges a Tema, luego a un lado del botón Personalizar aparece una flecha apuntando hacia abajo le das clic ahí y aparece un menú y seleccionas Editar HTML. Ahora en la plantilla HTML colocas antes de ]]></b:skin> los siguientes Estilos CSS.

Tabla 2
Estilos CSS para personalizar el gadget de las entradas recientes

/* Entradas Recientes */

img.recent_thumb { /* Imagen en miniatura */
padding:2px;
width:10%;
border-radius: 50px;
border:;
float:left;
margin:5px 10px 10px 0;
border: 2px solid #fff;
-webkit-box-shadow: 3px 3px 6px 0px #000000;
box-shadow: 3px 3px 6px 0px #000000;
}

.recent_posts_with_thumbs { /* Lista general de Entradas */
float: left;
width: 100%;
min-height: 100px;
margin: 0px 0px 5px 0px;
padding: 0;
font-size:12px;
}

ul.recent_posts_with_thumbs li { /* Margenes entre publicaciones */
padding-bottom:5px;
padding-top:5px;
min-height:85px;
}

.recent_posts_with_thumbs a { /* Links */
text-decoration:none;
}

#HTML { /* Contenedor general */
margin-top: -40px;
width:75%;
float: right;
display: block;
margin-left: ; margin-right: 25px;
}

#HTML h2 { /* Titulo del gadget */
}

#HTML h3 {  /* Titulo 2 del gadget */
text-transform: capitalize;
font-family: Neuton;
font-size: 30px;
font-weight: bold;
margin-left:  !important;
color: #000;
margin-top: ;
}

#HTML h4 {  /* Títulos de los posts */
margin-top: 4%;
font-size: 20px;
color: #000;
font-weight: bold;
}

#HTML ul {  /* Lista de Entradas Recientes */
list-style-type: none !important;
max-width:92.7%;
margin-left: 0 !important;
margin-right: 0 !important;
background-color:  !important;
padding-left: 7.5% !important;
}

#HTML #RecentsPosts{  /* Titulo 3 del gadget opcional*/
font-size: 35px;
color: #000;
padding-top: 15px !important;
padding-left: 40px !important;
font-weight: bold;
}

@media (max-width: 576px) and (max-width: 768px){ /* Resolución en pantalla */
#HTML {
width:100%;
margin-left: auto; margin-right: auto;
}
#HTML ul{
max-width:100%;
}
img.recent_thumb {
padding:2px;
width:20% !important;
border-radius: 50px;
border:;
float:left;
margin:5px 10px 10px 0;
border: 1px solid #fff !important;
-webkit-box-shadow: 3px 3px 6px 0px #000000;
box-shadow: 3px 3px 6px 0px #000000;
}
#HTML ul {
list-style-type: none !important;
max-width:100%;
margin-left: 0 !important;
margin-right: 0 !important;
background-color:  !important;
padding-left: 0 !important;
}
ul.recent_posts_with_thumbs li {
padding-bottom:0px !important;
padding-top:0px !important;
min-height:85px;
}
}

@media (max-width: 900px) { /* Resolución en pantalla */
#HTML {
width:100%;
margin-left: auto; margin-right: auto;
}
#HTML ul{
max-width:100%;
}
img.recent_thumb {
padding:2px;
width:15%;
border-radius: 50px;
border:;
float:left;
margin:5px 10px 10px 0;
border: 1px solid #fff;
-webkit-box-shadow: 3px 3px 6px 0px #000000;
box-shadow: 3px 3px 6px 0px #000000;
}
#HTML ul {
list-style-type: none !important;
max-width:100%;
margin-left: 0 !important;
margin-right: 0 !important;
background-color:  !important;
padding-left: 0 !important;
}
ul.recent_posts_with_thumbs li {
padding-bottom:0px;
padding-top:10px;
min-height:85px;
}
}

/* Fin Entradas Recientes */

Nota.Existen varios Títulos pero esto se debe a la configuración de cada uno de los blogs y en caso de que el titulo del gadget no funcionara se añadió una linea extra en el Tabla 1 que puedes utilizar. En las resoluciones de pantalla siguen los mismos patrones.

2.1 ID del gadget HTML/JavaScript

Para que el Código 2 CSS tenga el efecto aplicado sustituiremos los #HTML en color rojo y los sustituiremos por las ID que se encuentren en la cuenta de tu blog. Una vez que estamos en la Plantilla HTML para editar, nos dirigimos Ir al widget (icono de 4 cuadros) este se encuentra arriba de la Plantilla del lado derecho. Para una forma de buscarlo rápidamente podemos ponerle un titulo cuando añadimos este gadget en Diseño. Una vez que lo ubicamos copiamos el ID que seria algo similar a lo siguiente en color azul, este dependerá de cada cuenta y blog al que deseas aplicarlo:

<b:widget id='HTML3' locked='false' title='Últimas Publicaciones:' type='HTML' visible='true'>

2.2 Infografía ¿Cómo instalarlo?

Figura 3. Infografía ¿Cómo instalar?

3. Resultado de este tutorial

Este tutorial fue aplicado en Blogger Template Style - Name: Soho. También en la plantilla Name: Contempo pero con otras configuraciones en los Estilos CSS siguiendo la misma estructura.

Figura 4. Resultado Entradas Recientes

4. Video tutorial de instalación

5. Referencias

Coma-Media (2021, noviembre 23). Ambiente profundo [Soundtrack]. Pixabay. https://pixabay.com/music/ambient-deep-ambient-11051/

luis_molinero (s/f). Hombre guapo sosteniendo algo [Fotografía]. Freepik. https://www.freepik.com/free-photo/handsome-man-holding-something_1133269.htm

MDN Web Docs (2022, enero 01). CSS Tutoriales [Publicación en un sitio web]. https://developer.mozilla.org/es/docs/Web/CSS

MDN Web Docs (2022, enero 01). CSS básico [Publicación en un sitio web]. https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/CSS_basics

SOULDHACKO (2012, agosto) Gadget de entradas recientes con imagen [Publicación en un blog]. https://souldhacko.blogspot.com/2012/08/gadget-de-entradas-recientes-con-imagen.html

W3C (2022, enero 01). Hojas de estilo en cascada pagina de inicio [Publicación en un sitio web]. https://www.w3.org/Style/CSS/

W3schools (2021). HTML El lenguaje para construir páginas web [Publicación en un sitio web]. https://www.w3schools.com/