Widget para Blogger que muestra las entradas recientes mediante RSS con imágenes en miniaturas de otros blogs.
Un problema que enfrentamos algunos bloggeros que no tenemos conocimiento de programación , es de encontrar widgets actualizados que muestren el contenido de nuestros otros blogs.
Pasé mucho tiempo buscando un widget que muestre las publicaciones de mis otros blogs de Blogger, los que encontré ya no eran funcionales, los scripts dejaron de funcionar, por suerte tenía un script guardado en el sitio webs.com y antes de que fuera borrado lo descargue y copie el Javascript directamente en la plantilla.
El problema con ese widget es que las miniaturas se distorcion cuando se les quería cambiar de tamaño y usaba jquery, aumentando la carga de mi blog, entonces lo modifiqué y quedó de la siguiente manera:
En el widget puedes cambiar el tamaño de las miniaturas, en este caso estan configuradas a 125x125px, además de el tamaño dela fuente del titulo. puedes ver la demostración del widget en la sidebar de mi blog de imágenes tiny.
Pasé mucho tiempo buscando un widget que muestre las publicaciones de mis otros blogs de Blogger, los que encontré ya no eran funcionales, los scripts dejaron de funcionar, por suerte tenía un script guardado en el sitio webs.com y antes de que fuera borrado lo descargue y copie el Javascript directamente en la plantilla.
El problema con ese widget es que las miniaturas se distorcion cuando se les quería cambiar de tamaño y usaba jquery, aumentando la carga de mi blog, entonces lo modifiqué y quedó de la siguiente manera:
[<div class="Recents-Posts-Widget1" style=" font-family: Arial, sans-serif ; font-size: 12px; text-overflow: ellipsis; "> <style type='text/css'> /* Estilo para el contenedor de las miniaturas */ .recent-posts-widget-container { display: flex; flex-wrap: wrap; padding: 10px; margin: 0; } /* Estilo para cada miniatura */ .recent-post-thumbnails{ width: 125px; /* Ancho de cada miniatura */ margin-bottom: 20px; /* Espacio entre miniaturas */ box-sizing: border-box; } /* Estilo para las miniaturas */ img.recent-post-image { padding: 4px; width: 100%; height: auto; border: 0; object-fit: cover; } /* Estilo para las publicaciones */ .recent_posts_with_thumbs{ list-style: none; padding: 0; margin: 0; } } </style> <div class="recent-posts-widget-container" id="recent-posts-thumbnails"></div> <script style='text/javascript'> function showrecentpostswiththumbs(json) { var posts = json.feed.entry; var thumbnails = document.getElementById("recent-posts-thumbnails"); for (var i = 0; i < numposts && i < posts.length; i++) { var entry = posts[i]; var posttitle = entry.title.$t; var posturl = ""; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == "alternate") { posturl = entry.link[k].href; break; } } var thumburl = ""; try { thumburl = entry.media$thumbnail.url.replace('s72-c', 's125-c'); } catch (error) { thumburl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl1TxYcN-n6uQ6BHIRdOhsuvkZNGw_4N8g2n1lKhEnx6rC9k8mErCmjfR5bFLaleXpeyU2NVZfvaTJtw1RroIANqT691OaJIc-K6xPGARPrpR0zClgwxPwcEgPJuGKSRg6EE3PzhIeuszQsX42PUkb-VpgfB1VvP5rY4inm8siHl4Lqw6ZRbaQdoOyzkU/s1600/no-pic.jpg'; } var div = document.createElement("div"); div.className = "recent-post-thumbnail"; var img = document.createElement("img"); img.className = "recent-post-image"; img.src = thumburl; var a = document.createElement("a"); a.href = posturl; a.target = "_top"; a.textContent = posttitle; div.appendChild(img); div.appendChild(a); thumbnails.appendChild(div); } } </script> <script style='text/javascript'> var numposts = 6; var showpostthumbnails = true; </script> <script src='https://www.example1.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> <script style='text/javascript'> var numposts = 6; var showpostthumbnails = true; </script> <script src='https://www.example2.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> <script style='text/javascript'> var numposts = 6; var showpostthumbnails = true; </script> <script src='https://www.example3.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> </div>]
En el widget puedes cambiar el tamaño de las miniaturas, en este caso estan configuradas a 125x125px, además de el tamaño dela fuente del titulo. puedes ver la demostración del widget en la sidebar de mi blog de imágenes tiny.
