giovedì , 25 Aprile 2019

Widget degli Ultimi Post per Etichetta con Miniature per Blogger

Si va su Modello < Backup/Ripristino > Scarica modello completo per un backup di sicurezza. Successivamente si va sempre su Modello > Modifica HTML > Procedi e, pigiando F3 o Ctrl+F, si cerca la riga  ]]></b:skin>. 

Per inciso ricordo che alcune volte in questa riga va a finire anche la parentesi graffa che chiude il CSS precedente diventando così }]]></b:skin>. 

loading...

In questo caso bisogna ricordarsi di inserire il cursore subito dopo la parentesi graffa e cliccare su Invio per separarla. 

Subito prima della riga colorata di rosso incollare i seguenti fogli di stile:

/* Ultimi Post per Etichetta */ 
img.label_thumb{ 
float:left; 
border:1px solid #7e7e7e; /* Colore del bordo delle miniature */ margin-right:10px !important; 
height:55px; /* Altezza delle miniature */ 
width:55px; /* Larghezza delle miniature */ 

.label_with_thumbs { 
float: left; 
width: 100%; 
min-height: 70px; /* Altezza elemento */ 
margin: 0px 10px 2px 0px; 
padding: 0; 

ul.label_with_thumbs li { 
padding:8px 0; 
min-height:70px; 
margin-bottom:10px; 

.label_with_thumbs a {} 
.label_with_thumbs strong {padding-left:0px;}

parametri colorati di rosso possono essere modificati secondo il significato specificato nei commenti a fianco colorati di verde.

Adesso occorre cercare la riga </head> e, subito prima,incollare quest’altro codice:

<!– Ultimi Post per Etichetta Inizio –>

  <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://lh4.googleusercontent.com/-goMMvqqAMTs/Tp_qmX2LqtI/AAAAAAAAUus/fZ4PL3GX96s/s70/no-image.jpg’;}

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>

<!– Ultimi Post per Etichetta Fine –>

Nel codice è presente l’URL della immagine di default che viene visualizzata quando non ne è presente nessuna all’interno del post. Tale URL può essere sostituito da quello di un’altraimmagine quadrata.

Si salva il modello. Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla questo ultimo codice:

<script type=’text/javascript’> 
var numposts = 4; 
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/-/nome-etichetta?published&alt=json-in-script&callback=labelthumbs”></script>

dove al posto di nome-etichetta si inserisce il tag di cui vogliamo visualizzare gli ultimi articoli

Si clicca su Salva e si posiziona l’elemento nel punto prescelto della sidebar

I parametri hanno il seguente significato

  1. var numposts                   : numero degli articoli da visualizzare

  2. var showpostthumbnails   : mostrare le miniature (true), non mostrarle (false)

  3. var displaymore               : mostrare o non mostrare il link del Read More (true o false)

  4. var displayseparator        : mostrare o non mostrare un separatore tra i vari elementi (true o false)

  5. var showcommentnum       : mostrare o non mostrare il numero dei commenti (true ofalse)    

  6. var showpostdate            : mostrare o non mostrare la data dei post (true o false)

  7. var showpostsummary      : mostrare o non mostrare l’incipit dei post (true o false)

  8. var numchars                   : il numero dei caratteri dell’incipit degli articoli (100)

Se volete visualizzare gli ultimi post di una etichetta formata da due parole divise da uno spazio, ricordo che bisogna usare i caratteri %20.

Se per esempio vogliamo creare il widget per il tag primi piatti occorre inserire al posto di nome-etichetta l’espressione primi%20piatti.

Ricordo infine che le etichette sono case sensitive e che quindi le minuscole sono considerate diverse dalle maiuscole

Widget degli Ultimi Post per Etichetta con Miniature per Blogger
Vota questo articolo
loading...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *