Inserire annunci AdSense dentro il post con i CSS

Con la nuova veste grafica, ho inserito gli annunci AdSense non proprio sopra il post, ma all’inizio, facendoli integrare col testo dell’articolo. E’ una cosa che avrei voluto provare da tempo, per testarne il rendimento, ma nel vecchio template letteralmente non avevo lo spazio per farlo.

E’ ancora presto per dire se è una posizione migliorare di quella precedente, i rendimenti (in termini di click o di guadagno) sono sempre soggetti a fluttuazioni, quindi aspetto qualche giorno prima di trarre conclusioni (che condividerò come sempre in un post).

Ho visto comunque che la cosa interessa anche ad altri, ed eccomi qui a spiegare come fare. Sebbene farò sempre riferimento alla struttura di Blogger, il concetto vale per qualsiasi piattaforma in cui sia possibile inserire codice HTML.

Visto che andremo a modificare il codice del template, raccomando come sempre di farne un backup.

Creiamo l’annuncio adatto

Per prima cosa bisogna scegliere il formato, che, come mi è capitato di ricordare spesso, più grande è, meglio è. Ma senza esagerare, bisogna anche lasciare posto al testo dell’articolo altrimenti l’effetto sarà davvero spaventoso. Direi che si dovrebbe di occupare al massimo la metà dello spazio a disposizione. Avendo la colonna dei post un’ampiezza di oltre 600, ho usato un annuncio di dimensioni 300x250:

Se avete poco spazio, potete anche decidere di usare gli insiemi di link di AdSense, che come rendimento non hanno niente da invidiare agli altri, anzi, vista la posizione particolare potrebbero essere preferibili.

Potete anche usare entrambe le soluzioni: per esempio, un annuncio grande sopra il post, e un insieme di link dentro. Ma la regola del chi troppo vuole nulla stringe vale sempre: se riempite troppo di annunci il post, la sua lettura diventerà difficile, e al tempo stesso correte il rischio di far “perdere valore” ai vostri click.

Gli annunci testuali dovrebbero avere un rendimento nettamente migliore di quelli illustrati, ma consiglio sempre di provare le varie soluzioni.

Ricordatevi che una volta creato l’annuncio, passeranno almeno dieci minuti prima che sia visibile.

Prepariamo il codice

Una volta creato l’annuncio, dovrete usare lo strumento di cui ho parlato in questo post per adattare il codice HTML di AdSense a quello XML del template di Blogger.

Quando avrete fatto, il codice ottenuto va inserito tra:

<span style='float: left; margin: 10px 5px 5px 0px;'>

e

</span>

per avere l’annuncio allineato a sinistra. Se volete invece l’annuncio allineato a destra, come prima porzione di codice usate questa:

<span style='float: right; margin: 10px 0px 5px 5px;'>

Notate che tramite margin impostiamo il margine da lasciare intorno all’annuncio, partendo dall’alto e girando in senso orario. Queste sono definizioni CSS che regolano l’aspetto del vostro template.

Visualizzare l’annuncio solo nella pagina del post

Se volete visualizzare l’annuncio AdSense solo nella singola pagina del post (come faccio io), racchiudete ulteriormente tutto il codice tra:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

e

</b:if>

Questa operazione si rende necessaria perchè lo stesso tipo di annuncio non può essere visualizzato più di tre volte, per cui nella pagina iniziale del blog i primi tre annunci lo avranno e gli altri no, con un effetto grafico non certo piacevole.

Inserire il codice nel template

Andate in Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercate la seguente porzione di codice:

<div class='post-body'

E subito sopra incollate il codice AdSense che avete ottenuto. Se non riuscite a trovare questa porzione di codice, cercate questa:

<p><data:post.body/></p>

E sempre subito sopra incollate il codice AdSense. L’annuncio verrà visualizzato automaticamente in tutti i post.

A questo punto non vi resta che salvare il template e il gioco è fatto.

Se fate questa modifica, mi piacerebbe avere un vostro riscontro sull’andamento dei click e dei guadagni per condividerne le impressioni.

Inserire l’iscrizione al feed sotto i post del blog su Blogger

A tutti capita di fare determinati interventi nel blog con la speranza che portino benefici in termini di visite, gradimento o altro. Spesso sono tanti piccoli elementi che anonimamente concorrono al successo di un blog, così lentamente che non ci accorgiamo del beneficio. Ma a volte capita che il risultato sia immediatamente tangibile, che pensiamo, tra noi e noi, “è stata una bella idea!”.

Creare blog è cresciuto un po’ alla volta, ma ci sono state determinate cose che hanno segnato uno scatto decisivo in avanti. Quando ho inserito l’iscrizione al feed del blog sotto il post, è stato uno di quei momenti. Mentre prima gli iscritti erano mediamente uno al giorno (secondo le statistiche di Feedburner), adesso la media è di circa tre al giorno.

Imputarlo solo a questo è una forzatura, ma fu nei giorni successivi che il numero di iscritti cominciò a crescere velocemente. Sono spesso queste piccole cose a fare la differenza, come le caramelle messe davanti alla cassa del supermercato.

In effetti le strategie per aumentare i lettori iscritti al feed sono tante, e magari presto condividerò le mie esperienze personali in un post. Nel frattempo, nella speranza che fare quest’intervento porti tanta fortuna a chi lo fa, come l’ha portata a me, e per rispondere ai tantissimi che me lo hanno chiesto, spiego come inserire l’iscrizione al feed sotto al post.

Fare una copia di backup del template

Come sempre, visto che andremo a toccare il template, consiglio assolutamente di farne un backup, per poter tornare indietro se qualcosa andasse storto o non fossimo contenti del risultato. Potete trovare maggiori informazioni in questo post.

Personalizzare il codice di esempio

Per ottenere un risultato simile al mio, potete utilizzare questo codice HTML:

<br/>

<table width="95%" border="0" align="center" bgcolor="#b0c4de">
<tr>
<td bgcolor="#b0c4de"><font color="#333333">Se ti è piaciuto l'articolo, <font color="#0D6AA6"><a href="indirizzo al feed del blog">iscriviti al feed </a></font>per tenerti sempre aggiornato sui nuovi contenuti del blog! Per maggiori informazioni sui feed, <font color="#0D6AA6"><a href="http://creareblog.blogspot.com/2008/02/cosa-sono-i-feed-rss-o-atom.html">clicca qui!</a></font></font></td>
</tr>
</table>

<br/>

Personalizzando indirizzo al feed del blog con l’indirizzo al feed del vostro blog (nel caso di Blogger, nomeblog.blogspot.com/atom.xml), il secondo link in rosso con l’indirizzo di una pagina che spieghi cos’è un feed (potete anche lasciare il mio link, o creare un vostro post), e i tre valori in verde che indicano rispettivamente:

1. il colore di bordo del riquadro (nell’esempio, il primo #b0c4de)
2. il colore di sfondo  del riquadro (nell’esempio, il secondo #b0c4de)
3. il colore del testo normale (nell’esempio, #333333)
4. il colore dei link (nell’esempio, #0D6AA6)

secondo la codifica RGB dei colori.

Le parti in blu rappresentano invece il testo che verrà visualizzato, potete cambiare anche quello, cercando però di rispettare il codice html (in nero) tra le parole.

Se volete vedere in anteprima il risultato, potete utilizzare questo comodo strumento online, che però funziona male con Internet Explorer.

Visualizzare l’iscrizione solo nei singoli post

Se come me utilizzate la visualizzazione sintetica dei post, o comunque volete visualizzare l’iscrizione al feed solo nella pagina del singolo post, dovrete racchiudere il codice precedente tra:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

e

</b:if>

Inseriamo il codice nel template

Quando avrete personalizzato il codice, andate in Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercate questa riga di codice:

<p><data:post.body/></p>

E subito sotto incollate il codice. Salvate il template e visualizzate il blog. Se tutto è andato bene, subito sotto il post vedrete questo:

A questo punto, non vi resta che tenere gli occhi aperti sulle statistiche del feed per vedere se ci saranno cambiamenti positivi!

Accelerare il caricamento delle pagine del blog

Uno dei principali pregi di un blog è al tempo stesso il suo peggior difetto: foto, musica, tanti articoli bene in vista, immagini glitterate, animazioni in flash o in java, lo rendono qualcosa di più di una semplice pagina web. Diventa lo specchio di noi stessi, delle nostre vite e del nostro modo di essere. Tutto questo però si paga in termini di pesantezza delle pagine.

Tutti sappiamo quanto sia importante avere un blog veloce, e lo sappiamo per il semplice fatto che noi stessi, quando navighiamo su Internet, odiamo aspettare interminabili secondi prima di cominciare a vedere qualcosa.

Anche Google ama poco le pagine che si caricano lentamente.

Sempre più spesso mi viene chiesto come fare a rendere più veloce il caricamento dei nostri blog. Mi viene chiesto così spesso che ho deciso di dedicare questo post all’argomento, focalizzandomi sugli aspetti che maggiormente (e più spesso) appesantiscono le pagine sul web. Anche se qualche nota è riferita a Blogger, le regole sono universali e valgono per qualunque blog o sito.

Innanzitutto, per renderci conto effettivamente di quanto sia pesante il blog, possiamo utilizzare uno strumento di cui ho già parlato in passato, Pingdom Tools, che tra tutti gli strumenti che ho provato del genere è quello che ritengo più completo e affidabile. Man mano che alleggeriremo il nostro blog, potremo misurarne il tempo di caricamento per vedere come vanno le cose.

Le immagini

Le immagini presenti nel blog rappresentano l’elemento di maggior pesantezza in assoluto. Per questo è importante non inserirne mai troppe. E importantissimo: mai di dimensioni enormi. Scrivendo delle guide, a me per primo viene spontaneo riempire i post di immagini. Poi col tempo ho dovuto imparare a ridimensionarmi, perchè il tempo di caricamento della pagina principale del blog stava diventando eterno.

Se utilizzate Windows Live Writer, potete dimensionare le immagini facilmente all’interno del testo e il programma, proprio per accelerare il caricamento, creerà una copia più piccola dell’immagine (che è quella che effettivamente vedremo nel post) e una più grande che verrà visualizzata cliaccandoci sopra.

Direi che due o tre immagini al massimo in un post vanno bene. Non dico di non metterne perchè, obiettivamente, un post senza immagini è come mia moglie senza sorriso (che per voi non significa niente, ma per me significa stare alla larga!)

Il numero dei post

Il numero di articoli che visualizzate nella pagina principale del blog è importante, perchè in genere più post ci sono più immagini vengono visualizzate. Con dieci post, con tre immagini in ognuno, nella pagina principale ci sono almeno trenta immagini. Già troppe. Nel caso di Blogger, il numero degli elementi visualizzati viene scelto da Layout->Elementi pagina, cliccando su Modifica nell’area Post sul blog. Nella finestra che appare, Blogger di base propone sette, consiglio di lasciare invariato questo numero:

Nel caso che scriviate post particolarmente lunghi, anche l’idea di mettere un solo post nella pagina principale del blog non è male. Tanto potete sempre visualizzare l’elenco degli ultimi post. La visualizzazione sintetica dei post non accelera il caricamento, perchè vengono comunque caricati anche se nascosti in parte.

Flash, Quicktime, Javascript

Vuoi per visualizzare il contatore delle visite, vuoi per la slide delle foto del cenone di capodanno, vuoi per abbellire in generale il nostro blog con animazioni varie, tendiamo spesso a inserire elementi in Flash, Quicktime o JavaScript. Più cose si muovono nel blog, più tempo ci vorrà a questo per caricarsi. Alcune cose sono indispensabili, come gli strumenti per le statistiche del blog o gli annunci AdSense per chi vuole monetizzarlo, altre meno.

Va bene mettere un calendario, ma mi è capitato di vederne anche due o tre. Il gattino che segue il mouse con gli occhi è carino, ma se mettiamo quello magari evitiamo altre cose. Se mettiamo della musica, magari non facciamola partire in automatico o inseriamola in fondo alla pagina, così viene caricata per ultima.

E’ un peccato, lo so, la vita è fatta di scelte. In genere io indico nei post che pubblico se quello di cui parlo può appesantire o meno il caricamento del blog.

CSS esterni

Questo è un consiglio riservato ai grandi smanettoni: nelle pagine del vostro blog, potendo, utilizzate CSS esterni.

I CSS ricordo che sono definizioni, contenute nel template, che definiscono lo stile e l’apparenza del nostro blog. E’ possibile metterle in un file esterno, per far si che vengano caricati solo la prima volta. Anche su Blogger è possibile farlo, come ho spiegato in questo post, anche se sconsiglio di farlo a meno che non ne abbiate effettivamente l’esigenza.

Non utilizzare troppi servizi di file hosting

Per pubblicare immagini (o magari documenti) è meglio non utilizzare troppi servizi esterni. Se usate Skydrive, Imageshack o Picasa, limitatevi a quelli. Ogni volta che durante il caricamento della pagina il browser incontra un elemento ospitato in un nuovo servizio, ne risolve l’indirizzo, cioè si mette in contatto con il server che lo ospita.

Io uso Picasa per le immagini e Skydrive in genere per il resto. Li consiglio, perchè sono entrambi senza limiti di banda.

Questo non accelererà tantissimo il caricamento delle pagine, non quanto i consigli precedenti, ma se usate molti servizi, ridurli si farà sentire.

Spostare il codice JavaScript in file esterni

Molte modifiche di cui spesso parlo, specialmente quelle come la visualizzazione degli articoli correlati, implicano l’inserimento di codice JavaScript all’interno del template di Blogger. La cosa migliore sarebbe mettere questi codici in file esterni come gli effetti natalizi di cui ho parlato tempo fa, perchè anche gli script esterni vengono caricati solo una volta.

Anche questo consiglio non è incisivo come i precedenti, ma se utilizzate molti script nel vostro blog la differenza può diventare significativa. Ovviamente anche questo è riservato particolarmente agli smanettoni esperti.

Per quanto mi riguarda, prima o poi riproporrò alcune modifiche fatte utilizzando codice esterno.

Per concludere

Ci sono molti altri punti che potrei inserire in questo elenco, ma direi che almeno il 90% di tempo di caricamento di una pagina web è dovuto ai primi tre trattati. Diminuite e rimpicciolite le immagini, diminuite i post nella pagina principale, e diminuite gli elementi decorativi animati nel blog, e noterete subito una sostanziale differenza.

Per qualsiasi chiarimento, lasciatemi un commento.

Ed ecco la nuova veste grafica

Ed ecco la nuova veste grafica del blog. Ho totalmente cambiato strada rispetto al vecchio template e ho optato per colori chiari e uno stile essenziale, e caratteri più grandi. Cose da sistemare ce ne sono ancora tantissime, come ad esempio alcuni elementi della colonna a destra, che sembrano ammassati. Ovviamente il loro aspetto era stato adattato al vecchio aspetto del blog, ora dovrò sistemarlo.

Devo ancora rendere tutto più armonico, ma il nuovo template eccolo qua. Ho preferito pubblicarlo e rimandare a dopo le varie sistemazioni, le farò strada facendo, ho troppa voglia di tornare a scrivere nuovi articoli. Senza contare la caterva di mail che aspettano.

Inoltre, col nuovo posizionamento degli annunci dentro il post (cosa che ho sempre voluto provare, ma che non potevo fare nel vecchio template per mancanza di spazio), molti articoli devono essere riadattati. Ma anche questa è una cosa che farò man mano, cercando di concentrarmi dapprima su quelli più letti.

Devo dire che inizialmente avevo preso tutta un’altra strada, un aspetto molto più elaborato (il passaggio da tre a due colonne “al volo” era solo una caratteristica delle tante), ma poi parlando con mia moglie ho deciso di tornare in linea con il template originale.

Non va solo sistemato solo quello, comunque. Ci sono alcune nuove sezioni che devo aggiungere, ma anche questo lo farò strada facendo.

Devo dire che a me piace. E’ più facile da leggere e c’è più spazio per gli articoli. Spero che lo apprezzerete anche voi!

Chissà se va, chissà se va….

A quanto pare, Google continua ad avere problemi dietro le quinte. Mentre nei giorni scorsi abbiamo visto tutti sparire per ore gli annunci AdSense, oggi è impossibile fare una qualsiasi modifica al template senza che venga dato errore. Anche creando un blog nuovo con un template predefinito, basta andare in Layout->Modifica HTML, selezionare “Espandi i modelli widget” e salvare (senza aver toccato nulla) per vedersi comparire un bel messaggio che dice di cercare nei gruppi di assistenza la soluzione al problema.

E che dovrei scrivere? Ho creato un blog e mi da errore?

Mi immagino già le risposte: prova un altro browser, pulisci la cache, utilizza un template predefinito (è quello che sto facendo!).

Ma non è la prima volta che capita, e so già che bisognerà aspettare un paio di giorni per tornare alla normalità. Fastidioso, ma in fondo se fossero solo questi i problemi che si possono avere coi propri spazi su internet, andrebbe bene così.

Fatto sta che volevo apportare le ultime modifiche al template nuovo prima di pubblicarlo, ma così è impossibile farlo, dovrò rimandare il cambio di veste grafica di questo blog. O forse dovrei interpretare la cosa come un segno del destino? Dovrei lasciare tutto com’è?

Lavori in corso!

E’ da mesi che sto pensando di fare diverse modifiche a Creare blog, ma per mancanza di tempo, e un po’ anche perchè blog vincente non si cambia, ho sempre rimandato. In questi giorni però ho deciso di darmi una mossa e la mancanza di nuovi post è dovuta al fatto che sto lavorando dietro le quinte sia per dare una nuova impostazione grafica al blog sia per cercare di renderlo più “partecipativo”.

In particolare, cambierò template con uno decisamente più leggero e spero al tempo stesso più facile da consultare: non tutti sono contenti dei caratteri piccoli che utilizzo e visto che, secondo Analytics, alcuni lettori passano anche ore davanti a un post, non voglio causare problemi di vista più di quanto non ne causi stare davanti a un pc.

Non sto realizzando un template dal nulla perchè so già che alla ricerca del design perfetto rimarrei a lavorarci anni. Mi sto dedicando alla modifica di un template preesistente aggiungendoci qualche tocco personale.

Anche i contenuti subiranno qualche cambiamento: aumenteranno i post pubblicati settimanalmente, e anche questo per ovviare ai miei tempi eterni di pubblicazione di un articolo. Spesso mi viene richiesta un’informazione particolare, e rimando sempre ad un post futuro. Ma mi rendo conto che a volte l’attesa si fa eterna (mi è capitato di aver cominciato un post dopo mesi che è in lista per poi accorgermi che ormai l’argomento è obsoleto, perchè magari c’è un nuovo servizio migliore, e il ciclo ricomincia!), e allora a fianco alle superguide che siete abituati a leggere qui, pubblicherò anche articoli più snelli e veloci per dare informazioni rapide a chi ne ha bisogno, senza dover farlo aspettare due mesi.

La pubblicazione di nuovi articoli riprenderà la prossima settimana, con la nuova veste grafica e nuove sezioni. Continuerò comunque a rispondere alle mail e ai commenti che mi lascerete nel frattempo.

Approfitto di quest’occasione per invitarvi a darmi consigli: se avete qualche buona idea per il blog, o avete delle critiche, sarei contentissimo se me li faceste presente!

Adesso mi rimetto il caschetto e torno a lavoro!

Scegliere i colori degli annunci AdSense per aumentare i guadagni

Quando si comincia a inserire gli annunci AdSense nel proprio blog, un fattore che viene spesso trascurato è la scelta dei colori degli annunci testuali. Eppure, assieme ad un corretto posizionamento degli stessi, è uno dei fattori più importanti di cui tenere conto se si vuole davvero renderli redditizzi.

Più volte ho ribadito che inserire gli annunci non basta, bisogna cominciare a studiare e impegnarsi se si vogliono davvero ottenere risultati. In un certo senso, si diventa imprenditori, e come tali bisogna tenere conto di tanti piccoli fattori di marketing e non solo. Non basta iscriversi ad AdSense, incrociare le braccia e sperare di vedere accreditati dollari su dollari nel nostro account.

La scelta dei colori diventa importante perchè con AdSense (e qualsiasi altro programma di inserimento annunci testuali) guadagniamo solamente se gli annunci vengono cliccati dagli utenti, e per essere cliccati dagli utenti è importante che siano notati. Se non vengono notati, non vengono cliccati e noi non guadagneremo.

Facciamo un esempio guardando queste immagini, lo stesso blog che ha fatto due diverse scelte per i colori degli annunci:

Nel primo caso, gli annunci sono perfettamente integrati con il contesto, a primo impatto non si notano e solo guardandoli ci si accorge che si tratta di pubblicità. Nel secondo caso, gli annunci pubblicitari sono così evidenti che il cervello automaticamente li scarta e va oltre a cercare qualcosa di interessante.

Per la mia esperienza personale, posso affermare che la redditività degli annunci nell’esempio a sinistra è dieci volte superiore di quello a destra. Ovviamente ci sono casi e casi, ma di sicuro l’esempio a sinistra sarà sempre più produttivo di quello a destra.

E’ un concetto che lo stesso staff di Google ha ribadito più volte. I guadagni di AdSense sono divisi tra noi e Google, quindi Google ha tutto l’interesse ad aiutarci a migliorare le nostre entrate, perchè significa miglirorare le proprie. In particolare tempo fa è stato pubblicato un articolo sull’importanza della scelta dei colori degli annunci, lo potete leggere qui.

Nell’articolo le regole principali da seguire vengono sintetizzate in tre tecniche principali: Integrazione, Complementarietà e Contrasto.

L’integrazione degli annunci di AdSense

A proposito di una corretta integrazione degli annunci, viene esposto questo esempio nell’articolo:

I colori utilizzati per gli annunci sono gli stessi del resto della pagina: i link hanno lo stesso colore dei link del blog, e le descrizioni hanno lo stesso colore del testo del post. Questa è una scelta vincente, perchè la pubblicità diventa parte integrante della struttura e chi legge deve osservarli per distinguerli dal resto.

La complementarietà come scelta di colori per gli annunci di AdSense

Il secondo esempio utilizza lo stesso principio, ma in chiave leggermente diversa:

I colori degli annunci non sono gli stessi del contenuto principale del blog (cioè l’articolo al centro), ma degli elementi di navigazione intorno ad esso. In alto a sinistra ci sono vari link, in fondo ci sono gli annunci gli AdSense. I colori sono gli stessi e chi guarda, ancora una volta, può distinguerli solo osservandoli.

Utilizzare il contrasto per il colore degli annunci

Nel terzo esempio, viene presentata l’unica eccezione efficace alla regola:

Quando lo sfondo del blog è nero o molto scuro, creare un contrasto può diventare altrettanto produttivo. In particolare nel caso esposto gli annunci sono in una posizione (in fondo al blog) che sfugge facilmente ai lettori, quindi un contrasto elevato può aiutare ad attirarne l’attenzione. Ma solo con gli sfondi scuri questa tecnica porta qualche vantaggio, l’equivalente con sfondo chiaro tende ancora una volta a far scartare la pubblicità senza neanche osservarla.

Per concludere

La perfetta integrazione dei nostri annunci tramite una scelta intelligente dei colori è una delle chiavi del successo per chi ha intenzione di monetizzare il proprio blog. Probabilmente, nel caso del PPC (Pay Per Click, tipo di annunci in cui si guadagna quando vengono cliccati, come nel caso di AdSense e in generale degli annunci testuali), la più importante in assoluto.

Per maggiori chiarimenti su come cambiare i colori degli annunci AdSense, Google ha pubblicato questa piccola guida.

Inserire uno sfondo nei titoli degli elementi su Blogger

Quella di inserire uno sfondo nei titoli dei vari elementi su Blogger è una piccola modifica abbastanza semplice, ma che se ben fatta arricchisce decisamente di un tocco di classe non indifferente un template.

In generale amo molto i template che fanno largo uso di elementi grafici, purchè non siano troppo pesanti e si integrino bene con il resto.

 

Per questo effetto in particolare, partiamo dal modello predefinito di Blogger Washed Denim (giusto per non fare le prove col solito Minima!) per ottenerlo, passando da questo:

 

a questo:

Vediamo come fare.

Modifichiamo il template

Come sempre, il primo passo è quello di fare il backup del template di Blogger, così se qualcosa va storto possiamo sempre tornare indietro sui nostri passi.

Dalla bacheca di Blogger, andiamo in Layout->Modifica HTML, selezioniamo “Espandi i modelli widget” e cerchiamo questa porzione di codice:

.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: $sidebarTitleTextColor;
}

Aggiungiamo la riga che ho evidenziato in rosso:

.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
 background:url(indirizzo dell’immagine) no-repeat center left;
font-size: 100%;
color: $sidebarTitleTextColor;
}

Sostituendo indirizzo dell’immagine con l’indirizzo di un’immagine che abbiamo precedentemente pubblicato in rete, magari con un servizio come ImageShack o Skydrive, e che magari abbiamo ridimensionato all’occorrenza con un servizio come ResizR.

Salviamo il template e visualizziamolo per vedere subito l’effetto. Nel mio caso, ho cambiato il colore del titolo per renderlo maggiormente visibile, da Layout->Caratteri e colori:

Cosa fare se non trovate la porzione di codice

In alcuni template davvero essenziali (come nel tempalte Minima), potreste non trovare la porzione di codice che ho indicato. In questo caso cercate la seguente porzione di codice

.sidebar {
  …
}

e subito sotto incollate:

.sidebar h2 {
  background:url(indirizzo dell'immagine) no-repeat center left;
}

Alternativamente, potreste trovare:

#sidebar {
  …
}

e in questo caso per uniformità sotto incollate:

#sidebar h2 {
  background:url(indirizzo dell'immagine) no-repeat center left;
}

Una volta fatta questa modifica, tutti gli elementi che aggiungeremo in futuro avranno questo sfondo nei titoli.

Generare un avatar dal proprio nome!

Mentre l’altra volta ci siamo divertiti a generare il nostro nickname ancestrale, con Turn your name into a face potremo convertire il nostro nome, o il nostro nick, in una faccia!

Ogni tanto ci vuole una pausa dalle complicate modifiche al template o dalle strategie per guadagnare o attirare traffico al blog. E poi questo è quel genere di cose che, per quanto troviamo inutili, tutti ci divertiamo a provare!

Quale sia l’idea di base poco importa, divertente è quello che riesce a tirare fuori il sito. A essere sinceri, speravo che Orazio tirasse fuori qualcosa di meglio:

Non che con Tenebrae vada meglio:

Direi che in realtà sono un mix dei due. Più somigliante era quello che sono riuscito a creare qualche tempo fa con Face your manga!

Mi fa impazzire il fatto che qualcuno ha perso chissà quanto tempo a disegnare tutte queste facce e poi ha pure pagato il dominio del sito per pubblicare il tutto online. Sono le cose che mi fanno adorare Internet.

Applicare effetti alle immagini con Windows Live Writer

Qualche tempo fa, Kristel (e diversi altri prima di lei) mi ha chiesto come facessi a mettere l'ombreggiatura alle immagini che utilizzo nei vari articoli. Nel mio caso, lo faccio tramite Windows Live Writer, il programma di cui ho parlato più volte, che uso per scrivere sul blog e che molti hanno adottato in seguito ai miei continui inviti a farlo.

Con Windows Live Writer c'è il grande vantaggio di non dover caricare l'immagine da nessuna parte (visto che viene pubblicata automaticamente su Picasa tramite il nostro account Google) e di poter applicarci degli effetti, anche grazie a plugin esterni.

Vediamoli assieme.

Applicare effetti alle immagini

Già appena installato, Windows Live Writer permette alcuni semplici ritocchi. Una volta inserita l'immagine nel post, basta cliccarci sopra e a destra, sotto la sezione Bordi, è possibile applicare gli effetti:

• Ombreggiatura: è quello che uso io, ed è il mio effetto preferito.
• Cartafotografica: l'immagine viene incorniciata di bianco come se fosse una fotografia. Viene anche aggiunto l'effetto ombreggiatura.
• Eredita da blog: l'immagine eredita le impostazioni definite nel vostro blog, ottenendo lo stesso effetto che sia ha quando si inserisce un'immagine in un post senza l'utilizzo di Windows Live Writer. Nel caso di Blogger, alcuni template prevedono ad esempio dei bordi particolari nelle immagini.
• Nessuno: rimuove qualsiasi effetto alle immagini.

Effetti semplici ma carini. Questi sono quelli base, è possibile però arricchirne la gamma installando estensione esterne, come quella di cui sto per parlare.

Applicare un effetto Polaroid alle immagini

Grazie a questa estensione di Windows Live Writer, potrete dare alle vostre immagini effetti come questo:

Innanzitutto dovrete scaricare e installare l'estensione da questa pagina: cliccate sul pulsante Download e vi verrà richiesto se volete installarla (eventualmente chiudete Windows Live Writer prima di procedere).

Confermate e andate sempre avanti. A questo punto rientrate in Windows Live Writer per trovare una nuova opzione in basso a destra:

Cliccateci sopra e scegliete un'immagine dal vostro computer. Una volta fatto, dal pannello a destra, potrete personalizzare l'effetto da applicare:

• Size: da qui scegliete la dimensione della foto
• Caption: potete mettere del testo nella foto, come ho fatto io. Può essere utile anche per proteggere le vostre foto da usi non autorizzati.
• Show Caption: permette di visualizzare o nascondere il testo che avete scelto.
• Font: permette di cambiare il font del testo nella foto.
• Tilt: da qui inclinate la foto, verso destra per ruotarla in senso orario, a sinistra per il senso antiorario.
• Text Flow: gestisce l'allineamento del testo che avete inserito.
• Style: permette di inserire gli angoli neri (Black Corners), rossi (Red Corners) o nessuno (Normal).

Con un effetto finale davvero carino.

Altre estensioni per Window Live Writer

Esistono molte altre estensioni per Windows Live Writer per la manipolazione delle immagini, presto magari pubblicherò una miniguida sulle più interessanti, ma se non volete aspettare potete dare un'occhiata nel sito di Windows Live.

Nel frattempo, se ancora siete tra quelli che non utilizzano questo magnifico programma, vi consiglio di provarlo subito!

Visualizzare elementi diversi a seconda delle sezioni del blog

Diverse volte (anche nel precedente post, dall'autore del blog ASD Monteiasi Calcio) mi è stato chiesto come fosse possibile visualizzare un elemento solo nella pagina principale del blog e non nelle altre. Ho deciso quindi di spiegare in questo post come sia possibile nascondere o mostrare i vari elementi a seconda di dove ci si trova nel blog.

Può risultare utile per diversi motivi: ad esempio, su Creare blog determinati annunci AdSense sono visibili solo nella pagina del singolo post e non nella pagina principale. Oppure potremmo decidere di visualizzare elenchi di post, o slide di foto, solo nella pagina principale piuttosto che in quelle del singolo post.

Queste modifiche riguardano il template del blog, e quindi consiglio di farne il backup.

Individuare gli elementi da nascondere nel blog

Bisogna andare in Layout->Modifica HTML, e selezionare "Espandi modelli widget". A quel punto possiamo cercare gli elementi che vogliamo nascondere. Teniamo presente che i vari widget che aggiungiamo (ad esempio HTML/JavaScript, Elenco categorie, e così via), hanno sempre questa struttura:

 

<b:widget id='....' locked='....' title='....' type='...'>
<b:includable id='...'>
...

</b:includable>
</b:widget>

In base al valore di title (cioè il titolo che avete dato all'elemento) potete capire di quale elemento si tratta. Nel mio caso, l'elemento con la ricerca nel blog comincia con

<b:widget id='HTML3' locked='false' title='Cerca nel blog' type='HTML'>

e lo riconosco proprio dal titolo. Ovviamente potete usare anche le altre proprietà per individuare l'elemento, come il type (HTML, LinkList, e così via).

Tuttavia potete decidere non solo di nascondere widget ma anche intere porzioni di codice del template, come per l'appunto nel mio caso quelle in cui visualizzo alcuni annunci AdSense.

Visualizzare o nascondere un elemento solo nella sezione principale del blog

Individuate il codice che volete visualizzare nella pagina principale del blog, e racchiudetelo tra:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

e

</b:if>

Nel caso di un widget, queste due porzioni di codice vanno inserite rispettivamente subito dopo <b:includable e subito prima di </b:includable>. Per tornare al mio esempio di prima, se volessi visualizzare la casella di ricerca solo nella pagina principale del blog il codice sarebbe il seguente:

<b:widget id='....' locked='....' title='....' type='...'>
    <b:includable id='...'>
        <b:if cond='data:blog.url == data:blog.homepageUrl'>
        ...
        </b:if>
    </b:includable>
</b:widget>

Cercando di rispettare  i tag HTML di apertura e chiusura: se sono presenti più sequenze di <b:includable e di </b:includable> dentro il codice di apertura e chiusura del widget, allora dovrete ripetere l'intervento. Ma in genere sono presenti una sola volta.

Se invece volete che il vostro elemento sia nascosto solo nella pagina principale del blog, il suo codice va racchiuso tra:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

e

</b:if>

Attenzione: in questo caso le considerazioni vanno fatte sole sulla pagina principale del blog. Quando cliccate su una categoria, e vedete l'elenco dei suoi articoli, già non siete più nella pagina principale del blog. Se volete che un elemento sia visibile sia nella pagina principale del blog che in quelle delle categorie o delle ricerche, ma non nelle pagine dei singoli post, leggete quanto sto per spiegare.

Visualizzare o nascondere un elemento solo nelle pagine dei singoli post

Se volete che un elemento venga visualizzato solo nelle pagine dei singoli post, il suo codice va racchiuso tra:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

e

</b:if>

Quindi nella pagina principale del blog e in quelle delle categorie non sarà visibile. Se viceversa volete che un elemento sia visibile sempre tranne che nelle pagine del singolo post, allora il suo codice va racchiuso tra:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

e

</b:if>

Abbiamo così coperto le principali casistiche. Per chiarimenti o maggiori approfondimenti, lasciatemi un commento!

FeedDemon, un client desktop per NewsGator

Ho sempre usato Google Reader per la lettura dei feed a cui sono abbonato: la grande utilità di un lettore di feed online è che dovunque ti trovi puoi leggere i nuovi post ed avere sempre la situazione aggiornata. Lo svantaggio è però che quando i feed diventano centinaia, come nel mio caso, una pagina web online comincia a diventare scomoda da consultare.

Come la posta: leggerla direttamente online è comodo, ma è sempre più pratico utilizzare uno strumento come Windows Live Mail o ThunderBird.

E' cercando un programma che permettesse la lettura dei feed, e che permettesse la sincronizzazione tra casa e lavoro, che mi sono imbattuto in FeedDemon: l'ho trovato così pratico da averlo adottato subito.

FeedDemon si basa su NewsGator e non su Google Reader (aggiornamento: le ultime versioni permettono la sincronizzazione con Google Reader), per cui chi deciderà di usare questo programma dovrà decidere di utilizzare il primo come servizio per la gestione dei propri feed. NewsGator è uno strumento online come Google Reader e le funzionalità tra i due sono perfettamente uguali, per cui il passaggio sarà quasi indolore. Più avanti approfondirò come farlo.

Anche se il programma non è disponibile in italiano, anche per i meno avvezzi alla lingua sassone non dovrebbero avere grandi difficoltà. La comodità di FeedDemon è la pulizia e la leggerezza del programma, anche a fronte di centinaia di feed da gestire:

Nell'area a sinistra sono presenti tutti i feed a cui siamo abbonati, con la possibilità di organizzarli in cartelle e di taggare come vogliamo i vari post:

Ogni feed in cui c'è da leggere qualcosa viene evidenziato in grassetto, con a destra il numero di post da leggere. Nel momento in cui vi iscrivete ai vari feed, tutti gli ultimi post saranno evidenziati come da leggere, ma cliccando col tasto destro sul feed (o su una cartella) è possibile marcare tutti i post come già letti (sono presenti anche molte altre funzionalità, come la cancellazione dal feed o il suo spostamento in altra cartella).

Nell'area a destra sono elencati i vari post presenti nel feed (o nel gruppo di feed) che abbiamo selezionato a sinistra. I post vengono visualizzati in forma sintetica per una consultazione veloce, ma è possibile espanderli o andare direttamente alla sua versione online:

I vari link visitati vengono aperti all'interno dello stesso programma, che integra un browser a schede come le ultime versioni di Interent Explorer o Firefox. Devo dire talmente comodo che durante la consultazione dei blog non ho mai avuto il bisogno di utilizzare il browser effettivo.

In alto, è possibile filtrare se vogliamo elencati solo i post non letti o tutti, o cambiare l'ordinamento di lettura dei post. La barra dei pulsanti è personalizzabile, permettendo di aggiungere moltissime funzioni, in modo da averle sempre a portata di mano:

E' inoltre possibile effettuare ricerche nei vari post, con uno strumento molto completo che permetterà di cercare il testo voluto sia nei titoli che nel contenuto dei vari post:

Le funzionalità di FeedDemon sono davvero ancora tante, consiglio di provarlo per farsi un'idea, magari iscrivendosi a un solo blog e vedere come funziona. Personalmente sono riuscito finalmente a mettere un po' di ordine nei miei feed: quello che ho fatto fatica a portare avanti nei giorni scorsi su Google Reader, l'ho fatto in pochi minuti con questo programma.

Installazione di FeedDemon

E' possibile trovare sempre l'ultima versione disponibile del programma sul sito ufficiale: basta cliccare su "Free Download" per scaricarlo e tranquilli che non verranno installati elementi disonesti nel vostro pc. Il programma non visualizza neanche pubblicità.

Durante l'installazione, vi verrà richiesto se volete iscrivervi a dei feed consigliati da NewsGator: io sconsiglio di farlo perchè sono davvero tanti e tutti in inglese.

Se avete difficoltà con la lingua, durante l'installazione basterà comunque andare sempre avanti.

Registrazione a NewsGator

La registrazione al servizio di NewsGator può essere effettuata direttamente dal programma: dopo l'installazione, verrà richiesto se si dispone già di un account o se si vuole crearne uno nuovo. In quest'ultimo caso, basta inserire nome utente e password, e opzionalmente un indirizzo email nel caso in cui perdeste i dati, e il gioco è fatto.

Importazione dei feed in FeedDemon

E' possibile importare feed esistenti da File->Import Feeds:

E' possibile scegliere di importare i feed raccomandati (gil stessi che propone in fase di installazione), scegliere un file OPML (un file che contiene un elenco di feed), o importarli da altri servizi (purtroppo non è possibile importarli da Google Reader).

Trasferire i feed da Google Reader a NewsGator

Per chi avesse questa necessità, come l'ho avuta io, spiego come trasferire i feed da Google Reader a NewsGator. Basta accedere a Google Reader, cliccare su Gestisci iscrizioni (in basso a sinistra) e successivamente su Importa/Esporta:

Clicchiamo su Esporta le iscrizioni come file OPML, e scegliamo il file da creare. Successivamente, entriamo in FeedDemon e da File->Import Feeds selezioniamo Import an OPML file e scegliamo il file che abbiamo creato da Google Reader. A questo punto basta andare avanti per trovare i nostri feed dentro FeedDemon.

L'unico inconveniete è che non saprete più quali post avete letto o meno, perchè FeedDemon è la prima volta che li vede e ve li segna tutti come da leggere. In questo caso, come ho detto prima, è sempre possibile segnarli velocemente come tutti già letti.

Client desktop per Google Reader

Ne esistono ma non ai livelli di FeedDemon, che allo stato attuale ritengo il miglior client per un reader online. Oltretutto NewsGator non ha niente da invidiare a Google Reader in questo momento.

Tuttavia se siete interessanti può diventare argomento di un prossimo post.

Template per Blogger/Blogspot [101 - 110]

A grande richiesta, ecco una nuova selezione di template per Blogger. Anche in questa selezione ci sono temi davvero originali e guardando in giro vedo che la qualità migliora sempre di più. Come sempre aggiungo il link all'articolo originale scritto dall'autore del template, dove potrete trovare (qualora fosse necessario) maggiori informazioni sulla personalizzazione del template.

Per una guida veloce su come cambiare il template del vostro blog, vi rimando a questo post.

 

Zinmag Remedy

vedi - scarica - articolo originale - autore

 

Color Paper

vedi - scarica - articolo originale - autore

 

erkek bilogu

vedi - scarica - articolo originale - autore

 

Snow White

vedi - scarica - articolo originale - autore

 

Blue Revo

vedi - scarica - articolo originale - autore

 

Article

vedi - scarica - articolo originale - autore

 

Greeneetoz

vedi - scarica - articolo originale - autore

 

Blue Magz

vedi - scarica - articolo originale - autore

 

Awake

vedi - scarica - articolo originale - autore

 

Buttons

vedi - scarica - articolo originale - autore

Inizia l'anno nuovo!

I problemi tecnici non sono finiti, ma stranamente da quando ho fatto richiesta di disdetta al mio attuale gestore non ho più avuto problemi di connessione... che strano caso, vero? Ma questo mi ha permesso però di riprendere in mano il blog, sperando che la connessione tenga almeno fino alla prossima settimana, quando verrà il tecnico del nuovo gestore.

In posta ho trovato un'enormità di mail e un mare di commenti nel blog, ho già cominciato e poco alla volta spero di riuscire a rispondere a tutti, ma abbiate pazienza. Ringrazio chi ha linkato il mio blog (che col nuovo aggiornamento ha raggiunto pagerank 4!!), e poco alla volta ricambierò tutti, man mano che sfoltirò le mail. E saluto i nuovi lettori: gli iscritti al feed sono diventati aumentati di un centinaio, in queste feste! Bello, nuovi blogger e nuovi blog da conoscere!

Da domani ricomincerò a pubblicare i miei articoli, come sempre cercando di rispondere alle richieste che più spesso mi vengono fatte. Nel frattempo voglio ringraziare tutti quelli che mi hanno lasciato e continuano a lasciarmi auguri di buon anno... spero che questo 2009 sia un anno positivo per tutti... Io e mia moglie abbiamo passati bene queste feste, ci siamo divertiti, ci siamo rilassati, e abbiamo cercato di sbrigare i mille lavoretti che si rimandano per motivi di tempo.

Per quanto mi riguarda ho qualche nuova idea per il blog per quest'anno, vedremo. Per recuperare il tempo perduto, pubblicherò anche in questo fine settimana.

Orazio