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

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.

Durante 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.

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...).

#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/AVvXsEjUd-guWZF4y3qiVv8TZfCjWF8YjoIScZRhG6CXBqzHyzJnNhthltAu3fSnQaJy13-Cg4sQ3wAB23SGLrj-iYgNSE2vinghW09dFEkCH-XJ_0HkFEH7T0F6_pjGcPBhMS6lzABdJw4tcQA/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>

//<![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/AVvXsEidU6eNtsP6BR4_KtQDjR0r_KZfLtZ8JSAli0Bf1Wea7_tlh4hh5lrhGkpp-nPH9DaYee_GjHYaNsi6Gp0FUj0WaKu96E2DBkch4Jk0uHJGNc9ICZER-7ZgLkOLhPwwwPwAnPiuUFrS1O0/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>

http://borjasanzweb.blogspot.com/2013/11/widget-entradas-recientes-con-imagenes.html

********************************************************************

Últimas entradas por categorías con imagen en miniatura

Algunas veces queremos tener todo muy organizado para que nuestros lectores puedan encontrar con mayor facilidad los temas de su interés, y es ahí cuando en lugar de poner un gadget con las últimas entradas queremos poner sí las últimas entradas pero por categorías, de manera que puedas mostrar las últimas entradas por cada etiqueta que quieras y además mostrar la miniatura de dicho elemento.

Para poner en tu blog este gadget de últimas entradas por categorías realizaremos estos sencillos pasos:
1.- Entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

/* Últimas entradas por categorías
--------------------------------- */
img.label_thumb{
float:left;
border:1px solid #8f8f8f; /* Borde de las miniaturas */
margin-right:10px !important;
height:55px; /* Alto de las miniaturas */
width:55px; /* Ancho de las miniaturas */
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {padding-left:0px;}

2.- Luego antes de </head> pega este script:

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmuzTg3byYhpyyU7ZZjhriPIM8E7EiwC_Kc1O276Nf1kaL1bzgR3Du2LvvxrjRrl9k3dHj67zaWHs4bJPXO3eb-RJIplZBQGaiugliOQd2vR_PRrcfk34YKIRFbiuyFsGBorqPdUTSFe4/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Ene";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Abr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Ago";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dic";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

3.- Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Nombre-de-la-etiqueta?published&alt=json-in-script&callback=labelthumbs"></script>

En donde dice Nombre-de-la-etiqueta va el nombre de la etiqueta que quieres mostrar, tal como es, respetando mayúsculas y minúsculas. En el caso que la etiqueta contenga espacios o acentos lo mejor es que ingreses a la etiqueta y te fijes en la URL que aparece en la barra de direcciones del navegador, al final de la URL vendrá el nombre de la etiqueta tal como debe ponerse, por ejemplo, si tuviera espacios se vería así:

http://Nombre-de-mi-blog.blogspot.com/search/label/Nombre%20etiqueta

También dentro de éste último código hay unas áreas que podemos personalizar, true significa que lo mostrará y false que no lo mostrará.

var numposts ← Número de entradas a mostrar
var showpostthumbnails ← Mostrar o no las miniaturas
var displaymore ← Mostrar o no el enlace para leer más
var displayseparator ← Mostrar o no un separador
var showcommentnum ← Mostrar o no el número de comentarios
var showpostdate ← Mostrar o no la fecha de las entradas
var showpostsummary ← Mostrar o no el resumen de las entradas
var numchars ← Número de caracteres en los resúmenes

Y en el segundo código hay una URL en color naranja, esa es la imagen que se mostrará cuando la entrada no contenga ninguna imagen, puedes cambiarla por otra imagen si lo deseas.

Recuerda que el gadget muestra las ultimas entradas de una etiqueta en particular, por lo tanto, si quieres mostrar las últimas entradas de otras etiquetas entonces sólo tienes que repetir el paso #3 por cada categoría adicional que quieras agregar.

http://www.ciudadblogger.com/2011/05/ultimas-entradas-por-categorias-con.html

Costura Binaburo

domingo, 10 de febrero de 2019

Entradas recientes con imagenes

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

Últimas entradas por categorías con imagen en miniatura

BTemplates.com

Categories

Popular Posts

Blog Archive

Blog Archive

Blogroll

About

Labels