Tutorial de últimas entradas subidas con imágenes
Yo lo tengo debajo de la entrada, por eso el ancho, si lo ponen en la sidebar ser verá mas angosto. Y el fondo es transparente, así que no se verá rosa en sus blogs, sino del color que tengan ustedes.
Vamos a Diseño, añadir un gadget, HTML/JavaScript, ponemos el título elegido, puede ser últimas entradas, o entradas recientes, y en contenido pegamos el siguiente código:
<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:79px} .mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px} .mas-elemen h6,.mas-elemen h6 a{font-size:16px!important;font-weight:700!important;margin:0;color:#111} .mas-elemen:hover{background-color:#c3c3c3} .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;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/AVvXsEg5qNghiHqOFRJRsjuQLVC-uO96xtTrPdw3Lt-7_oZZM5nmFimRPgdBpyE8rH9smFcrsS30LC2k9_RBdVC6ctRUb9_0AVG7cEMhxF372rYxdCw-QqXLfimVKHeP1StkeYjMcvPwW_LNT_s/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:12px;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 = 5; var startfeed = 0; var urlblog = "https://musicayamigoscom.blogspot.com/"; var charac = 90; 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/AVvXsEijj_8Y7BC2Drr04FyzvHQjKljrzAF57T_zKjLiRjQqXxgYKmQ1Xe6YCdPUSKlabUnS2nA5yt2otgRvc7_gpi8qDiOoByovYIO_6fqZFPRhi06uyEiFNpQe027yofQdJ_1NEtyp81oPEUQ/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'>◄ Previous</a>"; } else { showblogfeed += "<span class='noactived previous'>◄ Previous</span>"; } if(urlnext) { showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>"; } else { showblogfeed += "<span class='noactived next'>Next ►</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> |
También están las variables
var numfeed = 5; (número de entradas que queramos ver)
var charac = 90; (número de caracteres de la leyenda o sumario)
Una vez seleccionado todo lo que queramos cambiar, le damos a guardar.
Y ahí mismo en diseño, podemos arrastrarlo hacia otra sección (en sidebar, abajo de la entrada, etc)
y guardamos nuevamente.
Fuente; ayudadeblogger.com
