Come creare un elenco con stile personalizzato.

Il linguaggio HTML ha dei tag specifici per creare gli elenchi numerati e puntati. I primi si realizzano con il tag <ol> seguito dai tag <li> per ciascun elemento dell'elenco con i rispettivi tag di chiusura </ol> e </li>.

Gli elenchi puntati utilizzano sempre i tag <li> e </li> per i singoli elementi mentre il tag iniziale e quello finale sono rispettivamente <ul> e <ul>. A questa struttura di base possono essere aggiunti altri tag per rendere gli elenchi esteticamente più originali.

Si possono inserire dei marcatori diversi dai punti e dai numeri come per esempio i cerchietti, i quadratini, le cifre romane o le lettere greche.

Si possono anche creare elenchi nidificati cioè inserire un elenco in un altro elenco. Per modificare lo stile di un elenco si aggiunge un attributo nel primo tag <ol> o <ul>. Per esempio nel tag <ol> si aggiunge style="list-style:upper-alpha;" in questo modo <ol style="list-style:upper-alpha;"> per ottenere questo risultato

Come creare elenchi personalizzati in un post di Blogger o Wordpress.

Negli Editor WYSIWYG che vengono solitamente utilizzati per creare del testo formattato da inserire in una pagina web solitamente sono presenti solo i pulsanti per inserire gli elenchi numerati e quelli puntati. Questo vale non solo per l'Editor di Blogger ma anche per quello di Wordpress e pure per Open Live Writer.

Le molte altre tipologie di elenchi non vengono prese in considerazione. In questo post vedremo di fare chiarezza e di dare molte utili informazioni per creare elenchi personalizzati con lettere latine, lettere greche e anche con immagini come marcatori.

I tag HTML che vengono usati per gli elenchi sono <ol> per quelli numerati e <ul> per quelli puntati insieme alle loro chiusure </ol> e </ul> e ai tag dei singoli elementi che in entrambi i casi sono <li> e </li>. In sostanza se voi cliccate sul pulsante dell'elenco puntato nell'Editor di Blogger o in altro Editor per poi aggiungere i singoli elementi se poi andate in Modalità HTML visualizzerete un codice di questo genere

Come mettere un elenco di dati in ordine alfabetico con Excel, Word o Libre Office.

Avete un file con una lista di dati e volete metterli in ordine alfabetico con pochi passaggi e non sapete come fare? In questo post vedremo come sia possibile farlo sia con Excel sia con Word. Nel caso di Excel si potrà anche inserire ciascun dato in una cella per eventuali elaborazioni ulteriori.

Come test supponiamo di avere un elenco di nominativi di persone che si sono iscritte al nostro sito tramite un modulo di contatto creato con Google Drive i cui dati siano stati salvati in un semplice file di testo e separati da una virgola o da un punto e virgola o comunque da un altro divisore.

Come dividere un elenco in 2, 3 o più colonne con HTML e CSS.

Riprendo un post che ho scritto quasi tre anni fa che affrontava il tema di come si possa suddividere un elenco in più colonne allineate. Questa soluzione è spesso presente nelle pubblicazioni cartacee e online. Vedremo come si possa realizzare attraverso un Editor HTML WYSIWYG come potrebbe essere Windows Live Writer oppure BlueGriffon che supportano l'introduzione delle tabelle. 

Se si ha un Mac o un Linux invece di un OS Windows si può comunque utilizzare il codice di una tabella per allineare le varie colonne dell'elenco. L'idea è quella di aprire WLW e di andare su Inserisci > Tabella quindi configurarla come numero di righe e di colonne. Il numero di righe sarà ovviamente 1 mentre quello delle colonne può essere 2, 3 o anche di più.

Come creare elenchi divisi in più colonne con HTML e CSS.

Vediamo come utilizzare il programma BlueGriffon per realizzare degli elenchi su più colonne. L'idea è quella di inserire ciascun elenco in una cella di una tabella per poi visualizzarli uno fianco all'altro. Con BlueGriffon si possono anche scegliere stili di elenchi anche diversi da quelli che ho già proposto in un recente post su questo sito. 

Con gli Editor WYSIWYG non occorre neppure conoscere il linguaggio HTML anche se una infarinatura propedeutica è opportuna. A tale scopo vi consiglio di scaricare il mio ebook gratuito Guida all'HTML e al CSS che serve per avere una pur minima conoscenza di base.

Utilizzando gli strumenti di BlueGriffon potremo realizzare un elenco su 4 colonne

Personalizzare gli stili degli elenchi con CSS e HTML.

Con l'HTML e il CSS possiamo realizzare degli elenchi in cui inserire testo e non solo. Sono possibili molte personalizzazioni che possono servire per un rendere più originale un elenco in un post oppure per modificare l'aspetto di un elenco in un widget.

In questo articolo vedremo i tag più importanti per realizzare degli elenchi. I due fondamentali sono <ul> e <ol> con le rispettive chiusure </ul> e </ol> e servono rispettivamente per creare un elenco puntato oppure numerato. Ciascun elemento dovrà essere inserito tra gli elementi <li> e </li>.

Il codice seguente incollato in una pagina web

Mostrare in Blogger il widget Elenco di Blog in una pagina statica.

Dopo aver ricevuto almeno due commenti su come si possa visualizzare il BlogRoll o Elenco di Blog in una pagina statica ho deciso di farci un post perché sembra che la cosa possa interessare diversi lettori. Non si può trasportare il codice del gadget dal modello nell'HTML di una pagina statica perché non funzionerebbe ma si può usare lo stesso widget insieme ai tag condizionali per mostrarlo nella area principale del sito subito sopra a una pagina statica che avremo precedentemente pubblicato senza contenuti.

Dobbiamo ovviamente installare il widget del BlogRoll nel blog andando su Aggiungi un gadget > Base > Elenco di Blog e configurandolo secondo le nostre esigenze

Come personalizzare l'aspetto di un elenco.

Abbiamo già visto come utilizzando i tag <ol> e <ul> si possano creare elenchi rispettivamente numerati e puntati direttamente con l'Editor di Blogger o con Windows Live Writer. Attraverso l'utilizzo di specifici attributi come <ol style="list-style:lower-greek;"> possiamo personalizzare lo stile degli elenchi, dove lower-greek rappresentano le lettere greche minuscole e sono solo un esempio di tutti gli stili di elenchi che si possono ottenere. La personalizzazione degli elenchi può rappresentare un aspetto di originalità per un sito che voglia evidenziare questo elemento.

Usando la sintassi <ol style="list-style-image: url(URL_IMMAGINE);"> si può inserire anche una immagine o icona prima di ogni elemento dell'elenco. Faccio una breve lista dei principali attributi che possono essere inseriti nello stile di un elenco al posto di lower-greek nel tag precedente:

TrueCaller è una app per Android e IPhone per conoscere chi ti chiama e per bloccare i seccatori.

TrueCaller è una applicazione per cellulari che ci permette di avere informazioni di chi ci stia chiamando anche quando non sia presente nella nostra rubrica. E' anche possibile digitare nome o indirizzo di una persona per trovarne in molti casi il suo numero telefonico fisso o mobile. Praticamente TrueCaller ha un database con più di 500 milioni di numeri telefonici di tutto il mondo in cui si può cercare per trovare il collegamento con un nome, con un indirizzo o con un numero telefonico. Prima di effettuare una ricerca è opportuno selezionare il Paese per velocizzarla. Si può anche connettere TrueCaller con Facebook, Twitter e Linkedin per conoscere gli ultimi tweet o aggiornamenti di stato dei contatti che ci stanno chiamando. Se l'applicazione non riesce a risalire al nominativo del chiamante fornisce comunque informazioni quali il Paese di provenienza della chiamata.

TrueCaller è disponibile per Android, IPhone, Nokia, Windows Phone e BlackBerry. E' interessante leggere le FAQ della applicazione utili anche per eventualmente togliere il nostro nominativo dai loro database qualora questo fosse presente. Gli screenshot della applicazione sono stati eseguiti con un Samsung Galaxy Nexus equipaggiato con Jelly Bean.

1. TrueCaller su Google Play -
2. TrueCaller per IPhone

Creare una mappa del blog per etichette su Blogger.

Google consiglia gli amministratori dei siti di inviare una o più sitemap agli Strumenti per Webmaster in modo da velocizzare l'indicizzazione degli stessi. Viene anche auspicato che anche i lettori abbiano la possibilità di sfogliare una mappa del sito per accedere con più efficacia alle informazioni.

Le mappe del sito per visitatori sono basate su degli script che sono spesso lenti a caricare e non hanno una grande immediatezza grafica. Qualche tempo fa ho presentato un widget che mostrava tutti i post pubblicati corredati della relativa miniatura. L'impatto grafico era decisamente migliore ma la lentezza nel caricamento rimaneva immutata .

Con questo post voglio illustrare un nuovo tipo di Sitemap con gli articoli suddivisi per etichetta. Le varie categorie vengono visualizzate sulla sinistra in un elenco verticale con cursore di scorrimento mentre i post di ciascuna etichetta vengono visualizzati sulla destra quando quando viene selezionata

Come creare elenchi su 2 o più colonne.

Dopo aver mostrato come si possa creare una Galleria Fotografica usando Windows Live Writer, con la funzione Tabella dello stesso programma vediamo come si riesca facilmente a creare un elenco suddiviso in varie sezioni. Questo sistema è molto utile se abbiamo a che fare con elenchi con molti elementi che sono però sufficientemente corti da essere visualizzati su più colonne senza problemi.

Si utilizza WLW semplicemente come Editor WYSIWYG per creare il nostro elenco su più colonne per poi copiare l'HTML andando su Origine e quindi incollarlo in un gadget HTML/Javascript o addirittura in un un post o in una pagina statica logicamente con l'Editor in Modalità HTML. L'aspetto dell'elenco sarà questo

Elenco dei titoli di tutti i post in ordine cronologico o alfabetico.

Avevo già presentato questo widget in un articolo di qualche tempo fa e la sua funzione era quella di mostrare un elenco degli ultimi 2000 articoli del blog ordinati secondo la cronologia o l'alfabeto. Il gadget era stato creato modificando un eccellente lavoro di Blogger Sentral e, come molti widget di questo genere, utilizza i Pipes di Yahoo.

In un commento mi è stato comunicato che il widget ha smesso di funzionare. Ho quindi pensato di riproporlo riveduto e corretto con la possibilità per tutti di creare il proprio Pipe.

Non c'è bisogno di modificare il template ma basta andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare questo codice

Widget degli Ultimi Articoli per Blogger con icona.

Una rassegna degli Ultimi Post pubblicati sono un dato essenziale per informare il navigatore del tipo di argomenti trattati dal nostro sito. Questo serve per cercare di far rimanere il più a lungo possibile il visitatore nel blog inducendolo a aprire almeno un altro post. Una diminuzione della frequenza di rimbalzo può avere ripercussioni molto positive sul posizionamento delle nostre pagine.

Ci sono moltissimi gadget che mostrano gli ultimi articoli. Si va da quello che fa vedere tutti i post a quello che permette di visualizzare solo quelli per una singola etichetta, dal widget orizzontale con le miniature a quello verticale sempre con miniature, dallo slideshow dei titoli dei post allo slideshow delle immagini degli ultimi articoli.

Ci sono alternative estremamente sofisticate e scelte più minimaliste. Passo a illustrare quale potrebbe essere una via di mezzo presentando il gadget degli Articoli Recenti in un elenco verticale ma con uno stile particolare che ci permetta di inserire una piccola icona prima di ciascun titolo.

Come creare un menù con Blogger senza usare codice HTML.

In questo blog mi sono spesso occupato di menù per Blogger presentandone di tutti i tipi. Ho anche fatto una raccolta dei post con i migliori menù. Le esigenze in questo campo sono molto diverse. Ci sono coloro che preferiscono la semplicità e altri che invece amano menù molto sofisticati. Anche dal punto di vista grafico c'è chi preferisce un aspetto asciutto e chi invece ama effetti slide e personalizzazioni.

Con questo articolo voglio andare incontro a chi vuole creare un menù per il suo blog su Blogger ma che sia completamente digiuno di codice HTML. Fra i vari gadget ufficiali di Blogger c'è quello chiamato Elenco di link che ha la particolarità di configurarsi in verticale se inserito nelle sidebar e di mostrarsi invece in orizzontale se posizionato nella parte alta del layout subito sotto l'header.

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

Widget degli Articoli più commentati con elenco personalizzabile.

Questo post è un aggiornamento di un articolo che avevo pubblicato qualche tempo fa su un gadget per Blogger che elencava i post con più commenti. L'aggiornamento si è reso necessario perché Yahoo ha cambiato il motore del suo strumento Pipes  passando dal V1 al V2. Questo ha provocato il malfunzionamento di molti Pipes che erano stati realizzati con la tecnologia precedente. Alcuni sono tornati a posto da soli come quello che è alla base del Gadget dei Top Commentatori, altri come il Pipe per questo widget continuava a dare messaggi di errore.

Cercando tra i Pipes di Yahoo funzionanti ho trovato delle idee utili su quegli di Blogger Sentral e di Belog Cap Ayam, un blog malese di fashion, che mi hanno permesso di creare una Pipe in grado di generare i feed giusti per il nostro widget.

Il Widget degli Articoli più commentati mostra appunto un elenco personalizzabile dei post che hanno ricevuto più commenti tra gli Ultimi 1000 post che sono stati pubblicati. Ho postato nel web una

Widget dell'elenco dei titoli del blog in ordine cronologico o alfabetico.

Anche in questo caso come per quello del widget dei Top Commentatori e dei Post più commentati si usano gli Yahoo Pipes per ottenere l'elenco dei titoli dei post in un determinato ordine. Il codice può essere inserito in un elemento HTML andando su Design > Aggiungi un gadget > HTML/Javascript oppure anche in una pagina statica per mostrare tutti i post in ordine alfabetico o di pubblicazione.

Vengono presi in considerazione solo gli ultimi 2000 articoli quindi se avete un blog che ne ha pubblicati di più può capitare che il Pipe non funzioni. In questo caso si può sempre optare per la creazione di una sitemap del sito come illustrato nell'articolo:
Come creare una mappa del sito per giorni, mesi o etichette -

Widget degli articoli con più commenti per Blogger con diversi stili di elenchi.

In un precedente post ho già presentato un gadget inerente ai post più commentati ma non mi aveva pienamente soddisfatto in quanto a estetica e possibilità di personalizzazioni. Si basava su Yahoo Pipes e prendeva in considerazione gli ultimi 5000 commenti a prescindere dai post che li avevano ricevuti.
Con questo nuovo gadget si cambia approccio e i post rilevati saranno gli ultimi 1000 che sono stati pubblicati.
Lo perdita sarà quella di non considerare i vecchi post, se ne abbiamo pubblicati più di mille, ma ci sarà l'innegabile vantaggio di poter visualizzare il numero di commenti che hanno effettivamente ricevuto.

Motore di ricerca esterno per Blogger.

In un blog è fondamentale avere un motore di ricerca per permettere ai visitatori di cercare nei contenuti del sito attraverso delle opportune keyword. Questo motore è importante anche per l'autore del blog, visto che non ci si può ricordare l'indirizzo di tutti i post che si sono scritti. Cercarli attraverso le etichette è frustrante e usare la casella di ricerca è un modo per arrivare all'articolo in pochi click.

Personalmente queste ricerche le faccio molte volte al giorno, non solo quando mi accingo a scrivere un post, ma soprattutto quando devo rispondere a dei commenti in cui mi pongono dei quesiti che ho già affrontato in un altro articolo. Se si utilizza la ricerca di Google insieme a Adsense è noto che appaiono anche gli annunci pubblicitari relativi alla keyword che si è immessa. Ora è evidente che se si fanno delle ricerche sul nostro blog, non si deve assolutamente cliccarci sopra. La ricerca sul nostro sito con Adsense in sé stessa non è esplicitamente proibita come si può constatare consultando la Guida di Adsense relativa a questa funzionalità. Però è sconsigliato utilizzare il nostro motore perché aumenta il rischio di click accidentali e rende imprecisi i rapporti relativi al traffico verso le nostre pagine. E' consigliato usare la Google Toolbar per effettuare ricerche tramite scorciatoie. Francamente non mi sembra un sistema dai tempi brevissimi anche inserendo un comando supplementare per limitarla a un determinato dominio. Per esempio se si digita nella casella di Google questa stringa

Come aggiungere link al widget delle pagine statiche per creare un menù.

In Blogger, dopo l'introduzione delle pagine statiche, si può creare un menù orizzontale formato proprio da tutte quelle pagine che sono state pubblicate e che possono arrivare fino a dieci. Il menù che si viene a creare può essere inserito in senso orizzontale sotto l'intestazione o in senso verticale in una sidebar. C'è anche la possibilità di non associare alcun widget alle pagine statiche che è stata la scelta di questo blog. Blogger non dà nativamente la possibilità di inserire dei collegamenti a degli URL che non siano di pagine statiche di quello stesso blog.

Vediamo come sia possibile ovviare a questo problema e di come si possa creare un menù orizzontale molto efficiente e semplice da realizzare. Per prima cosa dobbiamo aver pubblicato almeno una pagina statica e averla salvata nel widget orizzontale. Andiamo adesso su Design > Modifica HTML e salviamo il modello completo. Dopo aver messo la flag a espandi modelli widget cerchiamo questo codice