Pubblicato il 21/07/17 - aggiornato il  | 7 commenti :

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-calce-post-blogger

NOTE FINALI INSERITE ANCHE COME DEMO

(*1) - Se si modifica il post andando su ScriviBlogger 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>.



7 commenti :

  1. Sembra che a me non funzioni, potrebbe essere il tema che utilizzo?

    RispondiElimina
    Risposte
    1. No. È che sei tornato su Scrivi e Blogger ha aggiunto link alla Bacheca. Oppure non hai copiato bene il codice. Questo sistema funziona in tutte le pagine web
      @#

      Elimina
    2. Ho riprovato ed effettivamente funziona, anche se da browser su pc desktop cliccando la nota si viene rimandati un po' più giù del dovuto, ma questo ovviamente non è un problema del codice. Su visualizzazione mobile funziona tutto a dovere. Grazie!

      Elimina
  2. Puoi lasciare una riga in bianco prima della nota se la fa visualizzare troppo attaccata al top della pagina
    @#

    RispondiElimina
  3. Ottimo articolo! Sono settimane che ci provo e non c'ero mai riuscita. Una domanda: com'è che la nota non mi riporta esattamente all'altezza della nota ma un po' più giù? Conta che io ho anche il menu in alto che mi copre più testo.

    RispondiElimina
  4. Sono al cellulare e non posso testare. Puoi provare a risolvere in un paio di modi. Il primo è quello di saltare una o due righe prima di scrivere la nota e dopo aver inserito lo ID nel paragrafo.
    Puoi anche provare a aggiungere una riga di codice nel CSS della nota tipo margin-top;30px oppure padding-top;30px cercando di trovare i pixel giusti.
    @#

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy