sábado, 31 de octubre de 2015

Mostrar últimas entradas por categoria con miniatura en página de inicio de blogger



Como ya sabes blogger no utiliza categorías pero si etiquetas, así que esa sera la clasificación que utilizaremos, para añadir un cuadro de ultimas entradas en pagina de inicio de blogger debemos ir a:
Plantilla > Editar HTML, buscamos  ]]></b:skin> y pegamos 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;}


y antes de cerrar head </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/AVvXsEj5jUnsZOJea482nGcUXjMQ2Gh_OyJl83hYxtuH8jaJuxS-KvhZwrg9vZN02tUTOikq_XOGnaKN0S0LnB-M2I0Tj7YeoJV0D90LAyiH3NcV9RsY_i_oL0mBMvz8sgtDeFtCNxNeu8ePVVA/';}
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>


Por ultimo añadimos en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript


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


Cambia el nombre de la etiqueta en la area marcada en rojo por la que desees mostrar "Nombre-de-la etiqueta"

Personalización:

En el último código hay unas áreas personalizables, 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


Adicionales:

Ahora es posible que solo quieras mostrar esta clasificación en tu pagina de inicio así que lo que debes hacer es pegar antes de </head> lo siguiente:

Ocultar un elemento en todas partes MENOS en la portada del blog

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if> 

En nombre debera ir el nombre del gadget ejemplo HTML1, HTML12 etc dependiendo cual sea el que contenga el código que agregaste.



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

Ads / Multidomos

Ads / Multidomos
Construcción de domos geodésicos