Come mostrare l'ora e la data corrente nel blog.

Ci sono un sacco di siti che offrono dei graziosissimi orologi digitali da inserire nel blog per mostrare l'ora corrente così come ci sono dei calendari altrettanto carini. Certo però che crearsi un calendario e un orologio da soli e personalizzarlo secondo i colori del nostro blog è tutta un'altra cosa. Utilizzando un meccanismo abbastanza simile a quello per mostrare il numero dei commenti e degli articoli pubblicati dal blog vado a presentare uno script che può essere inserito in un elemento pagina del blog o anche in un singolo articolo che mostrerà la data corrente e l'ora comprensiva di secondi di quando è stata caricata la pagina.

Il codice può essere inserito in Modalità HTML in un post o nelle pagine statiche. Se si vuole mettere in una sidebar occorre andare su Design > Aggiungi un gadget > HTML/Javascript e incollarlo in sezioni del sito. Ecco il codice

Come cambiare, sostituire con una immagine o eliminare Posta un commento.

Se in Impostazioni > Commenti > Posizionamento modulo dei commenti avete scelto l'opzione Incorporato sotto il post, i vostri lettori leggeranno l'espressione Posta un commento subito sopra il modulo in cui deve essere digitato. Si può personalizzare questa scritta come si vuole e, volendo si può anche eliminare.

Occorre andare su Design > Modifica HTML e salvare il modello completo. Dopo aver messo la spunta a espandi modelli widget, si cerca la riga

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

La parte evidenziata di rosso è quella che inserisce l'espressione di default preparata da Blogger e che è "Posta un commento". Se la volete modificare, eliminate la parte evidenziata e sostituitela con una a vostra scelta per esempio

<h4 id='comment-post-message'>Lascia un tuo commento</h4>

in questo modo

Come sottolineare i titoli dei post in Blogger.

Un articolo molto breve di risposta a una domanda che ho letto adesso in un commento e che mi chiede come si possa sottolineare il titolo di un articolo in Blogger. Che io sappia ci sono solo due modi per farlo. In entrambi i casi dobbiamo andare su Design > Modifica HTML e cercare la classe di stile che determina l'aspetto dei titoli dell'articolo. Nel modello Simple del Designer Modelli si trova questo blocco di codice

h3.post-title, .comments h4 {  
  font: $(post.title.font); 
  margin: .75em 0 0;
}

Nei modelli più vecchi potrebbe essere simile a questo

.post h3 {
  text-align:justify;
  font-size: 150%;
  font-weight:bold;
 
}

Come inserire una textarea con un'immagine di sfondo.

Mi sono già occupato di come inserire una textarea e una textarea trasparente, adesso vediamo come sia possibile inserire in un elemento pagina, ma anche in un post, una textarea con una immagine di sfondo. Presento due opzioni, la prima utilizzando i fogli di stile e quindi creata modificando il modello, la seconda senza bisogno di intervenire nel template.

Textarea con immagine di sfondo agendo sul modello

Andate su Design > Modifica HTML e cercate la riga </head>. Immediatamente sopra incollate questo codice

<style type='text/css'>
<!--
textarea {
background-image:
url(URL IMMAGINE DI SFONDO);
height: 200px;
width: 300px;
}
-->
</style>

Sostituire Post più recente e Post più vecchio con il Titolo dell'articolo - seconda versione -

Avevo illustrato il procedimento per sostituire a Post più recente e Post più vecchio il titolo dei rispettivi articoli. Ricevo adesso da Giorgiogal una nuova versione del javascript che rende la parte finale della pagina ancora più navigabile. Ecco l'aspetto della parte bassa di tutti i post

Si vedranno i Titoli dei due post adiacenti a quello visualizzato con le scritte Pagina precedente e Pagina successiva, espressioni che comunque potranno essere modificate. Saranno inoltre visibili anche due frecce che all'occorrenza potranno essere sostituite da altre più adatte al layout del vostro blog. Rispetto alla precedente versione è stata introdotta anche un salto di riga per visualizzare i Titoli sopra a Pagina precedente e successiva.

Visualizzare i commenti dell'autore del blog dentro un rettangolo colorato.

Avevo già presentato questa personalizzazione diverso tempo fa, esattamente il 3 Novembre 2008. Da allora sono cambiate moltissime cose in Blogger, anche nella sezione commenti, dove sono comparsi gli avatar dei commentatori, quindi quel tutorial non funziona più neppure con i vecchi modelli. Ne presento quindi un altro che mostri i commenti dell'autore del blog all'interno di un rettangolo colorato che funzionerà anche con nuovi modelli. L'ho testato sul template Simple e sul vecchio modello Tekka. Ritengo che possa funzionare con tutti i template ufficiali di Blogger creati con il Designer Modelli, con tutti gli altri della passata generazione e anche con molti altri personalizzati scaricati da internet.

Si deve andare su Design > Modifica HTML, salvare il modello completo, espandere i modelli widget e cercare queste righe

I nuovi messaggi di Facebook: ecco come funzionano la email, gli allegati e la chat.

Dopo la richiesta di attivazione di questa nuova funzione messaggi è giunto finalmente il giorno in cui mi è stato possibile aggiornare a questa nuova funzionalità. Ecco lo screenshot del messaggio che ho visto non appena entrato in Facebook

Ho cliccato su Scopri le novità e, nella schermata successiva, in Effettua subito l'aggiornamento

Creare dei bottoni per il blog solo con l'HTML.

Quando si vuol creare un pulsante o un bottone con un collegamento a una pagina o a un sito in genere si utilizza lo stesso sistema che si usa per linkare una immagine. Il codice usato sarà simile a questo

<a href="URL_del_Collegamento"><img title="titolo bottone" alt="nome bottone" src="URL_bottone" /></a>

in cui dovranno essere inseriti gli URL del link e quello della immagine. Questo nel caso in cui si usi come bottone una immagine presa dal web o caricata su servizi come Picasa o SkyDrive.

Vediamo come sia possibile esclusivamente attraverso dei tag generare dei bottoni anche piuttosto complessi da inserire nel blog.

Bottone semplice senza collegamento o con collegamento

Un bottone senza collegamento si può ottenere semplicemente andando in Modalità HTML e inserendo un codice come questo

<button> NOME DEL BOTTONE </button>

Sostituire Post più Recente e Post più Vecchio con i Titoli degli articoli in Blogger.

Se aprite un articolo del vostro blog su Blogger e andate nella parte bassa, saranno visibili tre collegamenti rispettivamente al Post più recente, alla Home page e al Post più vecchio. 

Ricordo che ho già presentato delle personalizzazioni per quella zona del template che riguardano la eliminazione della scritta Iscriviti a: Commenti sul post (Atom) e la sostituzione dei tre collegamenti con altrettante icone.

Toonti per creare il nostro social network personale.

Siete rimasti colpiti dal successo di Facebook ma volete qualcosa di più personale che sia veramente vostro? Che c'è di meglio che creare un vostro social network da gestire come privato o da rendere pubblico.

Toonti offre gratuitamente la possibilità di creare dei gruppi in base a delle relazioni sociali. Si inizia andando su Give It a Try con Firefox o Internet Explorer (Chrome e Safari saranno supportati in tempi brevi). Ci si può loggare con le nostre credenziali Facebook oppure creando un nuovo account indicando nome, cognome, password, indirizzo email, sesso, data di nascita e inserendo le due parole del riconoscimento visivo. Se si sceglie il login con Facebook si deve concedere il permesso a Toonti di accedere al nostro Profilo come per qualsiasi altra applicazione. Il gruppo che andremo a creare avrà un nome e un indirizzo web

Estensione di Chrome per accedere a DropBox direttamente dal browser.

Ho già dedicato diversi post al servizio di hosting DropBox perché è in grado di risolvere un sacco di problemi. Faccio un breve elenco assolutamente limitativo delle cose che si possono fare con DropBox

1. Si possono condividere file tra più computer e si possono sincronizzare
2. E' possibile ottenere il link diretto ai file inseriti nella cartella Public
3. Si possono caricare file musicali
4. E' possibile caricare file mu3 per mettere una radio nel blog
5. Si possono modificare i file direttamente online
6. Con Send To DropBox si possono caricare file per email

Chi non è ancora registrato a questo servizio può farlo attraverso questo link. Per rendere le cose ancora più semplici e rapide, coloro che usano Chrome, possono installare l'estensione di DropBox che consente di accedere al nostro account direttamente dal browser di Google

Come visualizzare Aggiungi un gadget in nuove posizioni del modello.

Se si ha un blog su Blogger e si va su Design > Elementi pagina si vedono uno o più riquadri che indicano la possibilità di aggiungere un widget. In genere non è particolarmente importante avere molti di questi riquadri perché il gadget potrà essere spostato con il mouse in qualunque posizione si desideri. Questo vale per modelli con pochi widget e che siano quelli ufficiali di Blogger.

Non sempre quindi è così e ci sono template che non consentono per esempio di spostare un gadget sopra all'intestazione del blog. Un tale widget potrebbe essere utile per installare il banner orizzontale di Liquida o di Virgilio. Vediamo come risolvere questo piccolo problema. Ecco come è l'aspetto degli elementi pagina per questo blog

Come inserire uno sfondo o una immagine di background in un widget.

I gadget o widget che dir si voglia sono univocamente determinati dal loro nome o comunque da un numero, se non abbiamo inserito alcun titolo. Ciascuno di essi inizierà con il codice

<b:widget id=...

e terminerà con la riga

</b:widget>

Per modificare lo sfondo di un widget dobbiamo innanzitutto scoprirne l'ID. Andiamo quindi in Design > Modifica HTML e espandiamo i modelli widget. Per rendere le cose più chiare vediamo come inserire uno sfondo al widget degli Ultimi Commenti. Cliccando su F3 o su Ctrl+F e digitando il nome del widget si trova subito la riga corrispondente. In questo caso

Come inserire il widget dei Collaboratori in un blog con più autori.

Uno dei widget di Blogger più usati è senza dubbio quello del Profilo che inserisce un collegamento ai dati biografici che abbiamo deciso di condividere all'atto della creazione dell'account su Blogger. Credo sia noto a tutti che è possibile invitare altre persone a scrivere sul blog. Si può fare dandogli anche il privilegio di amministratore o permettendoli soltanto di pubblicare degli articoli.

Per creare un team di persone che lavorano al nostro blog bisogna andare su Impostazioni > Autorizzazioni > Aggiungi autori e digitare uno o più indirizzi email separati da virgole. Le persone che sono state invitate, se seguiranno il link che gli sarà recapitato via email, vedranno nella Bacheca il nuovo blog di cui sono diventati collaboratori. Nel caso in cui non siano stati concessi i privilegi di amministratore, non saranno visibile la sezione Design che rimane prerogativa del proprietario del blog. In un post che ho scritto qualche tempo fa si possono avere informazioni più dettagliate su come concedere l'autorizzazione a pubblicare post.

Paper.li per creare dei giornali online personalizzati con Facebook e Twitter.

Paper.li è un servizio sicuramente divertente, non so quanto possa essere utile ma nella vita contano anche le piccole cose. Il concetto è quello di creare un giornale online con pubblicazioni periodiche che raccolgono tutto quello che è stato messo in rete da una comunità di persone. Questa può essere costituita da coloro che seguiamo su Twitter oppure delle ricerche pubbliche di Facebook. Si riceve via email la notifica quando una nuova edizione del giornale viene pubblicata. Si può sottoscrivere il quotidiano pubblicato da altri così come può essere fatto con il nostro Daily personale.

Per creare un giornale andate su Create a Paper in alto a destra e loggatevi per esempio con il vostro account Twitter. Ci sono a disposizione un numero di dieci giornali gratuiti che possono essere pubblicati

Come inserire una bozza nel blog con Windows Live Writer.

Già nella precedente versione di Windows Live Writer era possibile pubblicare un post come bozza per poi finire di editarlo con l'Editor di Blogger o di Wordpress. Con Windows Live Writer 2011 questa opzione è stata ulteriormente sviluppata. Ma quali sono le ragioni per preferire questo modo di procedere a una pubblicazione pura e semplice? Vediamone alcune

1. Se si utilizza Blogger, pubblicando il post direttamente con WLW, per una ragione che è ignota, non viene visualizzata la prima immagine dell'articolo come miniatura sia nei BlogRoll che nella Bacheca di Blogger nella sezione dei blog che si seguono. Postando l'immagine con l'editor di Blogger, dopo aver creato tutto il post con WLW, si riesce a evitare questo inconveniente 
2. Nel caso si voglia pubblicare un articolo in una certa data a un preciso orario, è opportuno farlo attraverso gli editor ufficiali. Infatti  WLW lavora offline e pubblicherebbe il post programmato solo se il computer fosse accesso e connesso a internet. Inoltre dovrebbe essere anche aperto Windows Live Writer. Attraverso la programmazione nei server di Blogger e Wordpress invece non ci dobbiamo più curare di nulla
3. L'URL dell'articolo viene creato automaticamente sia con Blogger che con Wordpress utilizzando il suo Titolo. In Wordpress è possibile ottimizzare l'URL scegliendo solo le parole chiave più pertinenti

Con il programma più recente, ma anche con quello vecchio, per inserire un articolo come bozza sul blog si va su Salva

Google porta a 77 i font (caratteri) disponibili per Blogger.

Per caratterizzare meglio il blog, una opzione curiosa e divertente era quella di usare caratteri originali che potevano anche essere scaricati per poi essere installati nel computer e usati tramite Windows Live Writer. Alla fine del 2010, il Team di Blogger introdusse diversi nuovi font per gli utenti che potevano così scegliere tra 32 possibili famiglie.

E' notizia di poco fa, e che non è stata ancora annunciata ufficialmente dai blog ufficiali di Google e Blogger, che il numero di font disponibili è stato più che raddoppiato raggiungendo la cifra di 77, 35 caratteri in più di prima. 

Per selezionare questi nuovi font e applicarli ai nostri post, bisogna utilizzare il Designer Modelli e andare su Bacheca > Design > Designer Modelli > Avanzato > Testo pagina

 

Nel menù verticale in Carattere si può scegliere quello che ci piace di più. Per configurare il blog con questo nuovo font occorre selezionarlo, visionare l'anteprima del blog nella parte bassa della pagina e cliccare su Applica al blog in alto a destra.

I nomi delle famiglie dei font a disposizione possono essere consultati nella pagina Web Fonts on Blogger e per verificarne l'aspetto si può accedere alla Google Fonts Directory. 

Aggiornamento: La notizia è stata riportata anche da Google Buzz che è l'organo ufficiale di Blogger. 

Pixlr per modificare foto e immagini online.

Se non avete nel computer costosi programmi di grafica ma ogni tanto vi capita di dover fare delle modifiche a delle immagini, allora vi consiglio di tenere nella Barra dei Segnalibri l'eccellente editor di immagini Pixlr. Esiste anche l'interfaccia in italiano accessibile andando su Language ma si può accedervi direttamente cliccando su Pixlr in italiano.

All'apertura vengono subito mostrate tutte le opzioni di utilizzo che sono

1. Crea una nuova immagine
2. Apri un'immagine dal computer
3. Apri un'immagine da un URL
4. Apri un immagine da una galleria (in questo caso occorre loggarci con le nostre credenziali)

E' possibile usare questo strumento senza registrazione o creando un account. In questo caso le nostre realizzazioni potranno essere salvate online su Pixlr. L'interfaccia è decisamente professionale

Menu verticale grigio da inserire in una sidebar di Blogger.

Avere un menù molto ricco risponde alle esigenze di migliorare la navigabilità del sito ma anche a precisi vantaggi in ambito SEO. E' dimostrato che linkare i propri articoli in homepage ne migliora la SERP nei motori di ricerca. Con queste premesse è quindi auspicabile cercare di avere in Home più collegamenti possibili alle pagine interne del sito o comunque a quelle che riteniamo più rilevanti.

Un buon menù orizzontale potrebbe non essere essere sufficiente a contenere tutte le voci che ci interessano. In alcuni modelli può risultare utile aggiungere anche un menù verticale da inserire in una sidebar per tutte quelle voci che non siamo riusciti a inserire in quello principale. Quello che vado a presentarvi è di colore grigio ma, se avete anche solo una modesta pratica di programmi di grafica, può essere modificato in qualsiasi colore. Passo subito a mostrarne l'aspetto

 

Inserire il widget di Youtube dei nostri video o di quelli di altri canali.

Youtube sta cambiando diverse cose a livello di grafica che si riflettono anche sulle API offerte agli sviluppatori. Aveva smesso di funzionare il widget presentato dal loro stesso blog che proponeva un banner per invitare i visitatori a sottoscrivere il canale di Youtube. Questo gadget è fortunatamente ritornato attivo da poche ore.

Attraverso gli strumenti di Youtube si può inserire anche un interessante widget che mostra le miniature dei video più interessanti di un canale o di più canali. Per installarlo si deve accedere alla pagina del Progetto Put YouTube Videos in Your Web Page.

Si possono effettuare le seguenti personalizzazioni

1. Scegliere l'orientazione orizzontale o verticale
2. Selezionare uno o più feed tra: Video Più Visti, Video Più Votati e Video Più Recenti 
3. Inserire il nome di uno o più canali separati da virgole
4. Specificare eventualmente delle keyword di ricerca
5. Cliccare su Add Code to your site
6. Il codice ottenuto va incollato in modalità HTML. Se si ha un blog su Blogger, si va su Design > Aggiungi un gadget > HTML/Javascript, si incolla in Sezioni del sito e si posiziona con il mouse.

Mostrare solo il titolo del post nelle etichette e nell'archivio - seconda versione -

In un commento mi è stato fatto notare come la formattazione del titolo muti se si decide di mostrare solo questo elemento nelle pagine di archivio e in quelle delle etichette. Vi presento quindi un nuovo codice per mantenere il titolo con la stessa forma. Ricordo che questa personalizzazione serve per visualizzare solo i titoli nella pagine del tipo

http://nomeblog.blogspot.com/search/label/etichetta
http://nomeblog.blogspot.com/2011_01_01_archive.html

in modo da renderne più veloce il caricamento. Si va su Design > Modifica HTML e si salva il modello completo. Si espandono i modelli widget e si cerca la riga  <b:include data='post' name='post'/>. Si cancella e si sostituisce con questo codice

<b:if cond='data:blog.homepageUrl  != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Si salva il modello. La classe richiamata è quella h3 che in genere è quella del titolo, la h2 è invece quella della data. Opzionalmente si può inserire anche il tag <br/> che rappresenta un salto di riga, nel caso in cui i titoli siano troppo attaccati alla data. Per la maggior parte dei modelli credo però che sia inutile e che quindi possa essere tralasciato. Ecco una demo online senza tag <br/>.

Aggiornamento: Visto che con la precedente versione non si vedevano i contenuti nelle pagine statiche ma solo il titolo, ho inserito anche questa condizione nel codice. Si tratta precisamente della terza riga. Riepilogando ecco cosa succederà con questa personalizzazione

1. Saranno visualizzati gli articoli, la homepage e le pagine statiche esattamente come in precedenza
2. Nelle pagine di archivio e delle etichette si vedrà solo il titolo

Come mostrare un widget negli articoli e in Homepage ma non nelle pagine di archivio, in quelle delle etichette e nelle pagine statiche.

Un paio di giorni fa mi è stata fatta in un commento una domanda interessante anche se adesso non ricordo bene da chi e in quale post. Mi si chiedeva se esisteva un modo per mostrare un widget negli articoli e in homepage ma non negli altri elementi cioè le pagine statiche, le pagine delle etichette e quelle di archivio.

I lettori più affezionati di questo blog forse ricorderanno un mio post in cui elencavo tutte le possibili condizioni per mostrare o non mostrare un widget in una pagina. Il metodo consiste nell'inserire una riga prima del codice che indichi la condizione prescelta e la riga </b:if> alla sua fine. Ci sono condizioni per tutte le casistiche ma si tratta sempre di situazioni singole. Nel senso che si può decidere di mostrare un widget solo nei post o di non mostrarlo nelle pagine statiche, di visualizzare un banner solo nelle pagine di archivio o di non vederlo in Homepage. Si possono creare delle condizioni anche più complesse aggiungendo due o più righe di codice. Per esempio questo codice

Send To DropBox per caricare file su DropBox allegandoli a una email.

Tra i servizi di hosting online ha preso rapidamente piede DropBox perché consente di sincronizzare le nostre cartelle e e i nostri file attraverso qualsiasi computer ci si colleghi. E' particolarmente utile se si usa un desktop, un portatile e magari anche uno smartphone. Se non siete ancora iscritti a DropBox vi consiglio di farlo attraverso questo modulo.

E' interessante anche perché, nella cartella Public, possono essere inseriti file da cui ottenere il link diretto per poi poterli postare per esempio in articoli o modelli. Ricordo come attraverso DropBox si possa incorporare una radio nel sito e come si possa inserire una musica di sottofondo o un player audio.

Nel caso in cui fossimo impossibilitati ad accedere al nostro account DropBox per varie ragioni quali quella usare un computer pubblico, vediamo come sia possibile caricare sul nostro account DropBox dei file allegandoli a una email. Occorre quindi solo il requisito minimo di poter inviare una email con allegati per caricare all'istante file sul nostro account.

Come mostrare solo il titolo dei post nelle pagine delle etichette e dell'archivio.

In Blogger ci sono diversi tipi di pagine: la homepage, il singolo post, le pagine statiche, le pagine delle etichette e le pagine di archivio. Alcune di queste pagine non sono altro che una raccolta di articoli. Le pagine di etichette sono l'insieme dei post che hanno quella determinata tag mentre le pagine di archivio sono tutti i post che sono stati pubblicati in un determinato mese.

Ho pubblicato una guida su come mostrare o nascondere i widget a seconda del tipo di pagina che poi ho anche aggiornato più di recente. Le pagine delle etichette e di archivio cioè rispettivamente del tipo

http://nomeblog.blogspot.com/search/label/etichetta
http://nomeblog.blogspot.com/2011_01_01_archive.html

possono contenere anche decine di post, se siete molto prolifici nella pubblicazione. Può quindi essere utile mostrare solo i titoli di ciascun articolo, limitatamente però a queste sole pagine e lasciando la visione immutata nella homepage sia se usiate o meno il Read More.

Come inserire esponenti (apici) e pedici nel testo di un articolo.

Gli apici e i pedici possono essere utili per blog che si occupano di scienza ma anche in tutti quei casi in cui sia necessario inserire del testo con dei livelli superiori o inferiori. Ecco per esempio una semplice formula chimica realizzata interamente con i bottoni presenti su Windows Live Writer 

Ca(OH)₂ + 2HNO₃ → Ca(N0₃)₂ + 2H₂O

Per editarla bisogna scrivere la formula con tutti i caratteri delle stesse dimensioni, quindi selezionare quelli che debbono andare a un livello inferiore e cliccare sul bottone del pedice

Allo stesso modo si possono scrivere per esempio delle potenze utilizzando la funzione apice. Es: [(1 + 1/n)ⁿ]. Se si a che fare con le componenti di un vettore, si può utilizzare lo stesso metodo che però non è più sufficiente per rappresentare oggetti più complessi come i tensori misti. In questo caso bisognerà usare uno strumento tipo Equation Editor o i tool di Google Documenti. Sarà però molto difficile importare il testo e sarà necessario salvare l'oggetto come fosse una immagine per postarla nell'articolo come tale.

Se non si ha WLW e vogliamo inserire del testo su più livelli, si può sempre usare il nostro normale Editor di Blogger insieme ai tag <sub> e <sup>. Ecco due esempi che possono chiarire il loro funzionamento

Testo normale ^apice     produce questo risultato                               Testo normale ^apice mentre
Testo normale _pedice viene visualizzato nei browser in questo modo    Testo normale _pedice
Tutto qui!

Appendice: Ricordo che il simbolo della freccia a destra può essere inserito andando in modalità HTML e incollando questo codice &#8594; (→). Se siete interessati a come inserire nei vostri articoli altri simboli date uno sguardo ai Simboli dell'HTML.

Aggiornamento: WLW non è più disponibile ma si può usare Open Live Writer.

Come inserire il widget di Alexa per mostrare Rank e numero di link.

Alexa è una società che si occupa della valutazione dei siti web ed è molto usata dai professionisti per avere informazioni dettagliate su un determinato blog. E' interessante anche per gli utenti meno professionali, visto che si possono conoscere per esempio quali sono i siti più visti in Italia e nel mondo oppure per sapere che posizione occupa il nostro blog a livello mondiale mediante quello che si chiama Alexa Rank. Si può desumere la posizione di un sito anche a livello di singola nazione. I dati per approntare una simile lista vengono presi considerando il traffico che genera il sito e i suoi backlink. Sarebbe meglio dire il numero dei visitatori e i backlink che risultano ad Alexa perché evidentemente non possono essere numeri così precisi come quelli di Google Analytics.

E' comunque un tool molto interessante anche per i blogger perché, monitorando costantemente il nostro Alexa Rank, possiamo vedere se diminuisce, migliorando la nostra posizione, o aumenta, peggiorandola. E' una conferma o meno che stiamo facendo un buon lavoro e consiglio vivamente di utilizzarlo e di monitorarlo giornalmente magari con l'estensione per Chrome SitezMeter.

Effetto immagini animate da inserire in un blog.

Illustrerò questo effetto per un blog su Blogger ma il codice potrà essere utilizzato anche su altre piattaforme visto che si basa su una libreria JQuery supportata da tutti i browser. Il concetto è quello di mostrare una immagine sotto a un'altra che appaia tramite scorrimento della prima quando ci si passa sopra con il mouse. Prima di procedere con il procedimento di installazione, vi invito a visualizzare l'effetto che ho creato in un post di prova

• Demo Effetto Immagini Animate Sovrapposte -

Per ottenerlo occorre andare su Design > Modifica HTML e salvare il modello completo. Cercare la riga </head> e, immediatamente sopra incollare questo codice

Jing e FreeSWFConverter per registrare lo schermo e creare dei video tutorial.

Il miglio tool per la registrazione dello schermo è senza dubbio Camtasia che è della stessa azienda, la TechSmith, che produce Snagit. Un'alternativa gratuita per coloro che volessero realizzare dei tutorial anche con l'ausilio di audio è il programma gratuito Jing. Ho già parlato di questo tool in un altro articolo dove potete trovare le istruzioni per l'installazione. Ricordo il link di download

       Scarica Jing -

e che occorre avere nel computer Microsoft .NET Framework 3.5 SP1 o superiore se si ha Windows XP/Vista/Seven. E' possibile anche installarlo su Mac dove è richiesto QuickTime. Sono raccomandati almeno 2GB di RAM. All'atto dell'apertura del programma si vedrà una icona nella parte alta dello schermo con le tre opzioni di Capture, History e More per accedere alla versione a pagamento. Se si clicca su Capture si potrà configurare con il mouse il rettangolo di cattura dello schermo. Per uno screenshot si cliccherà nella prima icona mentre per registrare un video sulla seconda

Come inserire il Player Audio di Yahoo per riprodurre brani musicali.

Se si ha un blog musicale o che comunque tratta temi dedicati alla musica, potrebbe essere interessante far ascoltare dei brani direttamente nel proprio sito. Ho già trattato come inserire una musica di sottofondo e una emissione di una radio, con questo post voglio presentare il Player Audio di Yahoo che aggiunge automaticamente una icona a ciascuna fonte audio presente nel blog.

Se si posta, in un articolo o in un widget della sidebar, un collegamento a un file MP3, si vedrà sulla sua sinistra una piccola icona Play che permetterà di riprodurre il brano. Per questa personalizzazione si usa uno script semplicissimo

<script src='http://mediaplayer.yahoo.com/js' type='text/javascript'/>

che dovrà essere incollato in Design > Modifica HTML immediatamente sopra alla riga </head>. Questo script funziona con tutti i browser e può essere inserito su blog pubblicati con qualsiasi piattaforma. Dopo aver salvato il modello, qualunque link audio sarà dotato in automatico di player. Si visualizzerà anche in basso a sinistra in forma più estesa per maggiori personalizzazioni.

Groupalia per CityDeal a prezzi scontatissimi come Groupon.

L'interesse di Google per Groupon ha posto in primo piano i siti che offrono giornalmente a prezzi ribassati beni e servizi in forma localizzata. E' notizia di pochi giorni fa che la valutazione di Groupon sia lievitata a 15 miliardi di dollari o più. Google ne aveva offerti 6 miliardi poche settimane prima. Questo settore è forse il più interessante per il business online. Su Facebook e sugli altri social si fanno molte chiacchere ma su questi portali, più che discorsi girano soldi .

Se si va su Google Insight for Search e si effettua una analisi delle parole chiave associate a Groupon, si vede che tra le ricerche emergenti ci sono altri siti simili. Quello attualmente in pole position è Groupalia che opera, oltre che in Italia, anche in Argentina, Messico, Cile, Spagna e Brasile. Il suo funzionamento è simile a quello di Groupon. Si può anche accedere alla Homepage di Groupalia in cui vengono illustrate le caratteristiche del sito in italiano, spagnolo e portoghese. Gli sconti arrivano fino al 90% con questo meccanismo

Mathematics 4.0 della Microsoft è uno strumento gratuito per i matematici e per tutti gli appassionati di scienza.

Bisogna riconoscere che la Microsoft ha sempre avuto un occhio di riguardo per i tool matematici. L'Equation Editor di Word è quanto di meglio esista in circolazione per editare documenti pieni di formule o comunque di simboli scientifici. E' stato anche messo a disposizione un Add-in per Word e OneNote che consente di effettuare calcoli matematici senza lasciare i rispettivi programmi. Ricordo anche l'eccellente estensione per Word 2007 e 2010 per la chimica che consente di inserire nei documenti anche formule di struttura estremamente complesse.

E' notizia di poche ore fa il rilascio di un nuovo interessantissimo tool che segue questa falsariga. Contrariamente alle estensioni precedenti, che avevano bisogno dei programmi di Office per funzionare, questo è invece autosufficiente e totalmente gratuito.

Microsoft Mathematics 4.0 è disponibile per sistemi operativi a 32 e 64 bit. Dalla stessa pagina si può scaricare anche il piccolo file Readme per le istruzioni e i problemi noti. Funziona con Windows 7, Windows Vista e anche con Windows XP ma solo con il Server Pack 3. Si raccomanda anche DirectX che viene proposta durante l'installazione del prodotto.

Come sostituire in Blogger Post più recente, Home e Post più vecchio con tre icone.

Se si apre un post di Blogger che non sia l'ultimo pubblicato, in fondo alla pagina, dopo tutta la sezione dei commenti, sono visualizzati tre link: Post più recente, Home page e Post più vecchio. Il loro significato è ovvio così come è ovvia la destinazione di ciascun collegamento. Per rendere più carina e usabile la parte finale dei post, si possono introdurre le pagine di navigazione. 

Questa personalizzazione con i nuovi modelli non sempre riesce. Vediamo come sia possibile sostituire questi anonimi link con tre immagini per rendere il nostro blog più originale. Per prima cosa si dovrebbero trovare delle icone che fanno al caso nostro. Ci sono un sacco di siti in cui cercarle: Iconspedia, Iconza e IconFinder. Quelle che ho utilizzato come prova per realizzare questo post le ho trovate su IconFinder. 

L'obiettivo è sostituire queste tre icone a questi link. Il consiglio è di provare questa personalizzazione con molta cautela e di farlo solo dopo che si è salvato e inserito in una cartella a futura memoria il modello iniziale, specie se si ha un template realizzato con il Designer Modelli.

Come mostrare la data in tutti i post di Blogger.

Se siete soliti pubblicare più di un articolo al giorno, con la piattaforma Blogger, vi sarete certamente accorti che la data è presente solo in quello più recente. Quando si apre la homepage vediamo quindi una cosa simile a questa

Questa impostazione di default è presente sia nei vecchi template che in quelli nuovi creati con il Designer Modelli. Coloro che volessero visualizzarla sempre e comunque possono operare queste semplici modifiche al codice.

Come inserire una radio con un player musicale in un blog di qualsiasi piattaforma.

Dopo aver presentato un metodo per inserire una musica di sottofondo e aver presentato il player My Flash Fetish vi illustro come inserire una sorgente radio in un blog di qualsiasi piattaforma. Ci si basa sul sito inglese Internet Radio che offre un servizio particolare che forse merita di essere spiegato, sia pure brevemente. Nei suoi server sono presenti delle emissioni di playlist musicali suddivise in generi musicali. L'utente clicca sull'icona del suo player preferito per scaricare un piccolo file che può essere aperto facendo doppio click.

Le radio sono ordinate in ragione del numero di persone che stanno ascoltandole in quel momento. E' visibile anche il dato riguardante la velocità di connessione e quindi la qualità della emissione in numero di Kilobyte per secondo. I player che possono essere usati per ascoltare la musica sono tra gli altri Flash, Windows Media Player e Real Player.

Come importare i feed del blog nella Pagina Fan con l'applicazione Note.

Ci sono molti modi per importare i feed di un blog sul Profilo o anche solo in una pagina fan di Facebook. Passo a illustrare una modalità che dal punto di vista dei numerosissimi utenti di Facebook è certamente la migliore, visto che si possono importare tutti gli articoli per intero. Ovviamente in questo caso occorre aver optato per l'esportazione completa dei feed e non fino alla stecca da biliardo.

Ecco nel dettaglio come configurare l'importazione attraverso l'applicazione Note. Si accede alla sezione Pagine di cui sei amministratore. Si clicca su Modifica pagina sotto al nome della pagina in cui vuoi importare i feed. Si seleziona Applicazioni > Note > Vai all'applicazione

Come modificare le impostazioni del Profilo su Blogger.

Se si accede nella Bacheca di Blogger, sotto alla foto del Profilo ci sono quattro collegamenti che aiutano a gestire meglio il nostro account. Si tratta di

1. Visualizza profilo
2. Modifica profilo
3. Modifica foto
4. Modifica notifiche

Modifica foto e Visualizza profilo sono strumenti facilmente intuitivi. In Modifica Profilo ci sono invece delle funzionalità che non tutti conoscono. Mi riferisco alla prima parte della pagina che formano la sezione Privacy. Il resto della pagina serve per inserire i nostri dati anagrafici e biografici che possiamo decidere o meno di condividere.

Come eliminare Iscriviti a commenti sul post (Atom) in Blogger.

In tutti i blog su Blogger, nella parte finale dei post, alla fine dei commenti è presente questo link: "Iscriviti a: Commenti sul post(Atom)". Alcuni giudicano questo collegamento antiestetico e poco utile

Il link serve per iscriversi ai commenti a quel determinato articolo. Vediamo come fare per eliminarlo. Nel caso dei vecchi modelli dobbiamo andare su Design > Modifica  HTML e cercare la seguente riga di codice
.feed-links {
Basterà aggiungere un'altra riga
display: none;
prima della chiusura del foglio di stile. Come mostrato nel seguente screenshot

Le altre righe possono essere diverse da modello a modello. Dopo aver salvato il template, la scritta non sarà più visibile. Per i nuovi modelli la cosa è invece più complicata e non sono riuscito a trovare un modo efficace per poter togliere il link. Se qualcuno più bravo di me ci riesce, lo prego di farlo presente nei commenti.
Alternativamente si può andare su Design > Design Modelli > Avanzato, incollare il codice
.feed-links {
display: none;
}
quindi andare su Applica al modello in alto a destra. Detto codice si può anche incollare su Design > Modifica HTML sopra alla riga
]]></b:skin>

Screen Capture (by Google): estensione di Chrome per screenshot.

Se siete blogger che si occupano di informatica o comunque di recensioni, siete probabilmente soliti accompagnare i vostri articoli con delle immagini prese attraverso degli screenshot. A quei pochissimi che non lo sanno ricordo che per screenshot si intende una foto istantanea fatta a tutto lo schermo o a una sua parte.  Il miglior programma per questo tipo di operazione è senza dubbio Snagit, che però ha il difetto di essere a pagamento. Si può però ancora scaricare la vecchia versione Snagit 7.2.5 gratuitamente.

Google deve dare grande importanza agli screenshot perché, nel questionario da compilare per ricevere il Cr-48, una domanda era proprio riferita all'uso di Snagit. E' stato proprio il team di Google che ha sviluppato una estensione per il browser della casa che permette di fare screenshot e di elaborarli con aggiunta di testo e elementi grafici.

Screen Capture (by Google) è una estensione di Chrome che credo prenderà rapidamente campo e invoglierà sempre più webmaster a utilizzare questo browser. E' già arrivata a più di 100.000 download in poco più di due mesi di vita. Dopo l'installazione, comparirà nella barra di Chrome una icona che permetterà di catturare lo schermo

Menù orizzontale con casella di ricerca per Blogger.

Questo menù ha la particolarità di avere, oltre alle voci, anche una sezione dedicata alla ricerca di articoli interni al blog inserendo delle opportune keyword. Ho pubblicato una demo nel web e potete visualizzarlo direttamente

• Demo del menù orizzontale con ricerca -

L'aspetto è visibile anche in questo screenshot. Non ho inserito collegamenti attivi ma il suo funzionamento è intuibile

Il colore di base è il grigio che diventa azzurro quando si punta un elemento con il mouse. I colori sono dati da una immagine quindi non possono essere cambiati senza modificare quest'ultima. Cosa comunque fattibilissima. Per l'installazione andate su Design > Modifica HTML e cercate la riga </head>. Immediatamente sopra incollate questo codice

Come inserire immagini fisse o fluttuanti in uno dei quattro angoli del blog su Blogger.

Inserire immagini fisse o statiche significa che devono rimanere nella stessa posizione quando si scrolla la pagina. Si possono inserire in qualsiasi punto del blog modificando i parametri e possono essere messe senza collegamenti o con un link a una determinata pagina. Potrebbe essere utile inserire per esempio una icona di Facebook e una di Twitter con i relativi collegamenti all'account o alla pagina fan. Si può pensare anche di mettere una bella icona dei feed con il collegamento all'URL che abbiamo avuto da FeedBurner.

Per i tag si deve utilizzare la terminologia inglese. Si tratta di espressioni conosciutissime ma ricordo che top e bottom sono rispettivamente alto e basso e left e right rispettivamente sinistra e destra. Per inserire una immagine con un collegamento a una pagina dobbiamo utilizzare questo codice

 <a href="URL DEL LINK"><img style="border:none;position:fixed;top:10px; left:10px;" title="Titolo" alt="Nome Immagine" src="URL DELL'IMMAGINE"/></a>

Come inserire un player audio in un post o in un widget di Blogger.

Ho già trattato come inserire una musica di sottofondo nel blog che si basava su MyFlashFetish. Vediamo adesso come adattare un plugin di Wordpress per la creazione di un player audio anche nella piattaforma Blogger. Il progetto si trova su Google Code e si chiama SWFObject 2.0. Questo script può rilevare i plugin Flash in tutti i browser. Se volete saperne di più leggetevi questa ampia documentazione in italiano.

Si inizia trovando il link diretto di canzoni o file audio sul web. Può essere fatto attraverso dei motori di ricerca per MP3 oppure caricando un nostro pezzo su un servizio di hosting che supporta questo formato. Vi consiglio di usare DropBox, nel caso non siate ancora registrati potete farlo attraverso questo modulo. Ho anche trattato l'argomento specifico di come caricare file MP3 su DropBox e come ottenerne il link diretto. Ricordo che, per questioni di copyright, potete hostare solo canzoni senza diritti o licenze. Ci sono siti che offrono musica in cambio del solo link di attribuzione.

Un bottone per invitare i lettori a scegliere il nostro blog come pagina iniziale.

Navigando nel web avrete certo visto che in molti siti importanti ci sono dei bottoni che permettono ai navigatori di selezionarli come pagina iniziale del browser. Si può utilizzare una icona, una immagine, una scritta o anche un bottone. Ecco i codici relativi:

Codice per icona o immagine

<a onclick="Url= 'URL DEL BLOG'; this.style.behavior='url(#default#homepage)';this.setHomePage(Url);" href="#"><img src="URL DELL'IMMAGINE" title='SCRITTA VISUALIZZATA'/></a>

Ecco un esempio di codice

<a onclick="Url= 'http://www.ideepercomputeredinternet.com/'; this.style.behavior='url(#default#homepage)';this.setHomePage(Url);" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQQ2yQCz9XpX7znvW3NsPeYaF89WQt3un8PPhaK0uGLgvTwj3x5v6HeVrEynvP_70cMHMZcjzrBdBMD0bLLOXrQpvD_2dLs9ZsakDXESoVnSIPwkZhb0apluUQ30VXTCAQNiTyN6vLqCk/" title='FAI DI IDEE PER COMPUTER ED INTERNET LA TUA PAGINA INIZIALE'/></a>

Mostrare una immagine che indica lo stato di caricamento di una pagina del blog.

Ci sono blog che impiegano molto tempo a caricarsi perché sono pieni di immagini pesanti e di widget. In questo caso può essere carino inserire una immagine che mostra al navigatore lo stato di caricamento della pagina che è stata aperta. In rete ci sono almeno un paio di siti che offrono gratuitamente delle immagini a questo scopo.

Ajaxload.info consente di selezionare l'immagine animata che più ci piace da un menù verticale

Si possono selezionare anche il colore di sfondo e quello in primo piano (background e foreground). Si clicca su Generate It per creare l'immagine personalizzata quindi su Download It per scaricarla.

Come inserire uno slideshow di foto con link a articoli o blog.

Se avete un blog su piattaforma Blogger e siete molto attenti alla grafica, vi consiglio il widget dello Slideshow con miniature degli Ultimi Post che è uno dei più belli mai realizzati per Blogger. Vediamo come sia possibile realizzare uno slideshow corredato da miniature degli articoli che riteniamo più interessanti per proporli in un modo accattivante ai visitatori del nostro blog.

Per la realizzazione si usa lo stesso codice impiegato per la scritta scorrevole che è stata ripresa su molti siti. Il nostro obbiettivo è quello di sostituire il testo con delle miniature di immagini. Sarà anche possibile personalizzare il bordo e perfino il background del widget oltre alla velocità di scorrimento. Passo subito a presentare il codice, successivamente parlerò delle possibili personalizzazioni

Stili dei bordi con HTML e CSS: solid, double, dashed, ecc

Il bordo è una caratteristica presente in molti oggetti presenti nei post. Basta pensare alle immagini e alle tabelle ma l'attributo "border" è massicciamente presente anche nel codice dei template per specificare lo stile di widget, sidebar, linee, post, header e chi ne ha più ne metta. Insieme a questo tag vengono associati anche il colore che dovrà assumere e la sua forma.

I colori si sa che sono determinati dal codice HEX o RGB e si tratta di sei cifre esadecimali (HEX) o di una terna di numeri da 0 a 255 (RGB). La forma del bordo è invece data da tutta una serie di attributi che vi voglio presentare in forma grafica. Per inserire gli attributi di un bordo in una pagina HTML dobbiamo usare il tag style="border: groove #003366; 4px;"

Windows Live Mail 2011 è il miglior client offline gratuito di posta elettronica.

Nella celebre suite gratuita Windows Live Essentials sono presenti alcuni programmi veramente interessanti. Oltre a Windows Live Writer, essenziale per i blogger, ci sono Messenger, Live Photo Gallery, Windows Movie Maker e software minori. Il client di posta elettronica online è stato rinominato da Live Mail a Windows Live Mail 2011 e può essere scaricato insieme a tutta la suite.

Andando su Scarica ora verrà effettuato il download di un Installer che vi permetterà di scaricare tutti i programmi che vi servono di questa suite della Microsoft. Serve solo mettere la spunta a quelli che interessano. I programmi già presenti saranno invece aggiornati.

Come mostrare a rotazione i plugin Attività Recenti e Consigli di Facebook.

Facebook è il social network che sta cannibalizzando tutti gli altri. E' notizia di queste ore che MySpace ha in programma di licenziare la metà dei propri dipendenti. Anche gli aggregatori di editoria sociale stanno soffrendo. Digg ha perso un sacco di utenti e anche in Italia il calo dei visitatori e utilizzatori di OKNotizie e siti simili è sempre più marcato. Solo Twitter sembra resistere a questa ecatombe.

Per un blogger è quindi imprescindibile cercare di sfruttare al massimo tutte le potenzialità offerte da Facebook. Si tratta, come opzione minima, di creare una pagina fan, ripubblicare automaticamente i post con NetworkedBlogs o con RSS Graffiti, pubblicare i nostri commenti automaticamente tramite TwitterFeed. E' anche molto utile il Like Box che permette di visualizzare i fan della nostra pagina e il Mi Piace inserito in fondo a ogni articolo per manifestare il gradimento del lettore.

Esistono anche il plugin per i commenti, molto interessante ma ancora non visibile in Internet Explorer, se implementato su Blogger, quello delle Attività Recenti (Demo) e dei Post Consigliati (Demo). E' evidente che si installano tutti si riempie il layout del blog. Vi presento un sistema interessante per visualizzare a rotazione il widget delle Attività Recenti e degli Articoli consigliati.

Come inserire nel blog una textarea trasparente.

Non so se sia più appropriato usare il maschile o il femminile. Nel dubbio opterò per il secondo. La textarea è un tag HTML che permette di generare un box in cui inserire del testo per potere essere copiato più facilmente dai lettori. Viene molto usata nel caso di codici di antipixel o banner che vengono offerti ai navigatori per creare collegamenti al nostro sito.

Coloro che usano Windows Live Writer hanno delle difficoltà a inserire una textarea in un articolo perché questo software della Microsoft non sempre la interpreta correttamente. Fortunatamente non ci sono invece problemi con l'Editor di Blogger anche con la sua versione più datata.

Fino a qualche mese fa, noi utenti di Blogger, per mostrare solo i riassunti degli articoli in Homepage, usavamo una personalizzazione chiamata degli Articoli Sintetici. Adesso con l'avvento del Read More è diventato un sistema largamente obsoleto. Questo metodo si basava tra l'altro sull'inserimento del codice <span id="fullpost"> nel punto esatto in cui si voleva mostrare il post in Homepage.

Come mostrare un tooltip in una parola o in una frase.

Tutti sanno come inserire un collegamento a una parola o a una frase. Tutto ciò che è visibile in un link, si chiama anchor text o testo di ancoraggio se si usa la nostra lingua. Non è sempre necessario, né tantomeno utile, inserire dei link per arricchire i contenuti del post. In certi casi potrebbe essere più efficace un tooltip che viene visualizzato da chi passa sopra al testo con il mouse.

Certamente vi sarete imbattuti in questo elemento ma, per rendere più chiaro l'argomento del post, passate con il mouse sopra al testo seguente

Definizione di Tooltip

Vedrete aprirsi un piccolo rettangolo di questo genere

La sintassi per creare questo effetto che permette di arricchire il blog è semplicissima

<abbr title="TESTO VISUALIZZATO NEL TOOLTIP">TESTO DI ANCORAGGIO</abbr>

Il codice va incollato in Modalità HTML e, una volta tornati alla visualizzazione normale, sarà possibile cambiare il testo per quanto riguarda i caratteri, le dimensioni e i colori.

Come nascondere una immagine e mostrarla cliccandoci sopra con il mouse.

Nell'attività fotografica talvolta si possono fare delle realizzazioni che potrebbero urtare la sensibilità dei lettori del blog. Sarebbe quindi opportuno mantenere queste foto nascoste dando l'opzione di visualizzarle solo a chi lo desideri. Insieme a questa funzionalità sarebbe interessante inserirne un'altra che permettesse di ripristinare la situazione precedente.

Questa personalizzazione mi è stata richiesta in un commento ma potrebbe essere utilizzata anche da altri blogger fotografici che si trovassero nella stessa situazione. Il trucco consiste nell'inserire una opacità massima nella immagine che poi sarà visibile se ci verrà cliccato sopra.

Prima di procedere all'illustrazione del procedimento, ecco una immagine completamente opaca che può essere visualizzata cliccandoci sopra con il mouse

Inserire una immagine prima del titolo dei post in Blogger.

Mi è stato chiesto specificatamente di occuparmi di questa personalizzazione che non è poi difficile da effettuare. Illustrerò due procedimenti alternativi per i nuovi modelli realizzati con il Designer Modelli e per i template di prima generazione. Il concetto è come detto di visualizzare una piccola icona prima del titolo dell'articolo. Si può operare nella sezione <body> o nella sezione <head> segnatamente in quella  <b:skin>.

Come inserire una immagine prima del post modificando la sezione <body>

Andate su Design > Modifica HTML e salvate il modello completo. Espandete i modelli widget e cercate la riga

<a expr:href='data:post.url'>

Nei nuovi modelli fa parte del blocco di codice che inizia con <h3 class='post-title entry-title'>, mentre nei vecchi modelli il blocco di codice dovrebbe variare. In ogni caso questa riga dovrebbe essere presente in tutti i template. Subito sotto incollate il seguente codice

Come visualizzare le etichette tutte in maiuscolo o in minuscolo nel widget di Blogger.

Questa personalizzazione funziona sia nel caso in cui si fosse scelta la visualizzazione delle etichette in un elenco verticale che in formato nuvola di tag. Ecco come possono apparire le etichette nei due casi previsti

                               

con alcune voci tutte minuscole, altre tutte maiuscole, altre ancora con la prima lettera maiuscola.

Come opacizzare una immagine e illuminarla al passaggio del mouse.

Il concetto di opacità di una immagine è ben conosciuto da chi è esperto di programmi di grafica. Si possono prendere a prestito alcuni concetti per rendere più interessanti le immagini del nostro blog.

Ho postato usato un codice per una opacità al 70%. Se si vuole variare la percentuale basta sostituire a 70 e 0.7 con altri numeri. Ricordo che la percentuale è inversamente proporzionale alla opacità. In altri termini una opacità al 30% significa che l'immagine è meno visibile che con una opacità al 60%. Ecco alcuni esempi



<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);filter:alpha(opacity=70);-moz-opacity:0.7;opacity: 0.7;-khtml-opacity: 0.7;" src="URL-IMMAGINE"/>