Gadget dei Post casuali con miniature che ruotano.

Visto il successo che ha ottenuto il precedente widget sugli Articoli Casuali ruotanti e letti alcuni commenti che mi invitavano a togliere data e commenti per renderlo esteticamente più valido, ho pensato di postarne una nuova versione.

Con questo nuovo codice si vedranno soltanto le miniature e il titolo del post. In questo modo si dovrebbe risolvere anche il problema dei titoli troppo lunghi che non avevano abbastanza spazio nella precedente versione. Anche in questo caso ho postato la solita

Non serve modificare il template. Basta andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare in Sezioni del sito il seguente codice

Nuovi widget di Twitter da incorporare nel blog.

Con un post sul Blog Ufficiale di Twitter, tra l'altro realizzato su piattaforma Blogger con tanto di Navbar, è stato introdotto un nuovo strumento  che consentirà a tutti di implementare nei propri siti le Timeline Interattive di Twitter.

Tale timeline può essere costituita dai tweet di un autore, da un hashtag di un evento o da una ricerca. Twitter aggiungerà in tempo reale i nuovi tweet e i navigatori che troveranno questi widget vi potranno interagire come si fa nella pagina principale di Twitter. Si potranno per esempio espandere i tweet per vedere le immagini o altri oggetti multimediali. Si potrà avviare una conversazione dallo stesso gadget, seguire gli utenti che si scoprono essere interessanti, rispondere ai tweet, effettuare dei retweet o aggiungere ai Preferiti direttamente dalla pagina del sito in cui è stato embeddato il widget.

Dopo essersi loggati su Twitter si accede alla pagina Widget e si clicca su Crea Nuovo. Si aprirà il tool per la creazione di un nuovo widget con parecchie personalizzazioni

Widget delle miniature degli Ultimi Post per una data Etichetta.

E' noto che su Blogger si possono acquisire i feed degli articoli, quelli dei commenti, quelli di un singolo commento e anche quelli di una data etichetta. Di default vengono acquisiti un massimo di 25 feed ma con un artificio se ne possono visualizzare molti di più e anche selezionarli in base alla loro posizione. Per esempio è possibile visionare i feed dei post che vanno dal 13 al 65 tanto per dare dei numeri a caso.

L'URL che ci mostra gli ultimi articoli relativi a una singola etichetta ha questa struttura

http://nomeblog.blogspot.com/feeds/posts/default/-/categoria 

dove nomeblog e categoria sono ovviamente delle variabili. Attraverso il formato JSON che è stato introdotto su Blogger a partire dal lontano 2006, si possono richiamare i feed precedentemente manipolati con una opportuna funzione javascript. E'  interessante consultare la documentazione anche in italiano su come si possano creare dei gadget per Blogger.

I migliori widget per le previsioni del tempo.

Le previsioni del tempo hanno un ruolo essenziale in molti aspetti della vita sociale e economica di un Paese. Basta pensare a tutto quello che ruota intorno ai viaggi e alle vacanze ma anche agli avvenimenti sportivi, alle manifestazioni di ogni genere e anche alla politica visto che la percentuale dei votanti è in una qualche misura influenzata anche dall'andamento della meteorologia.

Se si possiede uno smartphone avere una applicazione o un widget che mostri le previsioni del tempo è cosa irrinunciabile. Personalmente uso Yahoo Meteo che mostra l'andamento del tempo dei prossimi cinque giorni insieme a delle bellissime foto tratte da Flickr della zona di residenza momentanea o occasionale. In rete sono anche disponibili moltissimi widget da installare nel blog per mostrare ai visitatori le previsioni del tempo relative a una certa località. Ne elenco qualcuno limitandomi a trattare più in dettaglio quelli che ritengo più interessanti.

Il widget della nuvola dei Top Commentari reso più compatto.

Il gadget dei Top Commentatori, vale a dire degli utenti che hanno commentato di più il blog, è uno dei widget presentati in questo  sito che ha avuto maggior successo. Dopo aver pubblicato il gadget dei commentatori che ereditava lo stile dal blog, ne ho proposto anche una seconda versione con la possibilità di scegliere il colore dello sfondo e quello del bordo.

La particolarità di questo gadget è che la dimensione dei caratteri dei nickname è funzione del numero dei commenti. Sono presi in esame gli ultimi 2000 commenti e, chi ne ha postati molti, vede il suo username allargarsi a dismisura. Questo mi consigliò di filtrare i commentatori che avessero superato le 60 unità per mantenere una certa armonia nel widget. Tale decisione fu causa di  fraintendimenti decisamente spiacevoli con utenti che ritenevano di essere stati cancellati ingiustamente.

Widget per Blogger dello stream delle foto di Flickr.

Flickr è certamente il più popolare servizio per condividere foto online. Si può registrarsi per avere un account gratuito che permetterà di caricare foto, di suddividerle in album, di contattare persone, cercare amici, partecipare a gruppi e cercare foto senza copyright e che quindi possano essere ripubblicate in un sito.

Ho già avuto modo di presentare due bellissimi badge di Flickr che permettono di presentare raccolte di foto in un mosaico. Si possono creare a partire da un account o usando una specifica etichetta.

Widget della nuvola dei commentatori (Nuova versione).

Il gadget dei commentatori più assidui in versione nuvola che ho presentato quasi due anni ha avuto un grande successo tra i lettori e sono stati molti quelli che lo hanno installato con successo e soddisfazione. Si tratta in un certo senso di premiare con un link al Profilo (di Blogger o di Google Plus) i frequentatori del blog che attraverso i loro commenti contribuiscono ad arricchire il nostro sito.

L'aspetto del widget ricorda quello della nuvola di etichette, gadget ufficiale di Blogger, e le dimensioni dei caratteri dei commentatori sono proporzionali al numero di commenti postati. Si prendono in considerazione solo gli ultimi 2000 commenti quindi coloro che hanno commentato il blog in passato ma ora non lo fanno più non saranno visibili. E' anche possibile filtrare i nomi utenti in modo per esempio da non mostrare i commenti fatti dagli anonimi e quelli inseriti dal proprietario del blog.

Widget degli Ultimi Post con Miniature per Blogger.

Avevo già presentato un gadget che mostrasse gli Ultimi Articoli insieme alle Miniature completamente personalizzabile ma ultimamente su Blogger stanno cambiando parecchie cose. Il widget continua a funzionare per quelli che lo avevano installato ma, se si tenta di farlo nuovamente, si avrà la brutta sorpresa che non riusciremo a installarlo.

Aggiornamento: Il widget illustrato in questo post non è più funzionante perché non è più disponibile lo spazio su cui era caricato lo script. Lo stesso widget può però essere installato consultando il post
 
    Widget degli Ultimi Articoli con Miniature per Blogger completamente personalizzabile

Su questo sito ci sono anche altre alternative a questo gadget, ne ricordo un paio, la prima in stile elenco e la seconda con il sommario oltre alle miniature. Vediamo però come installare un nuovo gadget degli Articoli Recenti con Miniature che è personalizzabile fino nei dettagli che ho realizzato basandomi sull'eccellente lavoro di Blogger Plugins. Cliccate sulla icona seguente

Slideshow dei Post più popolari per Blogger.

Vediamo come sia possibile personalizzare il widget dei Post più popolari che è presente nella lista dei gadget ufficiali di Blogger. L'obiettivo è quello di mostrare appunto questi articoli più letti inseriti in uno slideshow in cui sia visibile la miniatura di ciascun post e gli strumenti di navigazione per visionarli senza bisogno di aprirli.

Ho postato in rete una

• Demo dello slideshow dei Post più popolari di Blogger -

e una particolarità del widget è anche quella di ingrandire la miniatura del post che si trova in quel momento nella posizione centrale. Vengono infatti mostrati tre post per volta ma se ne possono scegliere fino a un massimo di dieci

Come eliminare i rettangoli che si visualizzano quando si impongono dei tag condizionali ai widget.

Un fattore importante del lato SEO di un articolo è rappresentato dal suo titolo che deve essere facilmente comprensibile dai lettori e contenere le necessarie parole chiave a beneficio dei motori di ricerca. Il titolo di questo post è quanto di peggio si possa inventare in tal senso. Credo che la maggior parte di voi non abbia neppure compreso di che argomento voglia trattare e quindi passo a fare un esempio esplicativo visto che con il titolo non sono stato sufficientemente chiaro.

Se si ha necessità di mostrare un widget solo in un post o in una pagina si utilizzano i cosiddetti tag condizionali per imporre al gadget di essere visibile solo in un dato post o in una data tipologia di pagine (statiche, etichette, di archivio). Limitandoci al caso di un widget mostrato solo in un post, per ottenere questa caratteristica si va su Modello > Modifica HTML > Procedi e si cerca il codice del widget digitandone il nome dopo aver cliccato su F3 o Ctrl+F.

Come creare un aggregatore di siti con Blogger usando il widget del Blogroll.

Tempo fa mi fu chiesto se fosse possibile creare un sito aggregatore con Blogger. Risposi in un post che si poteva usare il servizio Mail2Blogger che permette di pubblicare gli articoli inviati per email. Il sistema consisteva nel registrarsi alla newsletter dei blog che volevamo aggregare per poi vederli ripubblicati in automatico da Mail2Blogger.

Esiste un sistema molto più semplice e efficiente di questo che permette di creare un aggregatore di blog usando semplicemente il widget del Blogroll. Per prima cosa bisogna decidere se creare questo aggregatore in un blog a sé stante o più semplicemente in una pagina statica o un post di un nostro sito. Il procedimento però è sostanzialmente identico. Occorre fare una lista degli URL dei siti che vogliamo inserire in questo aggregatore fermo restando che possiamo aggiungere o togliere uno o più blog in qualsiasi momento.

Per il test che mi ha permesso di creare anche una dimostrazione del funzionamento di questo aggregatore, ho preso gli URL dei blog dei Top Commentatori di questo sito, limitatamente a quelli che avevano il profilo disponibile e di cui sono riuscito a trovare un blog che avesse attività recenti. Se qualcuno non è felice che il suo blog sia stato selezionato per questo test me lo dice e lo tolgo subito dall'aggregatore di prova.

Come personalizzare il widget LinkWithin.

Casualmente ho ricevuto un invito a pubblicare un articolo sulle possibili personalizzazioni del widget LinkWithin quando ci stavo già pensando. Per l'installazione del widget recatevi nel sito di LinkWithin e compilate il modulo sulla destra in cui dovete inserire email, URL del blog, piattaforma (Blogger, Wordpress self-hosted, TypePad o Altro), il numero di articoli correlati (da 3 a 5) e mettere o meno la flag per i blog che hanno il testo più chiaro dello sfondo. Si clicca su Get Widget per procedere con l'installazione. Il trucco sta nel selezionare Other e non Blogger per poter personalizzare il codice. Si clicca su Get Widget!

 

Come aggiungere due colonne sopra o sotto l'area del post su Blogger

Ho già illustrato come dividere l'header in due parti e come dividere in tre o quattro parti l'area sotto l'header. In questo articolo vediamo come sia possibile aggiungere due colonne sopra l'area del post e due colonne sotto l'area del post. Dico subito che le colonne possono anche essere tre e che si possono aggiungere solo quelle sopra, solo quelle sotto o entrambe. Si può inoltre aggiungere per esempio tre colonne sotto l'area del post e due colonne sopra.

Per effettuare questa personalizzazione basta inserire degli elementi Aggiungi un gadget in quella zona del layout. Successivamente sarà facile inserire dei widget che possono essere del tipo HTML/Javascript oppure di altro genere. L'obiettivo è quello di creare un layout di questo tipo

Riassunto dei post con miniatura da mostrare in homepage di Blogger.

Vediamo come mostrare in homepage di un blog su Blogger solo un breve riassunto del post corredato da una miniatura della prima immagine presente nell'articolo che può essere posizionata a piacere a sinistra o destra del layout. La particolarità risiede nel fatto che la miniatura non distorce l'immagine ma ne cattura solo una porzione. Questo script può essere utilizzato da chi per esempio all'inizio del post è solito inserire una immagine sempre delle stesse dimensioni che fa da anteprima al resto del contenuto. L'aspetto dei post in homepage sarà simile a questo

In questo caso la miniatura della immagine è stata posta a sinistra, il riassunto del post sulla destra insieme al bottone per aprire tutto l'articolo. Vediamo come procedere per l'installazione di questo metodo per presentare l'homepage che si differenzia da quello solito con il Read More essenzialmente per la presenza di miniatura e riassunto affiancati uno accanto all'altra.

Bottoni animati per Facebook, Google Plus, Twitter e altri social network.

Nei template con sidebar non troppo larghe potrebbe essere interessante mostrare i pulsanti per seguirci nei vari social network in posizione verticale con un testo che invita il lettore a aggiungerci alle sue Cerchie su Google Plus, a iscriversi alla nostra pagina fan di Facebook o a seguirci su Twitter. Ai tre social network principali possiamo aggiungercene anche altri più specifici per la nostra tipologia di blog.

L'animazione dei bottoni non sta altro che nell'aggiunta di un diverso stile nel momento in cui il mouse passa sopra ai singoli bottoni. Ci sarà cioè una diversa colorazione del testo e uno spostamento di 1 pixel a destra e in basso. Si può naturalmente scegliere anche la sinistra e il basso sostituendo nel codice top con bottom e left con right. Così come si può aumentare la quantità di spostamento a 2 pixel. Come del resto ho fatto in questa

Come trovare l'ID di un widget di Blogger per modificarne l'aspetto con i fogli di stile

Nell'articolo precedente ho parlato di come si possa nascondere un contenuto attraverso i tag dispaly:none; e visibility:hidden;. Se si tratta di un elemento presente in un articolo basta andare in modalità HTML e postare questo codice

<div style="display:none;"> ... codice HTML dell'elemento da nascondere ... </div>

Se vogliamo nascondere un widget dobbiamo andare su Modello > Modifica HTML > Procedi e, prima della riga ]]></b:skin>, incollare questo codice

#WIDGET_ID {display: none; }

Il punto è allora quello di trovare l'ID di un singolo widget. La cosa può essere fatta in modi diversi. Se abbiamo dato un titolo al widget, possiamo andare su Modello > Modifica HTML > Procedi e espandere i modelli widget. Si preme su F3 o su Ctrl+F e si incolla il titolo del widget, se ne troverà immediatamente l'ID

Perché alcuni widget di Blogger non funzionano nei blog con dominio personalizzato.

Quando si installa un widget nel nostro blog, anche adeguatamente testato, le probabilità che questo funzioni non sono certo del 100% ma neppure si avvicinano al 90%. Vediamo quali possono essere le cause principali di un non funzionamento di un gadget:

1. Nel nostro blog abbiamo già un widget che acquisisce lo stesso feed di quello che vogliamo installare - Questo problema si pone quando vogliamo installare per esempio il widget degli Ultimi Articoli ma abbiamo già quello degli Articoli Recenti con Miniature. In taluni blog non viene supportata la doppia acquisizione dello stesso feed che può essere quello degli articoli, quello dei commenti o quello dei post relativi a una singola etichetta. Si può cercare di ovviare a questo problema modificando l'ordine di installazione dei gadget. Qualche volta questa semplice accortezza risolve il problema.
2. Abbiamo un modello già personalizzato - I widget che presento in questo blog sono tutti testati su modelli ufficiali di Blogger. Gli articoli più datati fanno riferimento ai vecchi template mentre quelli più recenti a quelli realizzati con il Designer Modelli ma si tratta comunque sempre di template offerti dallo stesso Blogger. Se abbiamo un modello scaricato in uno dei tanti siti che si occupano di crearli anche gratuitamente può capitare che vengano utilizzate delle librerie javascript che sono incompatibili con i widget o gli effetti proposti. In questo caso non ci sono soluzioni che possono andar bene per tutti. Il consiglio è di cercare di utilizzare i template di Blogger e di passare successivamente alla loro personalizzazione visto che molte possono essere fatte anche direttamente. Se invece siamo affezionati al nostro modello non resta che provare a vedere se ci funziona un gadget simile a quello che avevamo scelto. 
3. Ci sono incompatibilità tra due o più personalizzazioni che abbiamo inserito - Alcuni javascript non funzionano in presenza di altre librerie basate sulla stessa tecnologia. L'incompatibilità di conosciuta è quella tra JQuery e Scriptaculous, ma anche Mootools è difficile da installare in presenza di altri script.
4. Ci sono più versioni della stessa libreria javascript o non sono state aggiornate - Il caso più comune riguarda l'aggiornamento di JQuery. Gli sviluppatori sono consapevoli che è soprattutto il loro interesse risolvere le incompatibilità quindi nelle versioni più recenti vengono presentati degli script che tendono a essere ecumenici il più possibile. Se poi si installa un nuovo widget, prima di incollare l'URL dello script è fortemente consigliato di controllare se l'eventuale javascript non fosse stato già caricato. Il caso in cui nel modello ci sono più versioni dello stesso javascript, rappresenta una delle cause più comuni di incompatibilità. Molti di queste librerie sono già presenti sui server di Google e quindi possiamo ottenere la versione più recente cercandola sulle API di Google. Si può scorrere fino alla libreria che ci interessa (qui c'è quella JQuery). L'indirizzo più affidabile si trova nella riga Path.
5. Abbiamo acquistato da Google un dominio personalizzato - In questo caso è opportuno fare una trattazione più dettagliata.

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 -

Come mostrare fino a 500 post nei feed e nei widget in Blogger.

Tutti i blog su Blogger hanno i feed degli articoli all'indirizzo che si ricava dall'URL della homepage del blog

http://nomeblog.blogspot.com/feeds/posts/default oppure http://www.nomeblog.com/feeds/posts/default nel caso di dominio personalizzato

Se viene incollato questo indirizzo nella barra del browser vedremo che si visualizzeranno gli ultimi 25 articoli. C'è un metodo per riuscire ad aprire più dei classici 25 feed. Basta aggiungere alla fine dell'URL questa stringa  ?max-results=100 dove il numero può arrivare fino a 500. Per esempio

http://www.ideepercomputeredinternet.com/feeds/posts/default?max-results=200

Se avete il redirect a FeedBurner e usate Google Chrome se ne vedrà comunque lo stesso numero. Si possono anche visualizzare i feed che vanno da un numero a un altro con questa sintassi

http://www.ideepercomputeredinternet.com/feeds/posts/default?max-results=100&start-index=201

Come creare un elenco di link personalizzato per Blogger.

I blog su Wordpress e altri CMS hanno la favicon che si trova a questo indirizzo www.esempio.com/favicon.ico. Per un blog su Blogger se si digita nel browser

www.ideepecomputeredinternet.com/favicon.ico

si vedrà l'immagine della B bianca di Blogger sullo sfondo arancione. Sarà la stessa per tutti i blog, lo potete constatare sostituendo l'URL del mio blog con un altro. Anche se si è personalizzato la favicon, si vedrà invariabilmente la stessa icona. Nel caso si voglia inserire la favicon di un sito in un articolo o in una pagina web, dobbiamo adoperare questo codice HTML

<img src="http://www.esempio.com/favicon.ico"/>

Non tutti i siti permettono di acquisire la propria favicon. In questo caso ci viene in aiuto Google attraverso un metodo automatico di acquisizione delle favicon. Se vogliamo postare l'immagine della favicon di un sito web che non ci consente di acquisirla dobbiamo incollare questo codice HTML