Otto utili hack per il template di Blogspot

Come ho accennato nel post sugli strumenti utili per i blogger, avevo pensato di dedicare un post a come modificare un template di Blogspot, ma le cose non sono andare lisce come me le ero immaginate. Per cui, dopo aver cestinato l'dea di questo post diverse volte (prima era troppo semplicistico, poi mi è venuto in pippone tecnico insostenibile, poi era un pelo meno tecnico ma sempre illeggibile), ho deciso di limitarmi all'essenziale e a provare a fare una lista dei otto hack più rilevanti che ho fatto al mio template (nonché, da quando ho fatto il restyle, gli unici!). Alcuni hack che ho fatto al mio template sono estetici (tipo i numeretti ai commenti) altri sono strategici (tipo i tag Alt e Title alle immagini).
Vediamo nel dettaglio dopo il salto.

Premesse 

---

Premessa 1: Google cambia occasionalmente il codice dei modelli. Anche se sembrano esteticamente sempre uguali, aggiorna la tecnologia che vi sta dietro, rendendo obsolete le release precedenti. Chi avesse un template più vecchio di un paio d’anni dovrebbe pensare a dargli una rimodernata, visto che sono cambiate diverse cose.

Premessa 2: Prima di toccare il template del proprio blog è sempre buona norma farsi una copia di backup di quello vecchio, per evitare spiacevoli situazioni. Per ottenere una copia di backup del proprio template basta andare su Modello e poi su Backup/Ripristino. Si aprirà una scheda con due sezioni. Sopra scarica il template e sotto permette di ricaricarlo.

NOTA BENE: Tutti gli hack di cui parlo non li ho scritti io ma mi sono simpaticamente servita da fior fiore di siti di esperti che queste cose le producono su base quotidiana (con tanto di simpatiche istruzioni per l'uso)!

Due parole di introduzione

---

Avevo inizialmente strutturato questo post con la pretesa di spiegare un po' di HTML e di CSS ma ho deciso di fare retromarcia. Perché? Perché ci sono fior fiore di siti più o meno tecnici che ne parlano e non è mia intenzione tenere qui una lezione su come si maneggi del codice. Ora, da informatica, posso dire che l'HTML e il CSS sono due linguaggi facilissimi da gestire e che, soprattutto, nessuno di due morde! Il primo costruisce fisicamente gli oggetti della pagina (testo, immagini, tabelle, ecc), mentre il secondo si occupa dello stile. Toccando quest'ultimo si possono cambiare colori, stili, bordi, sfondi, font e tutto quello che concerne l'aspetto estetico degli oggetti che compongono la pagina, creando una regola valida per l’intero blog (in soldoni, quando si usa l'interfaccia grafica di Blogspot raggiungibile da Modello/Personalizza/Avanzato, si sta andando a modificare i CSS). Quasi tutti gli hack grafici che ho impiegato sul mio blog hanno due parti: una in HTML (spesso con delle parti in JavaScript che contengono il codice operativo vero e proprio, parti che tanto non è necessario toccare) e un CSS che fornisce il foglio di stile.

Prima di partire a lavorare sul template, è necessario scegliere i colori da utilizzare per l'intera struttura. Pensarci bene è d'obbligo perché questo influenzerà la riuscita dell’intero aspetto grafico del blog. Da evitare assolutamente sono i colori troppo accesi (come il rosso intenso, il giallo canarino, il blu elettrico e il verde pisello) e, personalmente, sconsiglio anche il nero per lo sfondo dei post, visto che potrebbe dare dei problemi di lettura (con il monitor di casa non me ne rendevo conto, ma dal portatile dell’ufficio è una tragedia leggere i post a sfondo nero, specie se scritti molto piccoli).

La palette di colori che uso io è la seguente:

Le lettere nel codice RGB sono in realtà numeri, essendo in codice
esadecimale si conta fino a sedici e le lettere da A a F rappresentano i caratteri
da 10 a 15, che nel codice decimale non esistono

Come potete vedere dall’immagine ci sono tre colori base (i tre azzurri) con cui ho fatto quasi tutti gli interventi, più una variante molto scura per i bordi dei contenitori (il blu), un grigino per i link cliccati e un jolly (il rosso). Il colore jolly non verrà mai usato nella creazione del template ma è il rosso con cui evidenzio le parole in grassetto nel testo (tutte evidenziate a manina perché se dessi una regola nel CSS, allora tutti i grassetti diventerebbero rossi, cosa che non voglio).

I dieci hack che ho usato

---

Ora smetti di fissarlo, se ci riesci!

1) Read more custom

Serve per personalizzare il pulsante Continua a Leggere, rendendolo maggiormente evidente. Diverse persone mi hanno segnalato, nel tempo, che il pulsante Continua a Leggere non era particolarmente visibile, per cui sono corsa ai ripari cercando di renderlo sempre più grosso e appariscente. Adesso si vedrà abbastanza? Questo semplice hack è da effettuare in due passaggi. Il primo prevede di rimuovere la scritta attualmente presente, mentre il secondo di aggiungere un nuovo salto! Il codice aggiunto non presenta JavaScript.

2) Drop Menu

Si tratta del menu a discesa che ho in alto nel blog, subito sotto l'header. Passando sopra il mouse si aprono le sottocategorie e può essere annidato potenzialmente all'infinito. Il bello di questo gadget è che è completamente in Html e CSS, per cui non necessita di codice esterno e non effettua chiamate su altri siti per funzionare. Il modello originale linkato era sullo stile Facebook ma l'ho un po' personalizzato perché si adattasse meglio ai colori del mio blog.

3) Ti potrebbero anche interessare ... 

In questo caso ci sono due possibilità: usare il gadget chiamato LinkWithin o usare una versione personalizzata. Il primo ha il vantaggio di fare tutto da solo (ma ha lo svantaggio di fare un redirect verso il suo sito quando calcola il link di destinazione), mentre il secondo è diretto e completamente innestato nel template del blog, ma richiede un pelino più di manualità con il codice per essere installato. Se decidete di optare per il primo andate su questo sito e seguite le istruzioni. Fa tutto da solo e ve lo inserisce anche in Blogspot (basta seguire tutti i passaggi)! Se dovesse uscire un errore, niente panico. Basta tornare nella home di Linkwithin e scegliere Other al posto di Blogspot come piattaforma, genererà del codice da copiare e incollare in un gadget creato dal pannello di Blogspot/Layout e poi trascinato sotto la casella dei post. Se decidete, invece, di provare il secondo, cliccate qui per le istruzioni.

4) About author

Avete presente quel riquadro che compare sotto ai miei post, con il mio avatar e una breve descrizione? Ecco quello è frutto di una semplice modifica le cui istruzioni possono essere trovate a queste coordinate. Trovo questo hack di grande impatto visivo, specialmente per i lettori occasionali, che passando sul blog hanno la possibilità di scoprire, senza dover scartabellare troppo, chi sia l'autore del pezzo che hanno appena letto (o sfogliato).

5) Numero commenti con fumettino

Questo è un puro abbellimento grafico del blog: lo trovate a queste coordinate e si implementa senza grossi problemi, basta seguire le istruzioni.

6) Floating social bar

Questo è quella specie di rettangolo flottante che se ne sta alla sinistra della barra con i post, ricordando sempre che si può fare +1 Su Google Plus, mettere un like su Facebook o Retweetare il contenuto (i social coinvolti, tra l'altro, sono personalizzabili, quei tre sono quelli che ritengo maggiormente utili per il mio blog). Il bello di questa soluzione è che è sempre sotto gli occhi di legge! Qua trovate istruzioni e codice per installarla.

7) Tag Alt e Title per le foto

Forse non tutti sanno che le linee guida di Google prescriverebbero di assegnare ad ogni foto del blog (o almeno ad una nella pagina) i famigerati Tag Alt e Title. Cosa sono questi sconosciuti? Semplice sono quelle informazioni che saltano fuori quando l'immagine non è disponibile o che si mostrano sotto forma di tooltip quando ci si passa sopra il mouse. A cosa servono esattamente a Google? A raccogliere informazioni sul contenuto dell'immagine per meglio indicizzarla nel motore di ricerca Images. Ora se qualcuno non ci ha mai fatto caso e ora si trova con qualcosa come cinquecento post arretrati da sistemare, contenenti un valore compreso tra tre a cento foto (come è successo a me) c'è una soluzione semplice e estremamente efficace: aggiungere un pezzetto di codice che prenda il nome dell'immagine e lo utilizzi per riempire quei due famigerati campi in automatico per tutte le immagini del blog!
Rispetto alla versione originale ho aggiunto un tag condizionale di tipo <b:if cond='data:blog.pageType == &quot;item&quot;'> (ovvero che fa eseguire lo script solo nei post), per evitare che anche l'header e i pulsanti nel template subissero lo stesso trattamento. Ovviamente funziona meglio se nel corso del tempo sono stati dei nomi saggi alle foto (ovvero inerenti all'argomento trattato nel post che se i nomi sono stati messi a caso non è che aiutino poi molto Google).

8) Spoiler

In alcuni post ho usato i pulsanti Spoiler per nascondere del testo o delle immagini che potevano essere potenzialmente spoilerose. Purtroppo non ricordo da dove presi questa porzione di codice, per cui la scrivo direttamente qui, senza dare i dovuti credits all'autore. Se dovessi risalire a dove l'ho trovato sostituirò il pezzo:

<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Spoiler - clicca qui per aprire'; }" style="margin: 0px; padding: 0px;" type="button" value="Spoiler - clicca qui per aprire" />
</div>
<br />
<div style="background: transparent; border: 0px solid #000; margin: 10px auto; padding: 5px;">
<div style="display: none;">
TESTO SPOILER</div>

Questo codice va inserito così com'è nel corpo del post esattamente dove si vuole mettere il pulsante, sostituendo alla scritta TESTO SPOILER  con l'effettivo contenuto spoiler.

E queste sono le personalizzazioni che, ad oggi, ho applicato al mio blog. E tu? Che modifiche hai fatto? C'è qualche hack che hai voglia di consigliare? Cosa ne pensi delle mie? Ti piacciono oppure no?