Come mostrare in Blogger una barra flottante con gli ultimi post o commenti scorrevoli.

Mi ricordo di aver illustrato qualche mese fa la procedura per installare gli Ultimi Articoli e gli Ultimi Commenti scorrevoli in una barra orizzontale. Vediamo adesso come fare un ulteriore passo e mostrare questo widget in modo flottante tanto da lasciarlo visibile anche quando si scorre la pagina verso il basso. Inoltre sarà inserita una icona di chiusura per dare la possibilità al lettore di nasconderlo nel caso gli desse fastidio.

Il widget può essere installato nel modello scegliendo il punto di visualizzazione o attraverso un gadget HTML/Javascript per posizionarlo nel Layout compresa la sidebar. È inoltre possibile configurare il numero dei post visualizzati, la velocità dello scorrimento e anche il verso di quest'ultimo.

Mostrerò solo come inserire il widget nel modello visto che per utilizzare un gadget basta andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare il codice in Sezioni del sito.

Widget degli Ultimi Articoli con Miniature per Blogger.

In un commento di Giuliana a un post in cui presentavo un widget degli articoli recenti con miniature mi si chiedeva se fosse possibile eliminare il numero dei commenti ricevuti da un singolo post che comparivano a lato del titolo. Ho quindi modificato il javascript per non mostrare questo dato che evidentemente è considerato antiestetico da qualcuno. Ho postato in rete un nuovo widget che può essere visualizzato in alto a destra di questo post

• Demo del widget degli Ultimi Post con miniature -

Widget degli Ultimi Post e degli Ultimi Commenti usando il gadget dei Feed di Blogger.

In Layout > Aggiungi un gadget della piattaforma Blogger sono presenti molti widget che possono essere utilizzati così come sono ma che possono anche essere piegati alle nostre esigenze. Vediamo come usare il widget dei Feed per creare un gadget degli Ultimi Post e uno degli Ultimi Commenti.

In entrambi i casi si va su Layout > Aggiungi un gadget > Feed.

Nella finestra successiva, dobbiamo semplicemente incollare l'URL i feed dei post del blog oppure quello dei feed dei commenti. Ricordo che sono

Slideshow degli Articoli Recenti con effetto Libro che si Sfoglia.

In realtà l'effetto utilizzato per la realizzazione di questo gadget si chiama Book Flip e non Libro che si Sfoglia, è caricato su Dynamic Drive e il suo autore è l'olandese Ger Versluis. La sua realizzazione risale a otto anni fa ma è ancora molto suggestivo. Attraverso questo gadget si riesce a mostrare le immagini degli ultimi post in ordine naturale o casuale con relativo link. La particolarità sta nel fatto che il movimento di scorrimento avviene come l'apertura di pagine di un libro.

• Demo degli Ultimi Post con Book Flip -

Una immagine animata spiega il funzionamento di questo slideshow più di mille parole

Widget degli Articoli Recenti con Effetto RoundAbout.

La presenza del widget che mostra gli Ultimi Articoli è un must per tutti i blog. Serve per mostrare in modo efficace quelle che sono state le ultime pubblicazioni per cercare di trattenere il visitatore nel nostro sito il più possibile. Si può scegliere uno stile minimalista, come è stato fatto al momento in questo blog, oppure optare per gadget con suggestivi effetti speciali. Ricordo solo gli ultimi due che ho avuto modo di presentare:

1. Slideshow orizzontale con gli Ultimi Post -
2. Slideshow orizzontale con Easy Slider -

Oggi ne presento un altro che è veramente sorprendente. Ne ho testato il funzionamento con tutti i principali browser con risultati positivi. Ricordo però che ogni modello è un entità a sé stante che potrebbe già avere nel suo codice dei javascript incompatibili con quelli di questo widget.

• Demo dello slideshow degli Articoli Recenti con RoundAbout -

Widget di uno slideshow orizzontale con miniature degli Ultimi Post per Blogger.

Sono sicuro che il gadget che vado a presentarvi piacerà a molti lettori e credo che saranno in tanti a istallarlo. Diciamo che va a colmare una lacuna nei widget di Blogger. Per il momento infatti di slideshow orizzontali che mostravano gli ultimi post ce n'era solo uno e con una estetica non proprio straordinaria. La realizzazione di questo widget si basa sulla libreria JQuery CarouFredSel. Si tratta di un plugin che genera degli slideshow  di immagini.

E' opportuno installarlo nella parte principale del layout, magari subito sopra all'area del post. Verranno visualizzate le miniature degli ultimi post in un movimento orizzontale da destra a sinistra. A ciascuna miniatura sarà associato il link al post corrispondente. Il movimento dello slideshow si interromperà quando ci si passerà sopra con il mouse ma solo dopo un lasso di tempo di circa due secondi. Quando si punta una miniatura, si visualizzerà il titolo dell'articolo

Slideshow Orizzontale degli Ultimi Articoli con Miniature: Widget per Blogger.

La ricerca di slideshow orizzontali per gli Ultimi Post su Blogger è sempre stata ai primissimi posti tra gli utenti di questa piattaforma. Dopo aver visto un gadget presente su Arona Immobiliare ad opera di Giorgiogal e dopo aver consultato il lavoro di Antonio Lupetti su News Ticker with Horizontal Scrolling basato sul framework MooTools, sono in grado di presentare un gadget orizzontale scorrevole che mostra miniature e titoli degli ultimi post pubblicati. Ho, come mia abitudine, inserito online una

• Demo dello Slideshow degli Ultimi Post -

E' sempre visibile con Chrome, Firefox e Opera mentre con Internet Explorer dipende da quanti e quali altri script sono presenti nel modello. In quello che ho usato come test ce ne sono di troppi per i gusti di IE ma questo non toglie che non possa essere visibile nel vostro template. Il widget mostra gli ultimi 12 articoli con miniature in due schermate di sei che si susseguono in modo automatico con effetto slide.

Widget degli Ultimi Post con effetto di transizione.

Ho presentato molti gadget per mostrare gli Articoli Più Recenti del nostro blog su Blogger. Ricordo quello semplice con solo titoli e sommario, quello più complesso con le miniature e infine il gadget slideshow, il più sofisticato. Questo widget che vado a presentare è molto originale ed è stato realizzato usando le API di Google. Può essere personalizzato nei colori  e nel numero dei post da visualizzare. La sua particolarità risiede nel fatto che saranno mostrati gli Ultimi Post con un breve sommario di solo uno di questi. Ci sarà un effetto di transizione che porterà in primo piano alternativamente tutti gli articoli dell'elenco. Per avere una idea del suo funzionamento visionatelo sulla destra del post di prova

• Demo del widget degli Ultimi Post con Effetto Transizione -

Aspettate qualche secondo per apprezzarne appieno le potenzialità. Ci sarà una freccia che indica di volta in volta il post di cui si visualizza l'incipit

Widget degli Ultimi Articoli con Miniature per Blogger completamente personalizzabile in italiano.

Ho già presentato diversi widget che servono per mostrare gli Articoli Recenti con Miniature; con il gadget che vado a presentarvi renderò l'installazione e la personalizzazione più semplice a tutti coloro che non amano molto smanettare con il codice. Per inserire nel vostro blog questo widget non occorre far altro che cliccare sulla immagine seguente

Si aprirà una finestra di dialogo in cui dovrete selezionare il blog in cui inserire il widget, ovviamente se ne avete più di uno nello stesso account e se siete loggati nella vostra Bacheca. Cliccate su Configura Gadget; si aprirà una finestra di dialogo con tutte le opzioni da scegliere

Ripristino del widget dello slideshow degli ultimi articoli con miniature.

A seguito di segnalazioni pervenutemi da Soffio di Dea, Tex Willer e Tiziana relative al gadget dello slideshow degli ultimi articoli con miniature, ho notato che l'immagine di sfondo caricata su Photobucket aveva superato il limite di banda per un account gratuito. Si visualizzava quindi la scritta che il bandwidth era esaurito e si invitava a passare a un account Pro.

L'immagine su Photobucket era stata postata dall'autore del widget e non avevo pensato di caricarla su un mio hosting. Cosa che ho fatto adesso mettendola su Skydrive.

Coloro che avessero installato questo widget possono ripristinarlo seguendo in uno di questi metodi

1. Andare al post sullo slideshow e seguire le indicazioni contenute nell'aggiornamento
2. Reinstallare il widget completamente ricopiando e sostituendo tutto il codice copiato dallo stesso articolo 

Dato che c'era un altro javascript non hostato in un mio spazio, per evitare problemi analoghi, l'ho caricato su Google Sites. Si può quindi, alternativamente ai due metodi precedenti, andare su Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript e incollare il seguente codice in Sezioni del sito

Slideshow degli ultimi articoli con miniature, uno straordinario widget per Blogger.

Quello che vado a presentarvi è sicuramente uno dei gadget più affascinanti per la piattaforma di proprietà di Google. E' stato creato dal grande blogger indonesiano Abu Farhan Albanjari autore di molti altri plugin che ho tradotto in italiano. L'idea è quella di presentare uno slideshow in cui vengono mostrati gli ultimi articoli corredati da miniature. Ci sarà uno scorrimento naturale che permetterà al lettore di visualizzare un numero predefinito di articoli. In ogni rettangolo sarà visibile il collegamento al post con la miniatura della prima immagine presente, il titolo, la data e il numero dei commenti. Per avere un'idea di quello di cui sto parlando andate a guardare, in alto a destra, la

• Demo dello slideshow degli ultimi articoli per Blogger -

Per ottenere questo effetto si utilizza la tecnologia JQuery (libreria di funzioni in Javascript) con la tecnica Ajax che consente l'aggiornamento dinamico di una pagina senza il ricaricamento da parte dell'utente. Il widget ha un'unica pecca che per adesso non è stata ancora risolta. Non riesce cioè a mostrare il sommario dell'articolo come mi è stato anche fatto notare in un commento.

Come creare dei widget degli ultimi articoli che hanno due o più etichette specifiche.

Nel Google Data Protocol vengono messe a disposizione degli sviluppatori delle API per essere utilizzate nei siti web. Segnatamente sono disponibili anche tutta una serie di codici che riguardano le Queries in generale e i feed in particolare. Sarebbe veramente come il "Paese dei balocchi" se si avesse a che fare con un nostro dominio e con un CMS più flessibile di quello che ha Blogger.
Per quanto riguarda la piattaforma di blogging di Google i feed disponibili riguardano gli articoli, i commenti e le singole categorie. Si possono sottoscrivere anche i commenti ad un singolo articolo inserendone l'ID. Ecco comunque un riassunto per i feed Atom

http://nomeblog.blogspot.com/feeds/posts/default                            per i feed degli articoli
http://nomeblog.blogspot.com/feeds/comments/default                     per i feed dei commenti
http://nomeblog.blogspot.com/feeds/posts/default/-/categoria           per i feed di una etichetta
http://nomeblog.blogspot.com/feeds/posts/default?category=nome-categoria      "     
http://nomeblog.blogspot.com/feeds/postID/comments/default           per i feed ai commenti a un singolo post

Le parti in rosso devono ovviamente essere personalizzate. Nelle API è prevista la possibilità di usare gli operatori booleani per avere dei risultati ancora più specifici. Ricordo che detti operatori sono AND, OR e NOT e oltre che in informatica sono usati (con una diversa notazione anche in matematica e filosofia). Si può addirittura dimostrare che qualsiasi inferenza logica può essere ricondotta all'utilizzo di solo questi tre operatori.
Limitandoci al caso delle categorie potrebbe per esempio essere interessante avere un widget che comprende gli articoli relativi a un singola categoria ma che escluda quelli che appartengono anche a un altra, per esempio "blogger and (not blog)" mostrerebbe gli ultimi articoli con etichetta blogger con l'esclusione di quelli con etichetta blog.
Dopo aver fatto dei test mi sono accorto che il solo operatore booleano supportato da Blogger è AND e quindi l'unica possibile applicazione di queste API sta nel produrre dei widget che contengono contemporaneamente più categorie.
Come vedete nel prospetto precedente ci sono due metodi per ottenere i widget di una etichetta. Per esempio
http://www.ideepercomputeredinternet.com/feeds/posts/default/-/3D
http://www.ideepercomputeredinternet.com/feeds/posts/default?category=3D
sono entrambi due URL che mostrano i post con etichetta "3D" di questo blog. Provate a visualizzarli e vedrete che funzionano entrambi (non con Chrome che ancora non supporta questo formato).
Dal punto di vista insiemistico se vogliamo trovare l'intersezione tra tutti gli articoli con etichetta A e tutti quelli con etichetta B dobbiamo andare in uno di questi due URL
http://nomeblog.blogspot.com/feeds/posts/default/-/A/B
http://nomeblog.blogspot.com/feeds/posts/default?category=A,B
dove al posto di A e B si devono inserire i nomi delle etichette. Per verificare il funzionamento di entrambe le notazioni provate a cliccare sui seguenti collegamenti
http://www.ideepercomputeredinternet.com/feeds/posts/default/-/3D/animazioni  oppure
http://www.ideepercomputeredinternet.com/feeds/posts/default?category=3D,animazioni
in cui si vedranno gli articoli di questo blog che hanno contemporaneamente l'etichetta "3D" e l'etichetta "animazioni". Volendo si possono inserire anche più di due etichette come nel caso di
http://www.ideepercomputeredinternet.com/feeds/posts/default?category=3D,animazioni,immagini.
Queste personalizzazioni possono essere usate in tutti quei casi si vogliano raggruppare gli articoli in categorie e se ne voglia mostrare il widget. Faccio un esempio di un blog di motori: sarà possibile creare un gadget con gli ultimi articoli con etichetta "moto", quello con etichetta "auto" e un altro con gli articoli che hanno entrambe le etichette.
Si può utilizzare un widget snello che mostra solo l'elenco degli articoli come nel caso illustrato nel post

• Widget degli ultimi articoli relativi a una singola etichetta -

oppure utilizzare le miniature delle foto presenti nei post come illustrato negli articoli

• Widget degli ultimi post con miniature per una etichetta -
• Widget degli ultimi articoli con miniature per etichetta in orizzontale -

In tutti e tre i casi per avere il gadget relativo a due o più etichette bisogna sostituire l'URL dei feed con uno di quelli presentati in questo post. Una demo del primo widget può essere vista nel mio blog di prova e ha come esempio il widget delle etichette "blogger" e "adsense". Il codice che ho postato è stato il seguente

<script src="http://sites.google.com/site/ideepercomputeredinternet/script-1/ultimi_articoli_categoria.js"></script>
<script>
var numposts = 8;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<script src="http://www.ideepercomputeredinternet.com/feeds/posts/default/-/blogger/adsense?orderby=published&alt=json-in-script&callback=rp"></script>
<div style="font-size:50%;text-align:center"><p> <a href="http://goo.gl/zc7V">Install widget</a> </p></div>

Sostituite le parti evidenziate di rosso oppure fate lo stesso con i widget che hanno anche le miniature.

Aggiungere il widget degli Ultimi Post in un elemento pagina HTML/Javascript ad un blog su Blogger.

Continuo la mia operazione di eliminazione degli script caricati su hosting esterni per evitare problemi di bandwidth e di disservizio degli stessi hosting. In questo blog, nel momento in cui scrivo, non ho il widget degli Ultimi Articoli in quanto sarebbe superfluo dato che questi sono consultabili nel widget dell'archivio con calendario.
Ho già presentato una versione del gadget degli Ultimi Articoli che fa a meno di script esterni; adesso presento una variante ancora più semplice per la quale non occorre operare nel modello ma è sufficiente inserirla in un elemento pagina. Ecco il codice

    <script style="text/javascript">
//credit to hoctro - localizzato da Parsifal32 - www.ideepercomputeredinternet.com
function rp(json) {
document.write('<ul>');for (var i = 0; i < numposts; i++) {
document.write('<li>');
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 == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(leggi tutto)";
readmorelink = readmorelink.link(posturl);
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] = "Gen";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "Mag";
monthnames[6] = "Giu";
monthnames[7] = "Lug";
monthnames[8] = "Ago";
monthnames[9] = "Set";
monthnames[10] = "Ott";
monthnames[11] = "Nov";
monthnames[12] = "Dic";
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, "");
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)]+ ' ');
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
document.write('<div style="font-size:70%;text-align:center"><p><a href="http://goo.gl/cPYh">Install widget</a></div>');
}
</script>
<script style="text/javascript">
var numposts = 6;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<script src="http://www.ideepercomputeredinternet.com/feeds/posts/default?orderby=published&alt=json-in-

script&callback=rp"></script>
  

Le personalizzazioni da compiere sono le seguenti

1. var numposts = 6; rappresenta il numero di articoli da mostrare
2. var showpostdate = false; se non si vuol mostrare la data, se si vuole che appaia true al posto di false
3. var showpostsummary = false; se non si vuole mostrare il sommario del post, se si vuole vedere true al posto di false
4. var numchars = 100; rappresenta il numero dei caratteri del sommario
5. Va ovviamente inserito l'URL del blog al posto di www.ideepercomputeredinternet.com

Si va su Personalizza > Layout > Elementi pagina > Aggiungi un gadget > HTL/Javascript e, in Sezioni del sito, si incolla il codice personalizzato, si aggiunge il Titolo, si clicca su Salva e, con il mouse, si posiziona al meglio cliccando nuovamente su Salva.
Potete vedere questo widget all'opera in due versioni

• Widget Ultimi Articoli con data e sommario -
• Widget Ultimi Articoli con solo il titolo del post -

Nel caso in cui si scelga di visualizzare anche il sommario dell'articolo apparirà il collegamento (leggi tutto) per vedere tutto il post.

Come inserire il widget degli Ultimi Articoli direttamente nel modello di Blogger.

L'inserimento dei commenti recenti nel modello di Blogger ho riscontrato essere possibile solo in determinati template e con procedimento reiterato. Con il widget degli Ultimi Articoli non ho invece riscontrato alcun problema, nel caso si presentassero vi prego di comunicarmelo.
Questo metodo di inserimento dei widget serve per due ragioni

1. Velocizzare il caricamento della pagina visto che non si richiedono indirizzi esterni
2. Evitare problemi di blackout del sito in cui sono stati caricati gli script

Il procedimento è semplicissimo. Si va su Layout > Modifica HTML e dopo aver salvato il modello completo si cerca la riga

</head>

immediatamente sopra si incolla lo script del widget. E' meglio inserire dei commenti all'inizio e alla fine per essere sicuri di riconoscere il codice per eventuali future modifiche

<!--ULTIMI ARTICOLI INIZIO-->
<script type='text/javascript'>
//<![CDATA[
//credit to hoctro - tradotto da Parsifal32 - parsifal32.blogspot.com
function rp(json) {
document.write('<ul>');for (var i = 0; i < numposts; i++) {
document.write('<li>');
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 == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(leggi tutto)";
readmorelink = readmorelink.link(posturl);
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] = "Gen";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "Mag";
monthnames[6] = "Giu";
monthnames[7] = "Lug";
monthnames[8] = "Ago";
monthnames[9] = "Set";
monthnames[10] = "Ott";
monthnames[11] = "Nov";
monthnames[12] = "Dic";
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, "");
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
}
//]]>
</script>
<!--ULTIMI ARTICOLI FINE-->

come mostrato dal seguente screenshot

Adesso andate in Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript e in Sezione del sito incollate questo codice

<script>
var numposts = 8;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<script src="http://parsifal32.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>
<div style="font-size:50%;text-align:center"><p> <a href="http://goo.gl/2O9J">Install widget</a> </p></div>

Le personalizzazioni riguardano

1. Il numero di articoli da visualizzare (8)
2. Se si vuole mostrare anche la data del post (false non si mostra true invece sì)
3. L'opzione di mostrare il sommario del post (false non si visualizza con true invece sì)
4. Il numero dei caratteri del sommario (100) nel caso si sia scelto true alla riga precedente
5. Ovviamente l'URL del blog evidenziato di rosso

Dopo aver inserito il Titolo del widget si clicca su Salva e con il drag & drop si posiziona andando su Layout > Elementi pagina. La realizzazione può essere vista nel post demo dedicato agli articoli recenti.
Nella demo ho scelto di non mostrare né sommario dell'articolo, né data. Se invece si scelgono le altre opzioni il widget avrà questa forma
                       

Come inserire il Widget degli Ultimi Articoli relativi a una singola etichetta in un blog su Blogger.

Ci sono dei blog nei quali c'è l'esigenza di mostrare gli ultimi articoli suddivisi per etichetta. Poniamo che si abbia un blog che parla di motori, in questo caso potrebbe essere utile presentare due widget distinti con gli articoli più recenti relativi all'etichetta "moto" e a quella "auto"; se si ha un blog di televisione potremmo volere un widget con gli articoli dell'etichetta "reality" e quelli dell'etichetta "sport" e così via.

Con il sistema che vado a illustrare si possono creare tutti i widget che vogliamo per tutte le etichette del blog. Il codice da personalizzare è il seguente

<script src="http://sites.google.com/site/ideepercomputeredinternet/script-1/ultimi_articoli_categoria.js"></script>
<script>
var numposts = 8;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<script src="http://nome-blog.blogspot.com/feeds/posts/default/-/nome-etichetta?orderby=published&alt=json-in-script&callback=rp"></script>
<div style="font-size:70%;text-align:center"><p> <a href="http://goo.gl/zc7V">Install widget</a> </p></div>

dove i dati eventualmente da cambiare sono

1. var numposts = 8; - rappresenta il numero degli articoli da mostrare nel widget
2. var showpostdate = false; - se si vuole mostrare la data dell'articolo si inserisce true invece di false
3. var showpostsummary = false; - se oltre al titolo si vuole mostrare anche il sommario del post si mette true invece di false
4. var numchars = 100;  - sono i numeri di caratteri massimi del titolo. Se si supera il limite si vedrà il link "leggi".
5. nome-blog va sostituito con il nome del nostro blog su Blogger. Nel caso avessimo un dominio personalizzato dovremo inserire www.mioblog.com al posto di nome-blog.blogspot.com.
6. nome-etichetta va sostituita con l'etichetta di cui vogliamo gli ultimi articoli (p.e. auto, cinema, blogger,..)

Dobbiamo andare su Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript e incollare il codice personalizzato in Sezioni del sito mentre come Titolo ne inseriamo uno a piacere sul tipo "Ultimi Articoli Cinema". Si clicca su Salva e si posiziona l'elemento con il mouse nella posizione che preferiamo.

Nel mio blog di prova ho inserito questo widget per l'etichetta "blogger" nella pagina

• Widget degli articoli recenti per una singola categoria -

Alternativamente potete consultare il post su come inserire il "Widget degli ultimi post con miniature per categoria".

Il widget degli articoli recenti con miniature e sommario per blog su Blogger.

Qualche giorno fa ho presentato il widget degli ultimi articoli con miniature in senso verticale, qualche giorno prima quello degli articoli recenti con miniature in orizzontale, adesso voglio proporre un'alternativa che è personalizzabile più facilmente e si presta a ulteriori sviluppi come vedremo nel post successivo.

Come i due precedenti widget, anche in questo caso non si va a modificare direttamente il modello ma si inserisce soltanto un nuovo elemento pagina, andiamo però per gradi. Occorrerà personalizzare questo codice

<script type="text/javascript">
imgr = new Array();
imgr[0] = "http://tinyurl.com/oj827g";
imgr[1] = "http://tinyurl.com/qzptmk";
imgr[2] = "http://tinyurl.com/ok629f";
imgr[3] = "http://tinyurl.com/omglru";
imgr[4] = "http://tinyurl.com/q4wtpo";
showRandomImg = true;
tablewidth = 280;
cellspacing = 1;
borderColor = "#ffffff";
bgTD = "#ffffff";
imgwidth = 120;
imgheight = 120;
fntsize = 12;
acolor = "#191919";
aBold = true;
icon = " • ";
text = "Commenti";
showPostDate = false;
summaryPost = 70;
summaryFontsize = 10;
summaryColor = "#242424";
icon2 = " → ";
numposts = 6;
rc_feedLink = "http://demo-parsifal32.blogspot.com/feeds/posts/default";
</script>
<script src="http://sites.google.com/site/ideepercomputeredinternet/script-1/articolirecenticonminiature1.js" type="text/javascript"></script>

Le personalizzazioni riguardano i seguenti elementi

1. imgr[0] , imgr[1], ecc rappresentano le immagini casuali che vengono visualizzate come miniature nel caso non ce ne siano nei post. Gli URL inseriti da me sono relativi a immagini di albe e tramonti e possono essere cambiate con altre più attinenti
2. showRandomImg = true; se si vogliono mostrare le immagini casuali altrimenti sostituire true con false. Nel caso di blog con immagini in tutti i post.
3. tablewidth = 280; rappresenta la larghezza del widget
4. cellspacing = 1;  è la distanza tra le celle della tabella verticale
5. borderColor = "#ffffff";  è il colore del bordo
6. bgTD = "#ffffff";  è il colore di sfondo del widget
7. imgwidth = 120;  è la larghezza della miniatura
8. imgheight = 120;  è l'altezza della miniatura
9. fntsize = 12;  è la dimensione dei caratteri del Titolo del post
10. acolor = "#191919";  è il colore del testo del Titolo del post
11. aBold = true; significa che il titolo è in grassetto, se non si vuole in grassetto bisogna sostituire true con false
12. icon = " • ";  e icon2 = " → "; rappresentano le icone che si visualizzeranno rispettivamente prima del Titolo e prima del Sommario. Si possono sostituire con altri simboli oppure lasciare lo spazio vuoto se non ci piacciono
13. text = "Commenti";  è il testo che sarà visualizzato accanto al numero dei commenti. Se non vogliamo nessun testo basta lasciare text = " "; 
14. summaryPost = 70;  rappresenta il numero dei caratteri del sommario del post
15. summaryFontsize = 10;  è la dimensione dei caratteri del sommario
16. summaryColor = "#242424";  è il colore del testo del Sommario dell'articolo
17. numposts = 6;  è il numero degli articoli che si vogliono visualizzare nel widget
18. rc_feedLink = "http://demo-parsifal32.blogspot.com/feeds/posts/default"; qui dovete inserire l'URL dei feed del vostro blog. Se avete un blog su Blogger basterà sostituire la parte evidenziata di verde

Dopo aver fatto tutte le modifiche andate su Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript e incollate il codice in Sezioni del sito, mettete come titolo una cosa tipo "ULTIMI ARTICOLI" o "ARTICOLI RECENTI" e cliccate su Salva.





Per vedere questo gadget in azione potete andare nella pagina dedicata agli "articoli recenti con miniature e sommario" del mio blog di prova.


Importante: Se avete un dominio personalizzato cioè del tipo www.miodominio.com, il widget non funzionerà. Dovrete scaricare il javascript con l'URL colorato di blu e caricalo nella cartella Public di Dropbox.


Aggiornamento n° 1: Per non inserire il numero dei commenti consultate questo post

Come inserire il widget degli ultimi articoli con miniature in senso verticale.

Ho presentato qualche giorno fa il widget degli ultimi articoli con miniature in orizzontale adesso voglio mostrare l'opzione in verticale che si può inserire per esempio in una sidebar. Non occorre modificare il modello ma basta andare su Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript e incollate il seguente codice in Sezioni del sito

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://tinyurl.com/oj827g";
imgr[1] = "http://tinyurl.com/qzptmk";
imgr[2] = "http://tinyurl.com/ok629f";
imgr[3] = "http://tinyurl.com/omglru";
imgr[4] = "http://tinyurl.com/q4wtpo";
showRandomImg = true;
boxwidth = 300;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#191919";
aBold = true;
icon = " ";
text = "commenti";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#333333";
icon2 = " ";
numposts = 5;
home_page = "URL del Blog";
</script>
<script src="http://sites.google.com/site/ideepercomputeredinternet/script-1/postrecenti.js" type="text/javascript"></script>
<a href='http://goo.gl/BsNI' style='display:none;'>Widget degli ultimi articoli con miniature in verticale</a><a href='http://goo.gl/OKeg' style='display:none;'>Idee per computer ed internet</a>

prima però occorre fare le seguenti personalizzazioni.

1. Gli URL del tipo http://tinyurl.com/oj827g rappresentano delle immagini che appariranno nel caso non siano presenti nel post, possono essere cambiate con altre eventualmente più adatte al blog. Se nei post ci saranno immagini saranno queste a essere visualizzate.
2. boxwidth 300 è la larghezza del widget e può essere adattata alla sidebar
3. 8 è la distanza in pixel tra le varie miniature
4. borderColor è il colore del bordo delle celle
5. 40 rappresentano la larghezza e l'altezza delle miniature
6. 12 la dimensione dei caratteri
7. 191919 è il colore del titolo
8. true o false per avere il titolo in grassetto in aBold. Mostrare o no la data in ShowPostDate sempre con true o false
9. 40 e 10 rappresentano il numero dei caratteri del post e la loro dimensione
10. 333333 è il colore del sommario
11. 5 è il numero delle miniature dei post che si vuole mostrare
12. A URL del Blog dobbiamo sostituire l'URL del nostro blog con relativa slash finale 

Dopo avere inserito il codice si digita il titolo che potrebbe essere Ultimi articoli e si Salva come mostrato nello screenshot

Per vedere questo widget all'opera andate in questo post del mio blog di demo.

Come inserire il widget degli ultimi articoli con miniature sopra l'area del post.

Mi sono già occupato di questo gadget in altri due articoli

 1) Widget degli ultimi post con miniature -
 2) Widget degli ultimi articoli con miniature in orizzontale -

adesso ho tradotto lo script e lo ripropongo nella versione per inserirlo in orizzontale subito sotto all'header. La particolarità di questo gadget è che non bisogna andare in Layout > Modifica HTML per modificare il modello ma si fa tutto attraverso l'inserimento di un elemento pagina HTML/Javascript.
Widget degli ultimi articoli con miniature in orizzontale -
Considerate il seguente codice

<table style="background-color: #ffffff;">
<tr>
<td style="margin-left: 20px; margin-top: 10px;" align="left"><script language="JavaScript">
imgr = new Array();
imgr[0] = "http://tinyurl.com/oj827g";
imgr[1] = "http://tinyurl.com/qzptmk";
imgr[2] = "http://tinyurl.com/ok629f";
imgr[3] = "http://tinyurl.com/omglru";
imgr[4] = "http://tinyurl.com/q4wtpo";
showRandomImg = false;
tablewidth = 900;
cellspacing = 7;
borderColor = "#ffffff";
bgTD = "#ffffff";
imgwidth = 113;
imgheight = 100;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 0;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = "  ";
numposts =5;
home_page = "http://miosito.blogspot.com/";
</script>
<script src="http://sites.google.com/site/ideepercomputeredinternet/script-1/scriptminiatureorizzontali.js" type="text/javascript"></script>
</td>
</tr>
</table>
<a href='http://goo.gl/eq3lj' style='display:none;'>Widget ultimi articoli con miniature</a>

Le personalizzazioni da fare sono le seguenti

1. #ffffff nella prima riga è il colore di background della tabella in cui sono inserite le miniature
2. Gli URL del tipo http://tinyurl.com/oj827g rappresentano gli indirizzi di immagini che vengono visualizzate nel caso nei post non ne siano presenti nessuna. Se abbiamo un blog di cucina possono essere sostituite da immagini di ricette mentre se abbiamo un blog di motori da immagini di auto o di moto. Basta caricarle su un hosting tipo Skydrive, acquisirne l'indirizzo e sostituirle a le cinque proposte che sono foto di albe, tramonti e natura in genere.
3. 900 è la larghezza del widget che dovrà essere uguale o inferiore al main-wrapper del vostro blog; non può cioè essere più largo dell'area in cui vengono inseriti i post.
4. 113 e 100 sono rispettivamente la larghezza e l'altezza delle singole miniature e sono nella proporzione 4:3 che è la più usata nei formati di foto. Ovviamente questi numeri possono essere modificati a seconda delle esigenze
5. 7 sono i pixel che devono intercorrere tra una miniatura e l'altra (cellspacing), cioè lo spazio tra di loro che può essere variato a piacere
6. 5 è il numero delle miniature e quindi dei post che volete vengano visualizzati. Questo numero può essere calcolato considerando quanto è largo il widget (in questo caso 900 pixel), quante sono larghe le miniature (nel codice mostrato sono 113 pixel) e di quanto è la distanza tra di loro (è stato messo cellpasing=7)
7. #ffffff è il colore del bordo delle miniature, in questo caso lasciato trasparente
8. http://miosito.blogspot.com è la personalizzazione più importante e rappresenta l'URL del blog da cui acquisire i feed.
9. Ricordarsi di inserire sempre il dominio canonico .com e non quello localizzato .it

Dopo aver personalizzato il codice andate su Layout > Elementi pagina > HTML/Javascript > Aggiungi un gadget e incollatelo in Sezioni del sito, senza inserire titolo, quindi posizionatelo con il mouse subito sotto l'header o comunque sopra il post.

Il widget degli ultimi articoli con miniature da installare con pochi click.

Per coloro che amano i widget colorati e pieni di immagini è adesso disponibile una versione del gadget degli articoli recenti per blogger da inserire con pochi click come se fosse un widget di quelli che mette a disposizione Blogger.

Andate in Layout > Aggiungi un gadget e nella casella in alto incollate la seguente parola chiave "recent posts with thumbnails"

Cliccate sul pulsante di ricerca o premete Invio; avrete un solo risultato che sarà mostrato nella finestra successiva

Cliccate sul segno più per inserire il widget nel blog. Il gadget dovrà essere personalizzato riempendo i campi e mettendo o togliendo i segni di spunta

 

Le personalizzazioni riguardano

1. Altezza del widget
2. Numero degli articoli da mostrare
3. Mostrare o non mostrare le miniature
4. Mostrare o non mostrare il sommario dei post
5. Numero di caratteri del sommario
6. Mostrare o non mostrare la data
7. Mostrare o non mostrare il numero dei commenti
8. Mostrare o non mostrare il link read more
9. Mostrare o non mostrare un separatore tra i post

Si deve inserire l'URL del blog e cliccare su Aggiorna per vederne l'anteprima in fondo alla finestra. Quando si è terminata la personalizzazione si clicca su Salva, quindi in Layout > Elementi pagina si trascina nella posizione desiderata. Per vedere questo widget in azione guarda questa demo.

Ho presentato altri widget simili quali quegli degli ultimi articoli con miniature e degli articoli recenti con miniature in orizzontale.

Fonte | Allblogtools -

Come creare una mappa del sito per giorni, mesi ed etichette.

E' interesse dei blogger mostrare immediatamente al navigatore occasionale tutto il meglio del lavoro che si è fatto per farlo diventare un lettore abituale. Per riuscire nell'intento si posizionano in punti ben visibili il widget degli ultimi articoli, quello degli articoli più popolari, le etichette più usate oppure dei menù che rimandano ai post che riteniamo più interessanti.
Un lavoro fatto da Abu Farhan che si è ispirato a post precedenti di Blogger Buster e Beautiful Beta ha portato alla creazione di uno script in grado di mostrare gli ultimi 500 articoli del blog suddivisi per mesi o per etichette.
Il metodo messo a punto consiste nell'inserire, in un post simil-statico, uno script per mostrare gli ultimi 500 articoli del blog. Per articolo simil-statico intendo un post con data antecedente alla creazione dello stesso blog in modo da non interferire con gli articoli più recenti.
Il grosso problema di questo metodo è che l'articolo in questione ci mette un sacco di tempo ad aprirsi in quanto deve caricare anche tutti gli altri oggetti del blog dall'intestazione, ai banner pubblicitari, dal widget di Yahoo a quello di Facebook, ecc.
Ho pensato quindi di portare alcune migliorie che credo invoglieranno molti di voi ad usarlo

1. Ho tradotto il widget in italiano mantenendo però correttamente il link al creatore dello script
2. Ho inserito lo script in una singola pagina creata con Altervista che facilita moltissimo il caricamento rendendolo quasi immediato.

Procediamo con ordine. Innanzitutto personalizzate i due codici sottostanti

MAPPA DEL SITO PER MESI E GIORNI

<script style="text/javascript" src="http://parsifal32.altervista.org/mappa_mesi_blog.js"></script>
<script src="http://www.ideepercomputeredinternet.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>

MAPPA DEL SITO PER ETICHETTE

<script style="text/javascript" src="http://sites.google.com/site/ideepercomputeredinternet/script-1/sitemap-etichette.js"></script>
<script src="http://www.ideepercomputeredinternet.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

sostituendo l'URL del vostro blog. Andate quindi sul sito Altervista e, se non lo avete già, createvi un account e procedete come spiegato nel post

• Come creare una pagina web con Altervista senza conoscere l'HTML -

Quando aprite l'editor HTML di Altervista non resta altro che inserire il codice precedente e creare due pagine con i nomi che più vi piacciono. Si può anche inserire un banner di Altervista e un titolo con relativo sottotitolo.
Per inserire quest'ultimi basta usare i tag <H1> e </H1> per quanto riguarda il Titolo e </H2> e </H2> per il Sottotitolo. Ecco lo screenshot del codice di una delle due pagine web create

Dopo aver pubblicato le due pagine se ne può acquisire l'URL ed inserirli in due collegamenti in Homepage per dare la possibilità ai navigatori di sfogliare in pochissimo tempo tutto il contenuto più recente del nostro blog.
Avevo già parlato di come inserire i feed degli ultimi 25 articoli e degli ultimi 25 commenti ma qui si parla di ben 500 post con la possibilità anche di aumentarli ma non lo consiglio perché sono già abbastanza.
Se volete vedere la realizzazione pubblicata sul web ecco le due pagine

1. Mappa di Idee per Computer ed internet suddivisa per giorno e mese -
2. Sitemap di Idee per Computer ed Internet suddivisa per categorie -

Si possono inserire in un widget del tipo HTML/Javascript o anche Elenco Link per dare modo ai lettori di avere tutta la produzione del blog a portata di click.
Quando anche in Blogger saranno disponibili le pagine così come lo sono in Wordpress non sarà più necessario ricorrere a questi escamotage comunque interessanti.
Aggiornamento: La Sitemap relativa alle categorie non si riesce ad aprire con Internet Explorer mentre non ci sono problemi di browser con quella cronologica, (tanto per cambiare!) .