Widget entradas recientes (con imágenes) para blogger.

12 comentarios
Debemos tener claro que lo prioritario en nuestro blog siempre es el contenido, pero aún así no viene mal adornarlo con un buen diseño de vez en cuando. La calidad del contenido es fundamental pero también lo es que éste sea lo más accesible, y cómodo para el lector. En este sentido, hace poco, decidí pegarle “un cambio de imagen” a mi blog e instalar un buena plantilla. (Plantillas para Blogger. Lo que debes saber.)

Widget entradas recientesDurante el cambio de plantilla, me encontré con el inconveniente de que en la página de inicio, no se mostraban las últimas entradas publicadas, lo que se conoce como “entradas recientes”. Blogger, ofrece un widget de entradas recientes, pero muy poco personalizable. Aquí os dejo el código de uno del que podéis cambiar casi todo lo que queráis.

Widget entradas recientes


Copia el código y añádelo a un Gadget HTML, luego cambia todos los parámetros que necesites. Marco en rojo algunas de las cosas que necesitarás personalizar (color background, fuentes de letra, tamaño de la imagen en miniatura, núm. de entradas, núm de palabras que se muestran en el resumen...). Si necesitas ayuda, no dudes en preguntar…

¿Qué harías tu para mejorar y personalizar tu blog?.

Si te gusta comparte…

Mañana más.

<style type='text/css'>
#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:109px}
.mas-elemen img{background:#999;padding:4px;float:left;height:64px;margin-right:8px;width:64px}
.mas-elemen h6,.mas-elemen h6 a{font-size:14px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:12px Arial;text-align:justify;color:#555;line-height:12px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-nfSWUSCJG_66pOANmGuXi4xsPjLYcBNYI310tLWOmvxsU9z-ie0vnogZjH7qNcwuUNcLFSFCmfx0MbdHBnAKd5GwS_qTzXA04BhDLtCRDv-8JuQDShGtsaR6jckJe05dwuS6FDDXZto/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:10px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 6;
var startfeed = 0;
var urlblog = "http://TU URL";
var charac = 150;
var urlprevious, urlnext;

function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed =  showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha2tngBDan-aodbxJ44a2zCTmngniMxhkTTiHF6cWHpnRA_VvrCjwJkmtRiCRksQR3v3z44xzrEAiP07KwYX4YC3tVTU3PiGJON8WeZtUHV0n7HtRVdFLIXOLyAXOTodvXvnPJZ_nH_ug/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

12 Comentarios ...

  1. Unknown dice:

    Hola, gracias por tu ayuda. ¿Hay alguna forma de que no aparezca el título de la imagen? Quiero sólo la foto. Además, me gustaría poner todas las entradas del blog, pero sólo me aparecen 25. Espero tu respuesta..

    Gracias por todo,

    Saludos

  2. Hola Javier,

    1) Para quitar el título de la imagen:
    - busca en el código estas dos líneas

    showblogfeed += "" + posttitle + "";
    showblogfeed += "< p>" + maskolisfeed(postcontent,charac) + "...";

    BÓRRALAS

    2) Para que te muestre todas tus entradas pon "501" en
    var numfeed = 6

    3) Para eliminar el texto de descripción supongo que te habrás dado cuenta que basta con poner "0" en
    var charac = 150;


    Espero haberte ayudado.

  3. Por cierto viendo tus blogs

    http://pachuparselosdedos.blogspot.com.es/
    http://barcelonablancoynegro.blogspot.com.es/
    http://depaseoconlacamara.blogspot.com.es/

    Quizá te interese cambiar de Plantilla de diseño. Tienes muchas disponibles y muy fáciles de instalar más adecuadas para temas de fotografía.

    Consulta en:
    http://borjasanzweb.blogspot.com.es/2013/11/plantillas-para-blog-lo-que-debes-saber.htm

  4. Unknown dice:

    Hola Borja, gracias por tu ayuda.

    Copio el código y lo añado y no me aparece nada. De hecho no admite ningún Gadget HTML, he intentado poner otro (que te mandaré por correo poque es muy largo) y el blog no hace nunca nada. Es como si no pudiera poner widgets con códigos HTML ¿Sabrías decirme el motivo?

    Lo que en realidad me gustaría poner en "De paseo con la cámara" es todas las entradas en miniatura con http://www.bloggerplugins.org/2009/07/recent-posts-widget-blogger-thumnail.html?utm_source=blogger&utm_medium=recent-posts-panel&utm_campaign=gadgets pero me funciona en todos los blogs menos en este, se ha vuelto un poco rebelde ;)

    Al intentar corregir el que pude el otro día, con las indicaciones que me das, a desparecido, lo intento volver a poner y no me sale nada.

    Espero que me digas algo cuando puedas, muchas gracias por tu ayuda.

    En cuanto a lo de cambiar la plantilla de diseño, llevo algún tiempo queriéndolo hacer, a ver si consigo arreglar este tema y así le meto mano a otro.

    Abrazos,

    Gracias

  5. Hola!! he visto que en algunos blogs aparece en forma de círculo la imagen en lugar de cuadrado, cómo la puedo cambiar?

    Muchas gracias!!

    Cupcakes AMOR-diditas

  6. Hola Vianey,

    Muy buena pregunta!!, Muy pronto, también, tendrás tu respuesta!

  7. Hola Borja, gracias! en el blog que estoy intentando "editar",este gadget está puesto con la idea que se trasforme en una especie de galeria de imagenes horizontal puesta al pie del blog, ocupa 1180 el ancho, quisiera que fluyeran una imagen detrás de otra. cada imagen ocupa 100px pero queda la caja que llega hasta el final.no sé si se puede hacer esto con este código o es muy complicado. te agradecería algún consejo. gracias de nuevo!

  8. Evaviento, prueba a eliminar el texto del cada pie de foto. (En comentarios anteriores está muy facil explicado).

    ¿Cual es tu blog?

  9. Este comentario ha sido eliminado por el autor.
  10. Unknown dice:

    Como puedo hacer para que no salgan imagenes y solo el titulo y descripción??
    Un saludo.

  11. Tecno dice:

    Hola, he colocado el gadget por etiquetas, y lo he puesto en dos páginas y cuando lo pongo en una tercera página el código no me aparece. por que será? Me puedes ayudar?

  12. the king dice:

    hola disculpa me sale excelente el codigo pero en l sector de la imagen me sale imagen no disponible como puedo soluionarlo


Deja tu comentario

 
Corre, nada, vuela!. Borja Sanz web © 2013