Aggiungere delle note con link in fondo ai post di Blogger e Wordpress.

Come aggiungere delle note nei post di Blogger e di Wordpress che saranno aperte linkando il simbolo inserito nel testo.

Ho appena ricevuto una richiesta su una personalizzazione di un articolo di qualsiasi piattaforma per potervi inserire delle note cliccabili. Se ho capito bene la richiesta fattami ma penso proprio di sì mi si chiede se sia possibile inserire delle Note in un post mediante una simbologia standard come l'aggiunta di un asterisco.

Cliccando sul simbolo della Nota che può essere scelto dall'amministratore del blog il lettore dovrà essere indirizzato in calce al post esattamente all'inizio della Nota in oggetto.

La soluzione che ho trovato si basa sulla creazione dei link interni per aprire la nota in automatico. Si può anche personalizzare l'aspetto delle Note che solitamente vengono mostrate in corsivo.

Il procedimento che vado a illustrare ha come base un blog su piattaforma Blogger ma può essere applicato a tutte le piattaforme di blogging visto che utilizza solo tag HTML e non tag specifici di Blogger.

Come vedremo su Blogger c'è la difficoltà che questi codici debbono essere inseriti aprendo l'Editor e andando su HTML senza tornare su Scrivi altrimenti Blogger aggiungerà di default dei link automatici che vanificheranno i collegamenti precedentemente inseriti.

COME AGGIUNGERE UNA NOTA A UN POST

Ho pensato di aggiungere una nota con un numero d'ordine che segue un asterisco entrambi compresi tra due parentesi tonde. Una nota può essere aggiunta dopo una parola o alla fine di un paragrafo in questo modo (*1).

Chi cliccherà su tale nota verrà mandato a fondo post esattamente alla nota in oggetto. Per aggiungere le Note si aggiunge in Modalità HTML un codice come il seguente

<a href='#Nota1'><b>(*1)</b></a>
<a href='#Nota2'><b> (*2)</b></a>
<a href='#Nota3'><b>(*3)</b></a>

che aggiunge tre Note. Naturalmente si usa una riga per volta e i tag <b> e </b> che servono per mettere la nota in grassetto sono opzionali. Anzi invece del grassetto si può mettere la Nota in corsivo con i tag <i> e </i>che sono anche più giusti stilisticamente. Saranno visibili solo i caratteri colorati di blu e si possono aggiungere anche un numero di note superiore a tre utilizzando la stessa sintassi (*2).

COME RICHIAMARE LE NOTE IN CALCE AL POST

Per richiamare le Note in fondo pagina dovrà innanzitutto creato il testo delle varie note presenti nella pagina che dovranno poi richiamare lo stesso ID del codice precedente. Ecco un esempio di codici di 3 Note:

<p id='Nota1'>(*1) - Questa è la Nota collegata al link sulla Nota1.</p>
<p id='Nota2'>(*2) - Questa è la Nota collegata al link sulla Nota2.</p>
<p id='Nota3'>(*3) - Questa è la Nota collegata al link sulla Nota3.</p>

Dopo aver creato i collegamenti delle note presenti nel post si pubblica l'articolo come al solito.

COME PERSONALIZZARE L'ASPETTO DELLE NOTE

Gli utenti di Blogger ma anche di altre piattaforme possono personalizzare l'aspetto delle Note aggiunte in calce al post. Lo si può fare aggiungendo delle regole CSS per le tre note aggiunte che ricordo possono essere anche di più. Si va su Tema -> Modifica HTML e si cerca la sezione <b:skin> che si trova intorno alla decima riga. Si clicca sulla freccetta nera presente sulla sinistra per visualizzare tutto il codice della sezione (*3).

Con Ctrl+F si cerca la riga ]]></b:skin> e subito sopra a questa si incolla questo codice

#Nota1,#Nota2,#Nota3 {font-size:12px; font-style:italic;}

Si possono aggiungere anche altri ID separati da virgole come Nota4, Nota5, ecc. In questo modo potrà essere settata la dimensione dei caratteri del testo e mostrati in corsivo (*4).

Il risultato sarà simile al seguente

NOTE FINALI INSERITE ANCHE COME DEMO

(*1) - Se si modifica il post andando su Scrivi,  Blogger inserirà dei link arbitrati alla Bacheca che vanificheranno il lavoro svolto. Se si dovesse modificare il post con Scrivi occorrerà inserire nuovamente i link delle Note.

(*2) -  Dopo aver letto la Nota il lettore potrà tornare al punto in cui ha interrotto la lettura del post semplicemente cliccando sulla icona Indietro del browser per tornare alla pagina precedente. Infatti l'URL della Nota sarà diverso da quello della pagina visto che vi viene aggiunta la stringa #Nota1 o #Nota2 o #Nota3 .

(*3) - Nella personalizzazione dell'aspetto della nota possono essere aggiunti altri tag come quello del colore (p.e. color:#f00;), del grassetto (p.e. font-weight:bold:), ecc.

(*4) - Gli utenti di Wordpress potranno inserire il terzo codice subito sopra alla riga </head> nella Testata dell'Editor dopo averlo inserito tra i due tag <style> e </style>.