Dividere la sidebar in schede per mostrare i widget nello stesso spazio.

Qualche tempo fa ho presentato un metodo per suddividere la sidebar in più parti, adesso illustro un procedimento alternativo che offre un maggior numero di personalizzazioni. Inoltre questo sistema ha il vantaggio di inserire i contenuti delle varie schede dello stesso elemento HTML/Javascript.

 

La larghezza delle linguette delle schede sarà proporzionata al numero di caratteri del suo nome. E' inoltre possibile modificare i colori di background, del link, del link visitato e di quello puntato. Si possono personalizzare anche i colori dei bordi e le dimensioni dei caratteri. Per l'installazione si va su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si cerca la riga </head> e, subito sopra, si incolla il codice

Inserire in una posizione fissa e personalizzare il bottone del Mi Piace di Facebook.

Dopo aver illustrato come implementare un widget nel blog in una posizione fissa, cioè che non muta quando si scorre la pagina, vediamo come applicare questo metodo ai bottoni di Facebook. Il Like Botton di Facebook è disponibile in tre versioni tutte quante con la possibilità di implementare anche il bottone Invia. Nel seguente screenshot sono visibili la versione standard, quella box count e quella a pulsante con contatore

 

Per il codice di ciascuno di essi vi rimando al post sulla personalizzazione del Mi Piace. Ricordo brevemente che per il pulsante standard si utilizza il codice layout=standard, per il pulsante con il contatore layout=button_count e per il box con contatore layout=box_count. Se non si inserisce nessun parametro viene visualizzato il pulsante standard.

Come inserire widget, pulsanti e video che rimangano fissi allo scorrere della pagina.

A fronte di una domanda che ho appena ricevuto in un commento ho pensato di scrivere quello che chiamo scherzosamente un "instant post" per rispondere in modo un po' più particolareggiato. La richiesta riguardava la possibilità di inserire una chat nel blog in modo tale da farla rimanere sempre in primo piano anche quando si scorre la pagina. Ho pubblicato un articolo di demo di

• Widget, video, pulsanti e immagini flottanti -

Sulla sinistra della pagina vedrete un pulsante per la condivisione su Facebook e un video di Youtube mentre nella parte destra in alto, è visibile la chat CBox che è la mia preferita tra tutte quelle che possono essere inserite in un blog. Per inserire oggetti flottanti o statici che dir si voglia, bisogna andare su Design > Aggiungi un gadget > HTML/Javascript e incollare un codice simile a questo

Come tradurre documenti Word (Doc) o PDF con Google Traduttore.

Il web è immenso e ci sono pagine pubblicate in più di duecento lingue diverse. Google ha da sempre avuto molto a cuore le tematiche legate alla traduzione e in rete è disponibile quello che probabilmente è il miglior strumento per tradurre una porzione di testo. Attualmente sono supportate 58 lingue. Google Traduttore è formato da due campi in cui incollare la scritta da tradurre, selezionare l'idioma di partenza, quello di uscita e procedere con la traduzione

Se si incollano meno di dieci parole, sono presenti anche le due icone Ascolta che permettono di togliersi dei dubbi sulla corretta pronuncia di una data parola o frase. Se non si conosce la lingua di partenza, si può sempre utilizzare lo strumento automatico Rileva lingua. Di seguito vedete un esempio per un testo estratto da una pagina in vietnamita 

Come scoprire il numero di telefono degli amici su Facebook e come nascondere il nostro.

Questo articolo mi è stato ispirato da un post di Astasia di TrendyNail e riguarda le impostazioni della privacy sulla visibilità del numero di cellulare che abbiamo utilizzato per verificare il nostro account su Facebook. Forse non tutti sanno che nella pagina dei contatti di Facebook si possono liberamente visualizzare tutti i numeri di telefono degli amici che non si sono preoccupati di modificare le impostazioni di base. Questa pagina si può raggiungere direttamente, oppure la si può trovare andando su Account > Modifica Amici > Contatti

Come inserire il modulo dei Commenti di Facebook in Blogger.

Su Facebook le cose cambiano velocemente e i post precedenti che avevo dedicato all'argomento sono ormai diventati obsoleti. Vediamo quello che è attualmente il metodo più semplice per implementare i commenti di Facebook sotto l'articolo di un blog su Blogger. Sappiamo che su questa piattaforma possiamo scegliere di commentare tramite una finestra popup, una intera pagina o attraverso il modulo dei commenti visualizzato proprio sotto l'articolo. Attraverso le API di Facebook si introduce un nuovo modo di commentare senza però eliminare il precedente. Si dà cioè ai visitatori la possibilità ci commentare il blog come al solito oppure di farlo attraverso la loro identità Facebook. Sarà anche possibile commentare con una identità diversa dalla solita utilizzando quella di una pagina fan di cui siamo amministratori.

Creazione della applicazione Facebook

Il primo passo prevede la creazione di una applicazione Facebook. Se non si esegue questo passaggio, i commenti saranno visibili ma non sarà possibile moderarli. Dopo essersi loggati su Facebook si accede alla pagina Crea Applicazione in cui si inserisce il nome dalla App, che potrebbe essere quello del blog, si mette la spunta a Sono d'accordo e si clicca su Create App. Se avete più siti, potete creare più applicazioni che saranno tutte elencate nella pagina degli Sviluppatori. Per ciascuna App possiamo inserire anche altri dati quali l'URL del sito o una icona che rappresenta l'applicazione. Il dato che ci serve in questo contesto è l'ID della applicazione che si trova proprio all'inizio

Minus per caricare e condividere immagini e file.

Per chi ha un blog su Blogger il servizio di elezione per la condivisione di immagini è sicuramente Picasa. Voglio però presentarvi un'altra opzione decisamente accattivante che può servire di supporto e di alternativa in certe circostanze. Min.us è un hosting in cui non è obbligatorio registrarsi. Si possono caricare file e ottenere il link di condivisione senza aver dato né un username e neppure una email. Si può utilizzare il drag & drop oppure cliccare sul link Select per scegliere il file da caricare.

Minus viene principalmente usato per le immagini ma si possono caricare altri tipi di file come i PDF, documenti di testo, file musicali e video. Sono supportati tutti i formati Microsoft. Per quanto riguarda le foto si possono creare tutte le gallerie che vogliamo e i file resteranno nei loro server per un tempo illimitato. Il limite massimo per ciascun file è di 25MB per i Guest, cioè coloro che non si registrano, e di 50MB per gli utenti che hanno provveduto alla iscrizione gratuita. Dopo che si è creata una galleria, si possono usare le frecce sinistra e destra per navigare all'interno di essa. Ciascuna galleria può contenere un massimo di 50 elementi che potranno aumentare in futuro.

Facebook introduce i feed per le pagine fan da ricevere anche tramite SMS.

I sottoscrittori di una pagina fan ne ricevono gli aggiornamenti di stato sulla loro Bacheca in Facebook. Da ieri è disponibile un nuovo link per sottoscrivere i feed RSS della pagina. Questo consente di visualizzarne gli aggiornamenti direttamente nel lettore dei feed senza aprire e loggarsi su Facebook. In futuro sarà probabilmente possibile creare dei widget da inserire nel blog che mostreranno gli ultimi post di una particolare pagina fan.

Per sottoscrivere i feed di una Fan Page occorre andare nella colonna di sinistra e cliccare su Iscriviti ai feed RSS

 

Come diminuire lo spazio tra post e post e tra widget e widget in Blogger.

Quando ho introdotto l'estensione Firebug per Firefox, avevo accennato a come possa essere utilizzata per modificare alcune parti del modello in modo molto semplice. Vediamo subito un paio di casi in cui si può usare. In alcuni commenti, diversi utenti di Blogger, si lamentano di come i singoli post siano troppo distanti tra di loro quando si apra la homepage e di come lo siano anche alcuni widget nella sidebar.

Come diminuire la distanza tra i post in Homepage

Si apre Firefox, si va sulla homepage del nostro blog e si clicca sulla icona di Firebug. Successivamente si seleziona l'area di un post e si controlla quale sia la classe che ne determina lo stile

Come inserire un bottone per stampare una pagina del blog.

Ricordo alcuni articoli che ho già pubblicato sull'argomento che riguarda la stampa delle pagine del sito:

1. Come stampare un articolo del blog -
2. Inserire un link per stampare una pagina -

Con questo post voglio invece presentare qualcosa di molto più semplice e immediato e che può essere la scelta migliore per siti che non hanno pubblicità o oggetti grafici particolarmente sofisticati. Si tratta in sostanza di inserire un semplice pulsante andando su Design > Aggiungi un gadget > HTML/Javascript e incollando il seguente codice

<input type="button" style=" color:#003366; background-color: #FDBCB7; width: 12em; font-weight:bold; padding: .5em; border-radius: .7em;" value="Stampa questa pagina" onclick="window.print()" />

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.

Firebug è una estensione di Firefox per ispezionare le pagine web e modificare il template.

In molti dei commenti mi viene chiesto di come procedere per effettuare delle modifiche al sito, come posizionare meglio un widget, come aumentare delle dimensioni di alcuni elementi, come centrarne altri e altre richieste analoghe. L'aspetto del layout del blog è determinato dal codice HTML e dai CSS presenti nel modello. Una prima idea delle operazioni da fare si può avere andando a dare una occhiata al codice sorgente della pagina. Su Firefox si va su Visualizza > Sorgente pagina, su Chrome invece si clicca con il destro del mouse sulla pagina e si sceglie Visualizza sorgente pagina. In tutti i browser si può accedere alla Sorgente pagina con la scorciatoia da tastiera Ctrl+U (OS Windows).

Visualizzando il modello non è detto però che si trovi subito il blocco di codice che interessa quel particolare elemento. Per esempio non è così immediato andare sul CSS che determina l'aspetto della data o del titolo del post. Bisogna anche dire che nei modelli personalizzati, ogni programmatore fa un po' come gli pare e nomina le classi di stile secondo una sua particolare preferenza.

Come convertire file XML in HTML, un testo da maiuscolo in minuscolo e viceversa.

Tutti gli utenti di Blogger sanno che il modello del loro blog è in linguaggio XML e sanno anche che per inserire alcuni oggetti devono convertire il codice da HTML in XML. Quando in fatti si va su Design > Modifica HTML e si scarica il modello completo per un eventuale backup di ripristino, dal download si ricava un file XML. In rete esistono diversi strumenti per convertire HTML in XML, ricordo per tutti Blogcrowds che è un tool usato per esempio per inserire la pubblicità di Adsense above the fold.

Questi strumenti sono anche usati per inserire del testo formattato nel template per essere visibile in tutti i post. Se per esempio abbiamo effettuato questa personalizzazione e vogliamo modificare la scritta, ci troviamo in difficoltà perché dovremo editare nuovamente il testo per poi convertirlo in XML. Questo fino a poco tempo fa, perché adesso ho trovato in rete uno strumento che effettua entrambe le operazioni. Converte cioè file HTML in XML e file XML in HTML.

Accedere alle pagine fan di Facebook anche in caso di account disabilitato.

Da ieri sera è finalmente possibile accedere a tutte le nostre pagine fan da una stessa schermata. E' infatti apparso il collegamento Pagine nella Home di Facebook. Si potrà quindi cliccare sulla pagina fan che ci interessa dopo essere entrati. Oltre al collegamento diretto, vengono mostrate anche le principali statistiche relative all'attività dei sottoscrittori. Sarà anche possibile visualizzare l'elenco delle ultime notifiche

Static HTML: iframe tabs per creare 12 pagine su Facebook con video, immagini e file musicali.

Dopo la modifica del linguaggio di programmazione da parte di Facebook sono diventate inutili applicazioni quali Static FBML che venivano utilizzate per aggiungere riquadri e nuove schede alle nostre pagine fan. Recentemente ho presentato una applicazione che riesce in effetti a creare una pagina HTML da inserire nella pagina fan ma che ha il grosso difetto di non poterne inserire altre.

Con Static HTML: iframe tabs si possono invece creare fino a 12 pagine personalizzate. E' stata realizzata da due giovani programmatori di Washington: Timothy Mensing e Jason Padvorac. Vediamo step by step come creare delle schede da aggiungere alla nostra pagina. Occorre cliccare su Aggiungi alla mia pagina e selezionare quella su cui si intende operare

Come inserire una cartina di Google Maps in un blog.

C'è un mashup molto interessante che si chiama UMapper che consente di inserire mappe nei siti con molta facilità e in modo gratuito. Sempre con lo stesso servizio possiamo realizzare anche divertenti giochi geografici. Vediamo adesso come sfruttare alcuni strumenti messi a disposizione da Google per inserire delle mappe nel nostro sito.

Come con GMail anche in Google Maps ci sono diverse funzioni sperimentali raggruppate nei Labs. Dopo aver effettuato l'accesso a Google Mappe tramite il nostro account Google, dobbiamo andare su Impostazioni > Labs di Maps

Come inserire un banner nel profilo personale di Facebook.

MyTopBanner è una applicazione che ci permette di aggiungere un banner per riempire la parte alta in cui si visualizzano le ultime foto caricate o quelle in cui siamo stati taggati. Il banner inserito viene suddiviso automaticamente in cinque parti da visualizzarsi nelle cinque finestre accanto all'avatar. Le immagini a disposizione non sono moltissime ma comunque abbastanza carine.

Sono suddivise in varie categorie: Animali, Occhi, Sentimenti, Frattali, Ragazze, Natura, Stelle, Miscellanea, Auto, Cibo, Amore, Musica, Humor, Fiori, Sport & Hobby, Testo, Pattern, Fumetti, Giochi, Vacanze, Cinema e TV, Persone e Tecnologia. Dopo aver selezionato il banner che ci piace di più, non resta che cliccare su Add Banner nella parte alta della pagina

Come inserire una finestra popup di benvenuto con ShadowBox.

Ho avuto modo di presentare l'Effetto Shadowbox che ritengo sia uno dei migliori per gli utenti di Blogger data la sua estrema versatilità. L'obiettivo di questo post è quello di creare una finestra popup di entrata che può essere personalizzata con una immagine o anche con qualsiasi oggetto HTML. Ho postato sul web una dimostrazione di questo effetto

• Demo della finestra popup che si apre -

L'immagine che si visualizza ha un collegamento alla sottoscrizione dei feed di questo blog, può essere chiusa cliccando sulla crocetta in basso a destra oppure scomparirà automaticamente dopo 20 secondi dall'apertura della pagina. La durata dell'apertura può essere personalizzata

Come impedire di copiare testo e immagini di un post.

La pratica di copiare i contenuti di un sito è tra le più antipatiche del web ed è un problema molto sentito dai blogger che impiegano ore se non giorni per creare un articolo e se lo vedono copiare e ripubblicare da un'altra parte in due minuti. Questo vale a maggior ragione anche per le immagini, specie se sono realizzate in modo professionale e hanno alla base un lungo lavoro anche di ritocco grafico.

Mi sono già occupato del problema in questi articoli in cui ho dato delle dritte per rendere più difficile la vita dei "copioni"

1. Come disabilitare il destro del mouse -
2. Come disattivare il menù contestuale -
3. Come disabilitare il destro del mouse solo nelle immagini -

Come cancellare una richiesta di amicizia su Facebook con Unfriend Finder.

Qualche giorno fa l'estensione Unfriend Finder ha portato un sacco di problemi a chi l'aveva installata. Un bug dello script obbligava di volta in volta gli utenti che l'avevano installata a riloggarsi su Facebook. Lo sviluppatore della applicazione ha fortunatamente posto rimedio al problema e adesso funziona benissimo. UnFriend Finder serve soprattutto per visualizzare i cosiddetti Ex Amici, cioè coloro che ti hanno tolto dalla loro cerchia di amicizie. Può essere installata in tutti i browser (Chrome, Firefox, Opera e Safari) escluso Internet Explorer.

• Vai al sito di Unfriend Finder -

Se si ha Chrome si può installare senza ulteriori configurazioni. Con Firefox bisogna prima avere nel browser l'altro addon GreaseMonkey. In ogni caso si va su Télécharger (il sito è francese) e si seguono le istruzioni. Si può selezionare anche la lingua inglese se si ha poca dimestichezza con l'idioma dei transalpini. Nel caso di Chrome è sufficiente cliccare su una icona e confermare la volontà di installazione. Quando si aprirà Facebook, vedremo la nuova voce degli Ex Amici in cui saranno visualizzati i nominativi di coloro che ci hanno cancellato dai contatti

Effetto ShadowBox per gallerie di foto e di video.

Ho presentato diversi effetti molto suggestivi come Lightbox, Lytebox, Expando, Facebox, Sfoglia Pagina e altri ancora ma credo che quello che vado a illustrare sia il migliore e il più completo. ShadowBox si basa sullo stesso concetto di Lightbox che permette all'utente di aprire delle finestre modali unitamente alla opacizzazione dello sfondo. Quello che ha in più rispetto a Lightbox è che è possibile anche utilizzarlo per i video di Youtube e Vimeo oltre che per pagine HTML come del resto accade anche per Lytebox.

E' anche possibile utilizzare l'effetto con delle mappe e creare un popup di benvenuto a chi arriva nel nostro blog. Queste due ultime funzioni le vedremo in un prossimo articolo per non appesantire troppo la trattazione. Si possono scaricare i file necessari all'installazione direttamente dal sito del creatore. Si mette la flag alle funzionalità che interessano e si seleziona la lingua con cui si vuole che operi l'effetto. Visto che è una operazione che ho già fatto e che ho già caricato le immagini degli strumenti di navigazione sul mio account Picasa, potete limitarvi a inserire gli script e i CSS nel template. Andate su Design > Modifica HTML e cercate la riga </head>. Immediatamente sopra incollate questo codice

Guida e tutorial per Gimp, software gratuito di grafica.

Ricevo continuamente delle email con la richiesta di recensire siti. Molte volte quelli che mi vengono proposti esulano dagli argomenti che tratto di solito, altre volte non li giudico così interessanti da farci un articolo. Ci sono però delle eccezioni. Chi segue questo blog sa della mia sostanziale ignoranza per quello che riguarda i programmi di grafica e sa anche che uso Gimp per quelle che sono le operazioni indispensabili per gestire un sito web. Sono stato informato che esiste in rete un intero sito in italiano per aiutare i neofiti a entrare nel mondo della fotografia e del fotoritocco.

Mora-Foto è tenuto dai due fratelli Marco e Andrea Mora appassionati di fotografia. La sezione più interessante riguarda Guide e Tutorial che tratta di tecniche di composizione, fotografia HDR (High Dinamic Range) ma soprattutto Guide per Gimp. Interessante per tutti coloro che si trovano a doversi confrontare con il fotoritocco senza avere le basi necessarie di conoscenza di programmi di grafica e che non vogliono spendere soldi per Photoshop.

Dopo una introduzione e illustrazione degli Strumenti presenti su Gimp si passa alle lezioni su Maschere, Livelli, Ritagli, Luminosità e inserimento di Testo. Successivamente la guida tratta cose più complicate come la Gestione dei colori, le Sfocature artistiche e i Plugin. Sono anche presenti tutorial per la realizzazione di effetti particolari quali Dragan, Bleach Bypass, Cross Processing, Lomo, Orton, Tilt-Shift, Effetto Che Guevara, Visore notturno, Invecchiamento, Two stripe color e Disegno a matita.

Google Instant Preview ora anche negli Strumenti per Webmaster.

Ricorderete quando Google ha inserito nelle sue pagine di ricerca Instant Preview o Anteprima Istantanea. Dopo aver effettuato una ricerca, si clicca sulla lente a lato di ciascun risultato per visualizzare l'immagine della pagina relativa senza doverla aprire. Alcuni webmaster avevano notato la differenza tra l'anteprima mostrata da Google e quello che realmente vedevano con il loro browser.

Per aiutare a risolvere questo problema e per fare in modo che i crawler di Google vedano la stessa cosa dei navigatori, da alcune ore è presente sugli Strumenti per Webmaster una nuova funzione. Ne da notizia il Google Webmaster Central Blog nel quale si annuncia questa novità solo per i siti in lingua inglese. Sono andato nel mio account Strumenti per Webmaster e ho visto che è già disponibile anche in italiano. Bisogna andare su Funzioni sperimentali > Anteprime istantanee e incollare l'indirizzo della pagina di cui vogliamo visualizzare l'aspetto. Si fa presente però che le anteprime sono state realizzate senza alcuni plugin come Flash e Silverlight e quindi ci possono essere oggetti non visibili nell'anteprima

Come integrare Disqus per gestire i commenti su Blogger.

Disqus è un servizio web creato nel 2007 per la gestione dei commenti su varie piattaforme. Il concetto è quello di salvare i commenti sui loro server e di realizzare una rete sociale di interazione con altri utenti e altri blog. La prima cosa da fare è quella di creare un account andando su Sign Up. Successivamente si potrà accedere cliccando su Login, in alto a destra, inserendo le nostre credenziali. Si potrà in ogni momento editare il Profilo per inserire ulteriori informazioni, aggiungere un avatar, configurare servizi e notifiche

Blogger ha modificato il file robots.txt per la scansione del crawler di Google.

Avevo notato che sugli Strumenti per Webmaster, nella sezione Errori di scansione > Non trovato c'erano degli URL molto strani che producevano collegamenti interrotti. Questo era dovuto al fatto che Blogger intende inserire la nuova funzionalità degli Argomenti Correlati. Per evitare che i blog su Blogger fossero penalizzati da questi broken links, è stato modificato il file robots.txt che dà le indicazioni al crawler di Google per la scansione dei siti.

Dopo aver eseguito l'accesso negli Strumenti per Webmaster e aver selezionato il vostro blog, se andate su Configurazione Sito > Accesso Crawler > Analizza robots.txt vedrete un file di questo genere

Scan Mail Checker per verificare se un indirizzo email è valido o meno.

Tutti i giorni riceviamo un numero più o meno alto di messaggi di posta elettronica da mittenti più o meno sconosciuti, inoltre ci vengono comunicati con diversi strumenti una quantità di indirizzi email che non sappiamo se siano validi o meno. Possiamo certo fare un test inviando un messaggio di prova. Se non ritorna indietro vuol dire che l'indirizzo era valido. Se si hanno delle mailing list molto lunghe non è che possiamo fare questo controllo singolarmente.

Scan Mail Checker è un programma diventato gratuito da poco che permette di effettuare controlli contemporaneamente su vaste liste di indirizzi. Le sue caratteristiche principali sono

1. Si possono importare elenchi salvati in file di testo, fogli Excel, documenti Access, file CSV, fogli di calcolo Open Office
2. Elimina gli indirizzi ripetuti per evitare di mandare doppie o triple email alla stessa persona
3. Controlla se il dominio è corretto
4. Controlla se l'indirizzo di posta esiste veramente

Come inserire widget di Google News, Twitter e streaming video in siti di informazioni.

Ieri si sono svolte delle elezioni amministrative che hanno riguardato 12 milioni di elettori. Non vi preoccupate non ve ne parlerò, non è compito di questo sito. Vediamo invece come dei blog che si occupano di notizie possano utilizzare strumenti esterni per arricchire la propria offerta di informazione. Un widget molto interessante è senza dubbio quello offerto da Google News che può essere anche personalizzato a seconda degli argomenti che tratta il nostro sito. Ci sono diversi topic quali  Prima pagina, Mondo, Business, Politica, Nation, Intrattenimento, Tecnologia, Sport e Salute e si può scegliere di avere un widget largo o stretto.

Si possono anche utilizzare le risorse di Twitter presenti in Risorse Widget. Ce ne sono ben quattro:

1. Widget del Profilo che mostra i tuoi aggiornamenti di stato più recenti
2. Widget dei Preferiti che estrae i tweet che hai contrassegnato come preferiti
3. Widget con liste che inserisce i tuoi tweet all'interno di una lista da mostrare in un gadget
4. Widget di ricerca è il più indicato per un blog di informazione, vediamo come funziona più in dettaglio

Inserire la Big Bar su Internet Explorer per Facebook, Mail e Video.

Gli assidui frequentatori del web usano raramente Internet Explorer come browser predefinito per la sua lentezza, per i problemi che comporta nella corretta visualizzazione dei siti e per una mancanza pressoché totale di estensioni e componenti aggiuntivi. Ciò non toglie che, avendo il privilegio di essere installato di default in tutti gli OS Windows, rimanga tuttora il browser più usato anche se la sua quota di utilizzo decresce in modo inesorabile.

Immagino che molti lettori di questo sito utilizzino IE9 abitualmente. Per loro ma anche per chi usa IE sporadicamente, è disponibile la nuova versione della Bing Bar, la Toolbar della Microsoft che può essere installata in tutti i sistemi operativi Windows più recenti. Se avete scaricato IE9 è possibile che la abbiate di già, altrimenti potete fare il download dalla pagina di Introduzione alla Bing Bar. Gli accordi intercorsi tra la Microsoft e Facebook fanno sì che la nuova toolbar abbia un bottone speciale per la condivisione sul Social Network per eccellenza

Creare una firma animata con icona e inserirla alla fine di ogni articolo.

Ho già trattato diverse volte il tema di come firmare i post su Blogger e anche di come mettere delle firme diverse a seconda dell'autore dell'articolo. Adesso voglio mostrare come creare una firma animata personalizzata con icona e come inserirla nei blog di Blogger. In rete si possono trovare diversi servizi ma quello che ho trovato più interessate e completo è stato GIF-Mania Your Animated Signatures.

Si creano firme animate in quattro passaggi scegliendo ovviamente il testo, la famiglia di caratteri, il colore della firma e una icona che ne accompagni l'animazione. Usando per esempio una matita come icona si ha un effetto particolarmente suggestivo.

 

Inserire la data del giorno nella parte alta del blog in modo automatico.

Il titolo potrebbe essere considerato pleonastico perché i blog su Blogger stampano automaticamente la data insieme al titolo del post. In molti blog si è però deciso di eliminare la data degli articoli. Questo per non far sapere ai navigatori che i contenuti del post sono magari già vecchi. Questa operazione si può fare molto semplicemente andando su Design > Elementi pagina > Post sul blog > Modifica e togliendo la spunta alla data. Maggiori informazioni possono essere trovate nell'articolo che tratta di come configurare i post di Blogger.

In questo caso si può scegliere di visualizzare la data corrente in automatico in tutte le pagine del blog, magari in modo flottante. Aprite questo post di demo e guardate in alto a sinistra per avere una idea della cosa

Il procedimento di installazione è molto semplice. Come sempre si va su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si espandono i modelli widget e si cercano i seguenti tag

Come creare una pagina di introduzione o benvenuto per blog su Blogger.

Ho già presentato una personalizzazione per creare una Pagina di Introduzione utilizzando l'effetto Lightbox. Vi potete rendere conto del suo funzionamento accedendo al blog Pagina Demo di Benvenuto. Ci sono diversi metodi che possono essere usati per realizzare una pagina di introduzione al blog. La maggior parte di questi ha però bisogno della creazione di una pagina HTML esterna al sito che potrebbe essere caricata per esempio su Altervista. Questo comporta che i backlink che riceve vengano perduti a tutto discapito del Rank e dell'autorità del blog.

Vado a illustrare un procedimento abbastanza semplice per creare una Pagina di Introduzione (o Benvenuto) al blog su Blogger che non ha questo effetto collaterale e che può essere personalizzata come si vuole.

• Demo della Pagina di Introduzione al blog -

Come vedete è molto minimalista ma i più esperti di voi con il linguaggio HTML, ma neppure tanto, possono sbizzarrirsi inserendo altri elementi

Defaceable è una estensione di Chrome per inserire commenti anonimi su Facebook.

Defaceable è una estensione per Chrome che consente di inserire commenti anonimi su Facebook. L'autore dei commenti avrà il nome di un frutto con l'icona corrispondente. Dopo l'installazione dell'addon sarà visualizzato il link Deface

 

Iconza per icone gratis con gli stessi colori del vostro blog.

Nel web possiamo trovare icone gratuite in moltissime siti, ricordo per tutti IconFinder che funziona come un vero e proprio motore di ricerca per icone. Se abbiamo l'esigenza di avere icone che si intonino ai colori del nostro sito, l'opzione gratuita migliore è certamente Iconza. Si tratta di un sito che offre gratis un intero set di 120 icone di base che vanno dalle frecce, alla home, dall'icona RSS al cuore, dalla busta per email alla pellicola del video

 

MultiFox per collegarsi con più account simultaneamente a Facebook, Google, Yahoo, ecc.

Quando si accede a un sito mediante l'inserimento di nome utente e password, vengono generati dei cookie per ricordare al browser i dati dell'accesso. Se si vuole connettersi con credenziali diverse dobbiamo prima scollegarci e poi riconnetterci. Google ha recentemente introdotto il multilogin che permette di fare questa operazione in automatico. Per poterlo utilizzare bisogna andare su Manage Account e rendere attivo l'Accesso simultaneo. Il servizio è attivo solo su GMail, Calendario, Google Voice, Reader, Google Sites, Google Code e Finanza.

Blogger è di nuovo accessibile. Come recuperare gli articoli perduti.

Sono da poco passate le 18 e 30 del 13 Maggio si può finalmente accedere alla Bacheca di Blogger. Non è stato possibile farlo per più di 24 ore. Non sono state fornite spiegazioni del problema e l'unica informazione in rete era questo thread nel forum di Blogger. Dipendenti di Google hanno fatto sapere agli utenti che erano stati rimossi tutti i post pubblicati dopo le ore 7.37 AM, orario del Pacifico.

Nel momento in cui scrivo questi post non sono stati ancora ripristinati. Se per pubblicare gli articoli usate Windows Live Writer, non ci sono però problemi per il loro recupero. Andate su Apri post recente e cliccate sull'articolo che volete ripristinare

Come dividere in tre parti l'area sotto l'header di Blogger.

Dopo aver visto come dividere l'intestazione dei blog su Blogger in due parti, illustro come personalizzare ulteriormente quella zona del template. Se si va su Design > Elementi pagina si vede un layout che è simile a questo

In genere in questa zona si inserisce un menù orizzontale ma ci potrebbe essere l'esigenza di aggiungere altri widget. L'idea è quella di dividere il layout in tre parti per poter inserire altri oggetti. Potrebbero essere per esempio uno slideshow, il widget di benvenuto e quello dei Post più popolari. Andiamo su Design > Modifica HTML e salviamo il modello completo per un eventuale backup di ripristino. Non espandiamo i modelli widget. Se avete un nuovo modello cercate questo codice

Come visualizzare in Blogger il numero del commento a lato di ciascuno di essi.

Se si ha un blog con molti commenti, può essere utile avere un sistema di numerazione per riferirci a un commento specifico, indicandone appunto il numero d'ordine. Ho riadattato un metodo che avevo già utilizzato per mostrare le icone a lato del commento, optando per la visualizzazione di un semplice numero che forse è anche più elegante di una immagine.

Andate su Design > Modifica HTML e salvate il modello completo per un eventuale backup di ripristino. Espandete i modelli widget e cercate

<b:loop values='data:post.comments' var='comment'>

immediatamente sopra, incollate quest'altra riga

<script type='text/javascript'>var CommentsCounter=0;</script>

Adesso cercate quest'altra riga

<data:commentPostedByMsg/>

Il bottone Google+1 sarà disponibile a breve per tutti i siti.

Il pulsante Mi Piace ha avuto un tale successo che Google ha da poco introdotto qualcosa di simile per il momento solo a livello sperimentale. Google +1 è una funzionalità che per adesso può essere usata solo se si accede alle ricerche dopo aver cliccato su Join this experiment su Google Experimental Labs.

Nella consueta conferenza annuale degli sviluppatori tenutasi a San Francisco, Google ha anche annunciato ufficiosamente che presto il pulsante +1 diventerà simile a quello di Facebook e potrà essere implementato nei vari siti. Secondo dei rumors captati nel Google Team da Mashable il lancio avverrà nelle prossime settimane. I click di gradimento che riceverà un articolo probabilmente avranno anche una certa influenza nell'algoritmo collegato al Panda Update. Secondo Search Engine Land il bottone sarà disponibile in sette diverse forme e misure

Come ricevere email dai lettori del blog tramite un solo click.

In ciascun computer c'è un programma di posta elettronica predefinito. Si possono variare le impostazioni andando su Pannello di controllo > Programmi > Programmi predefiniti; sto parlando di Windows 7 ma il metodo è simile per le atri versioni di Windows e tutti gli altri sistemi operativi. In un commento di dieci minuti fa mi è stato chiesto da Anna se fosse possibile creare un widget che "aprisse Outlook cliccandoci sopra". Questo significa che Anna ha scelto Outlook come programma predefinito per la posta elettronica.

Il semplicissimo widget che vado a illustrare permetterà l'apertura della finestra del vostro programma preferito per le email. Il vantaggio di questo metodo è quello di avere un contato molto diretto e rapidissimo con i lettori, lo svantaggio è quello di ricevere email di spam o da persone che semplicemente sono in vena di scherzi. E' consigliato per i blog che, nella loro grande maggioranza, hanno utenti dotati di buona educazione.

Come dividere l'header di Blogger in due parti.

In alcuni modelli di Blogger, l'Intestazione si visualizza solo nella parte sinistra del layout mentre la parte destra è occupata da annunci pubblicitari, bottoni di navigazione o altri widget. L'operazione da compiere è quella di dividere appunto l'intestazione in due diverse sezioni. In teoria, utilizzando lo stesso procedimento si può suddividere l'header anche in tre parti o anche di più. La procedura è alquanto diversa se si ha un vecchio modello o un nuovo template realizzato con il Designer Modelli.

Dividere l'intestazione in due parti con i nuovi modelli di Blogger

Si va su Design > Modifica HTML e non si espandono i modelli widget. Dopo aver salvato il modello completo per un eventuale backup di ripristino, si cerca il blocco di codice del CSS che determina l'aspetto della intestazione. Nei nuovi modelli siamo facilitati dalla presenza di questo commento

/* Header
----------------------------------------------- */

Cosa è il Panda Update e perché terrorizza gli webmaster di tutto il mondo.

Il Team di Google Search cerca sempre di migliorare la qualità delle ricerche, questo non solo nelle loro dichiarazioni ma anche nei fatti perché continuare a offrire risultati pertinenti con le query immesse è oggettivamente nei loro interessi. In rete sono diversi anni che stanno proliferando siti che non offrono contenuti originali ma che sono strutturati in modo da essere nelle prime posizioni delle ricerche di Google.

Il metodo usato è quello di monitorare le keyword di ricerca e di costruire dei post aventi dei titoli corrispondenti, poco importa poi se l'utente non trova effettivamente le informazioni di cui aveva bisogno. Anzi meglio, così poi clicca sulla pubblicità. Sono le cosiddette Content Farm e proprio per penalizzarle, Google sta modificando il suo algoritmo. Questo aggiornamento è stato appunto chiamato Panda Update o Farmer Panda Update.

Negli Stati Uniti è già stato introdotto il 24 Febbraio 2011 e esteso a tutti i siti di lingua inglese l'11 Aprile 2011. Non è ancora dato sapere quando sarà applicato in Italia. Si tratta comunque di aspettare qualche settimana al massimo. Negli USA l'aggiornamento ha avuto due fasi. C'è chi si è salvato dalla prima ondata ed invece è stato colpito nella seconda. C'è stato anche chi è stato ingiustamente penalizzato durante il primo aggiornamento e quindi riqualificato nella seconda tornata.

Come visualizzare i menù a tendina quando sono coperti da un video di Youtube.

Se nel vostro blog avete un menù a tendina che si apre verticalmente e siete soliti inserire dei video nella parte alta dei post, vi capiterà senz'altro che alcune voci del menù rimangano nascoste sotto al video

Per ovviare a questo fastidioso inconveniente si deve necessariamente acquisire il vecchio codice di Youtube e non quello nuovo basato sull'iFrame. In teoria si potrebbe far diventare trasparente l'iFrame mediante l'attributo allowtransparency="true" e modificare il CSS di body { aggiungendo background:transparent; o background-color:transparent; ma ho verificato che il metodo non funziona. Se qualcuno più bravo di me riesce a trovare un sistema alternativo con il nuovo codice sarei molto lieto che me lo indicasse nei commenti.

Come inserire in Blogger la località da cui si posta.

Dopo due anni e mezzo che questa funzionalità è stata testata su Blogger in Draft ecco che esce finalmente dalla sperimentazione e diventa disponibile per tutti anche dalla normale Bacheca. L'annuncio è stato dato su Blogger Buzz insieme alle notizie sulla soluzione di alcuni bug che avevano afflitto gli utenti e a un miglioramento degli strumenti per l'inserimento di video e immagini.

Per l'inserimento in un post di quella che viene definita Ubicazione (Location in inglese) si apre l'Editor di Blogger e si clicca su Aggiungi Ubicazione

Come inserire un orologio digitale nel blog insieme alla data.

Nel web ci sono molti siti specializzati in orologi da inserire nei blog. Ho già avuto modo di presentarne alcuni che propongono orologi in flash o anche countdown, allarmi e cronometri. Adesso voglio invece illustrare come inserire l'ora digitale in modo assolutamente indipendente da qualsiasi altro sito ma utilizzando solo del codice javascript. Questi orologi possono essere personalizzati come dimensioni, colori e posizione nel layout e sono sincronizzati con l'ora ufficiale europea e quindi anche italiana.

Ho pensato di dare due alternative, la prima prevede l'inserimento dell'orologio in una sidebar o comunque nel layout del blog, con la seconda invece l'orologio sarà fisso nello schermo e rimarrà sempre in primo piano anche quando si scorrerà la pagina.

• Demo dell'orologio digitale nella sidebar -

 

Come modificare la larghezza del blog e delle sidebar con i nuovi modelli di Blogger.

L'avvento del Designer Modelli ha cambiato molti comportamenti tra gli utenti di Blogger che erano ormai consolidati. Una delle cose più interessanti dei template generati mediante il Designer Modelli è quello della possibilità di configurare il Layout e  cambiare le larghezze di Blog e Sidebar. Quando si fa per la prima volta, in fase di progettazione, si va su Design > Design Modelli > Modifica le larghezze

 

Monitorare la velocità di un sito con Google Analytics.

Il Google Analytics Blog ha dato notizia della introduzione della velocità del sito come uno dei parametri che si possono misurare mediante Google Analytics. Questo può però essere fatto solo accedendo alla nuova versione della interfaccia del servizio. Ma illustriamo per gradi come procedere. Per prima cosa dovreste già avere un codice simile al seguente incollato sopra alla riga </head> del vostro modello su Design > Modifica HTML.

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);

(function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Come aggiungere un widget per la Festa della Mamma.

La Festa della Mamma esiste in tutto il mondo ma non c'è una data comune a tutti gli Stati in cui venga celebrato questo evento. In Italia si è scelta la seconda domenica di Maggio, quindi quest'anno si festeggerà l'8 Maggio. In rete esistono anche dei countdown relativi al Mother's Day ma sono evidentemente sfasati rispetto alla data italiana visto che ci sono paesi in cui si festeggia in Marzo, altri in Aprile e altri ancora appunto in Maggio.

Ho trovato però un widget countdown personalizzabile in cui si può inserire la data che può essere utilizzato anche da noi italiani per mostrare il conto alla rovescia della Festa della Mamma

Si digita il testo, si va su Refresh per vedere l'anteprima e si clicca su Copy to Clipboard per acquisire il codice negli appunti. Sarà nostra cura incollarlo su Design > Aggiungi un gadget > HTML/Javascript e posizionarlo a piacere.

Su Facebook si possono taggare gli amici solo con il nome o con il cognome.

Da poche ore è possibile taggare gli amici su Facebook eliminando il cognome e lasciando solo il nome o viceversa. Il link rimarrà comunque attivo. Per farlo bisogna far precedere il nome dal simbolo @ della posta elettronica e delle mention di Twitter. Quando si inizierà a digitare il nome, si visualizzeranno i suggerimenti su amici e pagine fan che hanno quei caratteri

7000 dimostrazioni di Matematica, Fisica e altre Scienze con Wolfram Demonstrations Project.

Il team di Stephen Wolfram continua a aggiungere nuove funzionalità al progetto Mathematica, il più sofisticato software di calcolo che esista sul mercato. Dopo aver creato il motore di ricerca Wolfram Alpha, che consente di effettuare calcoli complessi direttamente dal browser, aprendo la relativa scheda o anche attraverso l'estensione per Chrome, è da poco online Wolfram Demonstrations Project che raccoglie più di 7000 dimostrazioni di Matematica, Fisica, Biologia, Medicina, Economia, Architettura, Musica e Arte.

Tali dimostrazioni sono frutto in gran parte del volenteroso contributo di docenti e semplici appassionati. Ciascuna di essa può essere visualizzata e scaricata. I più esperti potranno fare anche il download del codice sorgente per modificarla.

Menù orizzontale su più livelli da installare nella sidebar di sinistra.

Dopo aver presentato un menù verticale senza javascript, usando lo stesso meccanismo, vado a illustrarne uno orizzontale che forse è anche più interessante. Anche in questo caso si utilizzano i CSS e gli effetti di transizione.

• Demo del menù orizzontale su più livelli -

Il seguente screenshot è esplicativo del suo funzionamento

Menù Verticale per Blogger senza javascript.

Si sa che inserire javascript nel modello implica una diminuzione della velocità di caricamento, parametro che da circa un anno è entrato a far parte del "paniere" di Google per determinare il posizionamento di una pagina. I dati presi in considerazione sono comunque più di 200 e non si sa che peso sia stato dato alla rapidità con cui il sito si carica. Tra poco anche in Italia sarà introdotto il cosiddetto Panda Update e, quando accadrà, l'algoritmo diventerò ancora più complesso con risultanze tutte da verificare.

E' comunque sempre buona norma quella di cercare di mettere nel sito solo gadget utili e evitare quelli troppo pesanti. Vado a illustrare l'inserimento di un menù verticale che fa completamente a meno del javascript e che può essere inserito in una sidebar come menù di supporto a quello principale. Sono stati usati solo i CSS e gli attributi di transizione. Ecco uno screenshot

Google Shopping per acquistare meglio su internet comparando i prezzi.

Da ieri è disponibile anche per l'Italia il nuovo servizio Google Shopping con l'obiettivo dichiarato di avvicinare venditori e compratori sul web. Insieme al nostro Paese è stato attivato anche per Olanda e Spagna. Si tratta in sostanza di un motore di ricerca per avere informazioni più esaurienti sui prodotti, paragonarne i prezzi e avere più dettagli su come scegliere il venditore. Google Blog Italia, nel dare l'annuncio, sottolinea come in Europa quasi il 75% delle persone ha visitato un sito di commercio online contro il 66% dell'anno prima. Il tempo ivi trascorso è stato mediamente di 52 minuti. In Italia siamo al 69,5%, quindi sotto la media ma con un trend positivo.

Google Shopping è anche disponibile su telefonini Android e iPhone. Si può utilizzare accedendo alla homepage

 

Le Domande di Facebook: come farle, come rispondere e come gestirle.

Da un paio di giorni sono disponibili anche in Italia le Domande di Facebook che stanno già ottenendo un certo successo. Non si sa ancora se riusciranno a bissare quello di Yahoo Answer, l'unico vero fiore all'occhiello rimasto a Yahoo insieme a Flickr. Dopo l'accesso alla pagina, si clicca su Vai alle domande, sempre che sotto ci sia la scritta "la funzione Domande è già attiva nel tuo account".

L'applicazione Domande sarà visibile sulla parte sinistra della vostra home in modo da accedere in modo molto semplice

 

Tiny Dropdown per Menu su più livelli con inserimento di testo.

Riprendo la presentazione di menù da installare in blog su Blogger. Tiny Dropdown è stato realizzato da Scriptiny ed ha il pregio di essere personalizzabile come colori, numero di voci principali e secondarie, velocità, opacità e dissolvenza. Ma andiamo per gradi e andate a guardarvi la

• Demo del Menù Tiny Dropdown -

I colori di default sono sul grigio ma come detto si possono personalizzare e renderli compatibili con quelli del nostro sito

 

Static HTML per creare schede personalizzate nella Pagina Fan di Facebook.

Sarete certamente a conoscenza che Facebook ha cambiato diverse cose nel suo personale linguaggio di programmazione. Occorre caricare sul sito Javascript SDK per poi inserire i vari oggetti mediante il linguaggio XFBML. Non voglio dilungarmi su questioni tecniche anche perché non le padroneggio totalmente. Questa cosa ha però provocato dei grossi problemi a applicazioni storiche come Static FBML che adesso non sono più funzionanti. Quella applicazione veniva usata per creare delle pagine web personalizzate da inserire in una Pagina Fan.  

Per fortuna degli sviluppatori giapponesi hanno creato l'applicazione Static HTML che permette di fare tutto quello che faceva Static FBML e anche di più. La prima volta che vi loggherete dovrete dare il consenso all'accesso dei dati su Facebook.

Come inserire codice HTML o Javascript nei commenti di Blogger.

Nei commenti di un blog come questo che si occupa essenzialmente di tutorial per Blogger ci sarebbe spesso l'esigenza da parte dei lettori e anche da parte dell'autore di postare del codice HTML. Se viene incollato così com'è, Blogger o non lo accetta o non lo pubblica proprio. Nel primo caso viene visualizzata una scritta rossa di questo genere

 

Come inserire l'Effetto Zoom nelle immagini di Blogger.

Quando si devono postare in un articolo delle foto molto grandi, è evidente che debbano essere ridimensionate. Questo va però a discapito della corretta visualizzazione dei dettagli. Possiamo collegare l'immagine al suo link originale, per farla aprire in un'altra finestra del browser se ci si clicca sopra, ma questo significa far uscire dal sito il visitatore. Vediamo come sia possibile applicare un Effetto di Zoom molto bello in modo tale da poter ingrandire una determinata porzione della foto. Ho testato l'effetto nei vecchi modelli con successo, mentre con i nuovi template il cursore non sempre è centrato bene dentro l'area da selezionare. Nella pagina dell'autore sono comunque presenti le istruzioni per calibrare al meglio tutte le distanze. Si usa la libreria JQuery che può essere incompatibile con altri script.

L'Effetto Zoom che vado a presentarvi si deve a Ben Nadel e la sua installazione su Blogger non presenta alcuna difficoltà. L'immagine da sottoporre all'effetto può avere qualsiasi dimensione, noi dobbiamo solo scegliere la larghezza di quella che vogliamo mostrare nel post. Ho messo in rete una

• Demo dell'Effetto Zoom per Blogger -