16 marzo 2013

Mostrar todas las entradas del blog en un gadget


gadget mostrar todas las entradas
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".

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(http://1.bp.blogspot.com/-vBDcLG_CXzU/UBqEMTknKcI/AAAAAAAAIHE/pZTfBZLbPwY/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 = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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/"; &gt;&gt; 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.. .....




38 comentarios

¡Muchas gracias! ¡Me salió perfecto! :)

Hola! Cuando guardo plantilla, me da error en una línea y no me deja guardar los cambios. Tengo una duda, debo pegar al lado de los códigos que nos indicas, antes o borrarlo y ponerlo en su lugar?

Mil gracias!

Si lees bien podrás solucionarlo, los códigos se pegan "antes."
Ten cuidado al copiar no vayas a copiar más que estrictamente el código.

Genial! Listo. Me confundía la explicación copiar encima... Gracias es muy cualitativo.

A mí no me da error ni nada, pego el código justo arriba de "]]>" y de "< / head >", pongo la url de mi blog en lugar de la de amorsevillista, pero nada de nada, sigue igual que estaba...

Milivs, has colocado también el último código en un gadget/Html?

sí, también lo he colocado en el gadget

Gracias Antonio si que me sirvio y me gusto mucho para mi Blog porque estaba manejando uno que era entradas reciente y entradas populares y este me simplifico todo en uno solo. Nuevamente gracias por tu ayuda.

De nada Gilda, me alegro que encontrases lo que buscabas.

Saludos Antonio, en público me funciona; pero ¿hay alguna manera de implementarlo en blog PRIVADO?.

Gabriel, no logro comprender a que te refieres con blog privado.

Saludos nuevamente, me refiero a un blog mío que tiene permisos solo para 5 autores.
Gracias.

Gabriel, he realizado diferentes pruebas en varios Blog, colocando el Blog en privado para ciertos lectores y aún así sigue siendo visible el gadget.

Desconozco el motivo por el cual no es visible en el tuyo.

Es cierto se ve; pero siempre y cuando en var urlblog pongas una url de blog público.
Gracias por tu tiempo, un saludo.

hola buen post pero tal ves la gente busque un programa para ver todas las entradas desde una aplicacion desde el escritorio y ver si tienen entradas repetidas o no aqui el video
http://youtu.be/D6mOrjhawdk

no tengo la opcion "expandir plantilla de artilugios" tengo una que dice "restablecer plantillas de artilugios a valores predeterminados"

Julián, expandir plantillas de artilugios era en la vieja interfaz, ahora solo debes buscar ]]></b:skin> y antes de eso pegar el primer código.

Hola!
Me preguntaba si se podría introducir un gadget parecido a este que comentas, el de "Recent Posts", dentro de las propias entradas.
Sería para colocarlo en lugar del gadget LinkWithin.

Saludos.

Tomás, si que se puede aunque habría que modificar un poco el código.

Observa esta página de ejemplo

Quiero colocar el gadget "recent posts" justo como lo tienes en esa página de pruebas. Lo he intentado poner a esa altura, pero al previsualizar la plantilla me da error.
El código de este gadget tiene como id "Gadget1", pero no me deja cambiarlo.

Tomás, hay que instalar la última parte del código de otra forma, concretamente en la plantilla y debajo de post-footer-line-1, post-footer-line-2 o post-footer-line-3.

http://rubenromerovivancosdibujo.blogspot.com.es/

Gracias, sos un duro. Sin embargo, quisiera saber si es posible cambiar el color de las letras. he intentado pero no he podido, ya que el fondo de la barra de mi blog no es blanca.

O no sé que opinas si haya necesidad de cambiar o así se vea bien. Ustedes que dicen. Aquí dejo un link de mi blog para que tú o los demás lectores lo miren y opinen acerca del widget, si está bien ubicado, si se le puede hacer alguna modificación, etc. Gracias. Saludos.

http://salud-fisica-mental-y-espiritual.blogspot.com/

Este comentario ha sido eliminado por el autor.

Muchas gracias!!
Todo perfecto!!!
Tambien tengo la misma duda que Andy C Z
SALUDOS

Aparantemente hay modificar en el texto descripto luego de ]]>

#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(http://1.bp.blogspot.com/-vBDcLG_CXzU/UBqEMTknKcI/AAAAAAAAIHE/pZTfBZLbPwY/s1600/loading.gif) no-repeat 50%

Es asi?

Andy para cambiar el color del resumen de las entradas busca este trozo:
.mas-elemen p y cambia el color 555 por fff este es blanco.

Anibal para cambiar el color del resumen de las entradas busca este trozo:
.mas-elemen p y cambia el color 555 por el que desees.

tabla de colores

hermano buen aporte, pero tengo un problema.. me salen las entradas antiguas y las imágenes no se me ven.. que debería hacer?? gracias de ante mano..

Franciscana, observo que ya lo has solucionado, pero tienes algunas entradas sin imagenes y se ve feo, te recomiendo que cambies esta imagen del script y coloques una del logo de tu blog u otra que represente tu blog para que no te salga "no imagen avalaible"

Busca esto: http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg y cámbiala por la tuya.

Gracias, muy interesante. Lo pondré en mi blog.

lo puse en mi blog y lo modifique (tamaño imagenes y colores) pero lo que no logro es cambiar el color del texto al pasar el mouse x encima, como se hace???

Había que añadirlo, por eso no podías.
Ya está colocado.

Hola, muchas gracias. Me gustaría hacer este resumen pero por etiquetas, he estado tocando código pero no lo consigo. ¿Sabrías como hacerlo? Muchas gracias

Almudena, para ello busca este trozo de código:
var archievefeed = urlblog + "/feeds/posts/default"+ parameter; y a continuación de default añadele esto: /-/nombre-etiqueta y te debería quedar así:

var archievefeed = urlblog + "/feeds/posts/default/-/nombre-etiqueta"+ parameter;


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"