Blogger - personalizzare elementi della pagina non direttamente modificabili

I template e i temi presenti in Blogger non sono affatto male. Diciamocelo: se abbiamo scelto una piattaforma come Blogger -o altre- per pubblicare i nostri contenuti, è perché non vogliamo avere a che fare con installazioni, codici, aggiornamenti e modifiche (e non dimentichiamo i costi di un servizio di hosting) che inevitabilmente richiederebbero da parte nostra un po' di impegno e tempo.

Nonostante la buona duttilità e funzionalità della piattaforma Blogger, però, potremmo avere l'esigenza o la voglia di modificare qualche elemento presente nella pagina (come un menù laterale, ad esempio) che non sia direttamente accessibile tramite il pannello di amministrazione (Layout; Modello -> Modifica HTML; Modello -> Personalizza). In questo piccolo tutorial vi mostrerò brevemente come sia possibile personalizzare un menù laterale tramite qualche piccola stringa di codice di stile da inserire o nel layout o all'interno del modulo stesso (in caso di modulo HTML/Javascript).

La personalizzazione di un elemento qualsiasi della pagina è possibile grazie all'identificazione precisa del suddetto. In altre parole, dobbiamo fare in modo che le istruzioni che andremo ad immettere vadano ad influire solo e soltanto sull'elemento che abbiamo scelto.

Facciamo un esempio pratico. Poniamo il caso che vogliamo mettere in evidenza uno dei moduli laterali. Nel mio caso, ho scelto di dare risalto al riquadro contenente il tasto "mi piace" per la mia pagina Facebook (guarda questa mini-guida su come inserire il tasto "mi piace" della tua pagina sul tuo blog).

Il risultato finale è questo:

Ma andiamo con ordine.

Se non volete la spiegazione dettagliata, leggete soltanto le parti in grassetto rosso :)

Per prima cosa dobbiamo creare il nostro riquadro.

Create il vostro modulo tramite il pannello Layout in amministrazione ed inseriteci un titolo che vi permetta di identificarlo subito (tipo "modulo da modificare"). Potrete cambiare successivamente il nome cliccando sullo stesso modulo dal pannello di amministrazione. Se non volete inserire un titolo, badate che all'interno del modulo ci sia una scritta che o qualcosa che vi permetta di identificarlo subito. Nel mio caso ho scelto un modulo Html Javascript e non ho inserito alcun titolo, ma lo posso identificare grazie alla scritta che ho inserito prima del tasto di Facebook. Prima di inserire il codice html/javascript, è necessario cliccare su "modifica html" (solo nel caso di questo modulo)

<p>Adesso siamo anche su Facebook! :D</p>
<div class="fb-like" data-href="https://www.facebook.com/coseinutilidasapere" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>

Per personalizzare avere il colore desideravo (il Blu Facebook) alla scritta, ho apposto una stringa di codice prima e dopo di essa.

<p style="color:#6079ab;"><b>Adesso siamo anche su Facebook! :D</b></p>

Adesso: come identifichiamo correttamente il modulo che vogliamo personalizzare?

Ci sono due modi.

Personalmente, preferisco il secondo, perché più immediato e completo. Ma l'integrazione delle due cose, per chi è alle prime armi o semplicemente fa tutto questo ad un livello più che amatoriale, è sempre utile al fine di capire il funzionamento del codice.

• Tramite la visualizzazione della sorgente HTML.
• Tramite un plugin di Firefox. (presumo che ne esistano di equivalenti anche per Chrome e I.Exloprer, ma io adoro Firefox)

a) Identificare il modulo tramite la Sorgente della Pagina.

1. Andate sulla pagina del vostro blog.
2. Scegliete dal menù del vostro browser la funzione "visualizza sorgente pagina" (per Firefox: -> strumenti -> sviluppo web -> sorgente pagina // per Chrome: -> menù a destra -> strumenti -> visualizza sorgente) // Per Internet Explorer -> visualizza -> origine).
3. Adesso ricercate all'interno dell'ammasso di codice il titolo del vostro modulo o la frase che avete inserito per individuarlo. Per effettuare la ricerca basta permere insieme i tasti "ctrl" + "F" oppure andare in "modifica" e scegliere "trova".
4. A noi interessa l'ID del modulo, l'identificativo del contenitore in questione. Come vediamo nell'immagine sottostante, si tratta del parametro "id" appena prima di questa stringa di codice:

<div class='widget-content'>

 oppure, se abbiamo inserito un titolo, appena prima di

<h2>Archivio blog</h2>

In questo caso l'id è "HTML6". Blogger crea in automatico questi identificativi basandosi sul tipo di modulo (HTML) e l'ordine di creazione (questo è il 6° che creo).

b) Identificare il modulo tramite un plugin di Firefox.

1. Andate in strumenti -> componenti aggiuntivi. Cercate (con la casella in alto a destra) Web Developer (di Chrispederick) ed installatelo. In alternativa potete prenderlo dal sito ufficiale del plugin (chrispederick.com).
2. Andate sulla vostra pagina di blogger. Andate in strumenti, web developer, information -> display Id & Class Details. Appariranno una miriade di riquadri che evidenzieranno la struttura della pagina web.
3. Focalizziamo la nostra attenzione sul modulo che vogliamo esaminate. Vedremo che, prima della class "widget-content" c'è il nostro id contrassegnato dal #. Nei fogli di stile, il punto "." contrassegna le classi, che sono altra cosa. Dunque il nostro id è ciò che si trova prima del punto, e cioè #HTML6.

Una volta identificato il nostro id, siamo pronti ad inserire la personalizzazione.

Personalizzazione:

1. Rechiamoci in Layout - Modifica Html. Se si tratta di un modulo HTML/Javascript, potete inserire il codice direttamente all'interno del modulo, prima del resto del codice.
2. Clicchiamo nel riquadro dove c'è il codice e premiamo sulla tastiera la combinazione di tasti "ctrl"+"F" e cerchiamo il tag di chiusura "</head>. Appena prima di questo tag, andiamo ad apporre la nostra stringa di codice.

   
   

   <style>

   #HTML6 {border-color:#6079ab; border-width:5px;}

   #HTML6 h2{color:#6079ab;}

   </style>

Ovviamente al posto di HTML6 dovrete inserire il vostro ID. Per la modifica di questo codice, dovreste avere un minimo di conoscenza di CSS. I parametri che più vi possono interessare, comunque, sono questi:

color - indica il colore del testo all'interno di questo riquadro.

background-color - indica il colore dello sfondo.

border - può modificare il bordo del riquadro. Si possono modificare tratteggio, spessore, colore etc.

Poiché questa guida non si propone di insegnare alcunché sull'utilizzo dei fogli di stile né dare lezioni di programmazione (basilare), e, invece, si prefigge di mostrare solo una via rapida per modificare alcuni parametri, per ulteriori informazioni riguardo le possibilità e i modi per intervenire sullo stile degli elementi della pagina (cioè, i fogli di stile -css-, etc) rimando al sito w3schools.com.

Salvate tutto. Il vostro layout adesso è veramente personalizzato!