Pubblicato il 08/07/15e aggiornato il

Come creare dei link interni a una pagina divisa in capitoli.

Come creare un indice in un post suddiviso in Capitoli con i link che rimandano all'inizio di ciascuno di essi.
Forse il titolo non è del tutto comprensibile e allora è bene fare l'esempio del post che ho appena pubblicato dal titolo 170+ Blogger Responsive Template che presenta ben 174 modelli Responsive per Blogger suddivisi in categorie ciascuno di questi con il link alla demo e alla pagina di download.

Si tratta di un articolo molto lungo e per spostarsi al suo interno è bene inserire un sistema di navigazione per facilitare l'esperienza dei lettori. Dopo un incipit che illustra il tema trattato nel post ho inserito una sorta di indice delle Categorie dei vari modelli che sono ben 26. Ciascuna categoria ha un collegamento e, se ci cliccate sopra, non aprirete un'altra pagina ma andrete all'inizio del capitolo o della sezione descritta nel testo di ancoraggio.

Per fare un esempio pratico cliccando sull'elemento che è al 14-esimo posto dell'elenco cioè Responsive Gossip Blogger Templates si visualizzerà il corrispondente titolo con i modelli a partire da quello al 157° posto. Attraverso i link quindi si possono creare dei collegamenti interni alla pagina.

collegamento-interno

Nella fattispecie è stato creato un collegamento tra il link della 14-esima riga e il titolo visibile proprio al top della pagina. Questo può o meglio deve essere fatto per tutti gli elementi dell'indice in modo da associarvi l'inizio del relativo capitolo.

Continuiamo con gli esempi. Se cliccate con il destro del mouse sulla 14-esima riga appena ricordata e scegliete Copia Indirizzo link troverete l'indirizzo

http://www.ideepercomputeredinternet.com/2015/07/blogger-responsive-template.html#Gossip

che non è altro che l'indirizzo del post seguito da #Gossip. In tutte e 26 le righe con la stessa operazione si otterranno indirizzi con la prima parte l'URL del post seguiti da rispettivamente #Magazine, #Blog, #Portfolio, #Minimalist, #Photography, ecc.

Quello che è importante è che ci sia un ID univoco per ogni link. In sostanza la prima operazione sarà quella di creare un link virtuale di questo genere

<a href='#Gossip '>Responsive Gossip Blogger Templates</a>

dove ho preso la stessa riga di esempio. Le altre sarebbero

<a href='#Magazine'>Responsive Magazine Blogger Templates</a>
<a href='#Blog'>Responsive Personal Blog Blogger Templates</a>
<a href='#Portfolio'>Responsive Portfolio Blogger Templates</a>, ecc

Per creare questi link si può usare l'Editor di Blogger. Si seleziona il testo di ancoraggio del link e come Indirizzo del collegamento si inserisce l'ID che si è scelto preceduto dal cancelletto.

inserire-link-interni-pagina

In questa operazione bisogna ricordarsi di togliere la spunta a Apri questo link in una nuova finestra perché altrimenti l'Editor aggiungerebbe il tag target="_blank". Con questa operazione si otterrà lo stesso codice che abbiamo visto sopra.

COLLEGARE LINK A TITOLO


Ora dobbiamo collegare il link appena inserito all'inizio del capitolo corrispondente per fare in modo che se per esempio si clicca sul link con ID #Gossip si apra la pagina proprio nel punto giusto. I titoli delle varie sezioni si possono creare con diversi tag. Si può per esempio usare un <div> per poi semplicemente scegliere un carattere più grande. Si può anche usare il tag <p> e fare la stessa cosa. Per fare le cose più semplici ammettiamo che per i titoli si utilizzi il tag <h2> che nell'Editor corrisponde a Intestazione. Si possono però usare anche Intestazione Secondaria con il tag <h3> o Minore con <h4>.

intestazione-blogger

Per collegare tale titolo al link corrispondente dovremo aggiungere id='Gossip' in questo modo

aggiungere-id-titolo

Viene quindi una cosa tipo <h2 id='Gossip'> e ricordo che la cosa funziona lo stesso con <h3 id='Gossip'>, <p id='Gossip'>, <div id='Gossip'>, <h4 id='Gossip'>, ecc.

Le cose da ricordare sono che mentre nel link l'ID deve essere preceduto dal cancelletto (Es: #Gossip) nel codice del titolo va messo senza cancelletto (Es: id='Gossip'). Un'altra cosa importante è che si tratta di stringhe case sensitive cioè Gossip è diverso da gossip. Dovremo quindi aggiungere tutti gli ID ai link e ai corrispettivi titoli iniziali dei rispettivi capitoli.

COME INSERIRE UN LINK PER TORNARE ALL'INIZIO


Oltre a questi collegamenti possiamo aggiungere un nuovo collegamento virtuale alla fine del capitolo per tornare a inizio pagina. Si usa la stessa tecnica. Nel primo paragrafo dell'articolo o nel titolo del primo capitolo inseriamo questo ID specifico

<p id='inizio'>Questo è l'inizio del post….

Dove vogliamo immettere un link con un rimando a inizio post inseriremo questo codice

<a href='#inizio'>Torna all'inizio della pagina</a>

PROBLEMATICHE CON L'EDITOR DI BLOGGER


Con L'Editor di Blogger purtroppo le cose si complicano alquanto. I tag id inseriti rimangono invariati mentre i collegamenti cambiano in modo automatico quando si va da HTML a Scrivi. Facciamo un esempio pratico e proviamo a incollare in modalità HTML questi pseudo link

<a href='#Magazine'>Responsive Magazine Blogger Templates</a>
<a href='#Blog'>Responsive Personal Blog Blogger Templates</a>
<a href='#Portfolio'>Responsive Portfolio Blogger Templates</a>

Se si va su Scrivi e poi si torna su HTML vedremo il codice completamente cambiato

modifica-codice-blogger

dove la parte aggiunta è stata evidenziata di giallo. Quando un link non è completo Blogger aggiunge di sua iniziativa un collegamento con l'ID del post. Se noi pubblicassimo l'articolo in questo modo e cliccassimo nei link che avevamo preparato si aprirebbe la Bacheca del blog in oggetto.

Quindi dopo aver confezionato tutto il post dovremo tornare sempre su HTML e togliere le aggiunte di Blogger. Questo vale anche per i codici di widget che venissero pubblicati in un post o in una pagina statica. Bisogna sempre pubblicare da HTML e il codice dovrà essere controllato prima di procedere. Questo va fatto ogni volta che per qualche ragione si apra il post per modificarlo. Questi link interni o Segnalibri o Indici di navigazione possono essere creati anche con altre piattaforme.

Concludo ricordando che al posto del tag id possiamo usare il tag name. Cioè si può inserire nel titolo <h2 name='Magazine'> al posto di <h2 id='Magazine'> lasciando invariato tutto il resto. 




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.