√ Mostrar todas las entradas del blog en un gadget

Os dejo la forma de visualizar todas las entradas del blog de una forma parecida a post populares pero con la función de poder ir pasando los artículos mediante los enlaces "Anterior y Próximos".

DEMO

Veamos como instalarlo en nuestras plantillas:

Vamos a comenzar añadiendo el Css a la plantilla y para ello seguimos los siguientes pasos:

1. Entra en la configuración del blog.

2. Haz click en la pestaña "Plantilla".

3. Haz click en el botón "Editar HTML".

4. Haz click en "Expandir plantilla de artilugios".

5. Busca el siguiente código: ]]></b:skin>

y justamente encima pegamos lo siguiente:

#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:14px!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:12px 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/AVvXsEhuUZqhPsnsbqVbFMbJmIy-A7QyHthirmIt6QdAzPzCCtL65t09um1O18hRSLtRN5IvApaacSjTWsxNMS5wNK-uUKOXc53zSk-BMCUvgrL2fQkJUWh0mF77FPUAi6NfLEKoBSfEhbIw8Sk/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}

A continuación buscamos:

</head>

y justamente encima pegamos lo siguiente:

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://amorsevillista.blogspot.com/";
var charac = 100;
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/AVvXsEh2JiqqqfWXdgC6bS0u_MLDuCgpafGFjn-FjeJGZ-jMoxdRffHnoAQMktEYKOt6LTF28ssYyYzChLDB0br2mfu0bDEleRXsx-fa3Q6JB4fQjpIFH5JXmEPGD1jtDalbA5Gja3gW-AeW-WI/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'> ◄Anterior</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Anterior</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Próximo ► </a>";
} else {
showblogfeed += "<span class='noactived next'>Próximo ► </span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Inicio</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>

Después de guardar la plantilla ir a diseño. Haga clic en Agregar artilugio de HTML / Javascript introduzca el siguiente código en él:

<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

Personalización:
Css:
.mas-elemen img ; Nos muestra la altura y anchura de cada miniatura de imágen en height:70px y width:70px.
Script:
var numfeed = 5; Nos muestra la cantidad de post visibles en el gadget
var urlblog = "http://amorsevillista.blogspot.com/"; >> reemplazarlo con la URL de tu blog.
var charac = 100; número de caracteres o letras que se muestran en cada post..

Guardar y ver los resultados.

Si no lo tiene claro, por favor deja un comentario más abajo e intentaremos solucionarlo. Buena suerte y espero que os sea útil.. .....