Pubblicato il 16/06/11 - aggiornato il  | 13 commenti :

Come creare dei link interni a singoli paragrafi dell'articolo.

Avrete certamente avuto modo di leggere delle pagine web che mostrano all'inizio l'elenco dei paragrafi in cui è suddiviso il contenuto. Cliccando sopra a ciascun link si resta nella pagina ma si va all'inizio del paragrafo prescelto. Forse è più complicato spiegarlo che vederlo di persona. Andate su

Se cliccate su uno dei paragrafi dell'indice, sarete immediatamente condotti al contenuto senza che venga rinfrescata la pagina. Il metodo che vado a illustrare è quindi decisamente preferibile a quello dei Segnalibri che avevo avuto modo di presentare qualche tempo fa. Il funzionamento è lo stesso ma in quel caso viene ricaricata la pagina con una certa perdita di tempo. Nell'articolo di demo che ho appena linkato il passaggio al paragrafo è invece istantaneo. Altra prerogativa che rende questo metodo migliore è che non occorre conoscere preventivamente l'URL del post e quindi non occorre pubblicare l'articolo due volte.

Faccio l'esempio di tre paragrafi ma possono essere un numero indefinito. Si va nel post in Modalità HTML e nell'indice dell'articolo si inseriscono le seguenti tag

<a href="#paragrafo1">Titolo paragrafo 1</a>
<a href="#paragrafo2">Titolo paragrafo 2</a>
<a href="#paragrafo3">Titolo paragrafo 3</a>

al posto di paragrafoX possiamo usare anche altre espressioni. L'importante è che ci sia corrispondenza con i tag che metteremo nel titolo di ciascun paragrafo

<a name="paragrafoX">Titolo del paragrafo X</a>

… Testo del paragrafo X

e così via per tutte le altre sezioni che sono state inserite. Se si usa l'Editor di Blogger bisogna avere l'accortezza di pubblicare l'articolo solo dopo aver controllato l'HTML perché Blogger introduce automaticamente dei nuovi link che possono vanificare il funzionamento dell'hack

  image
Prima o dopo che sono stati inseriti i collegamenti, si possono formattare i titoli delle sezioni come si vuole variandone le dimensioni dei caratteri, i colori, lo stile e inserendo altri parametri. Si tratta di una metodologia utilissima per i blog che sono soliti pubblicare degli articoli molto lunghi.



13 commenti :

  1. ma è quello che stavo cercando da una vita per realizzare un elenco alfabetico. Inserendo le lettere con i link relativi sulla stessa pagina! Perfetto, lo provo subito come ho un attimo di tempo ;)

    RispondiElimina
  2. Ciao Parsifal,
    come da tuo consiglio sto cercando di utilizzare questo espediente per una delle pagine statiche del mio blog in cui ho inserito delle ricette.
    Quando entri nella pagina c'è l'elenco delle ricette in ordine alfabetico, e sotto le ricette per intero.
    Voglio quindi far sì che quando un utente clicca sul titolo di una ricetta finisca direttamente alla ricetta stessa.
    Sono entrata nella pagina, ho cliccato su html ma non riesco a capire come devo procedere e dove devo inserire le stringhe che hai elencato sopra... Forse cambia qualcosa, essendo una pagina statica?
    Grazie, e grazie per la pazienza :)

    (P.S. Buon anno!)

    RispondiElimina
  3. @Dieta e Dintorni
    Non cambia nulla. Se non funziona significa che hai sbagliato. Guarda la Demo

    http://design-prova.blogspot.com/2011/06/demo-dei-link-interni-un-articolo.html

    Ogni paragrafo ha un link come

    http://design-prova.blogspot.com/2011/06/demo-dei-link-interni-un-articolo.html#paragrafo1
    http://design-prova.blogspot.com/2011/06/demo-dei-link-interni-un-articolo.html#paragrafo2
    http://design-prova.blogspot.com/2011/06/demo-dei-link-interni-un-articolo.html#paragrafo3

    mentre per ottenere questo effetto nei titoli dei vari paragrafi sono state inserite queste tag

    <a name="paragrafo1">Titolo del paragrafo 1</a>
    <a name="paragrafo2">Titolo del paragrafo 2</a>
    <a name="paragrafo3">Titolo del paragrafo 3</a>

    RispondiElimina
  4. Non bisogna inserire l'URL del post ma solo il cancelletto in questo modo

    <a href="#paragrafo1">Titolo paragrafo 1</a>
    <a href="#paragrafo2">Titolo paragrafo 2</a>
    <a href="#paragrafo3">Titolo paragrafo 3</a>

    E' spiegato tutto in dettaglio.

    RispondiElimina
  5. Il fatto è che, una volta entrata in modalità html, non riesco a trovare i link dei paragrafi di cui parli tu; gli unici indirizzi che vedo sono quelli delle immagini, che sono pressapoco così http://1.bp.blogspot.com/-8Cd6kgR-mHE/Trb8upDRv1I/......./OlYil2iQS2g/s1600/Caponata+di+verdure+al+forno.JPG" imageanchor="1"
    Credo siano quelli delle immagini perchè terminano in .jpg.
    Ho visto che alla fine c'è anche quel "imageanchor="1"; magari potrei cercare di collegare il nome della ricetta all'immagine?

    RispondiElimina
  6. @Dieta e Dintorni
    Non li trovi i link, li devi mettere te!!!!

    RispondiElimina
  7. Ciao Ernesto!
    Volevo chiederti una cosa:
    mi piacerebbe all'interno di una pagina statica, creare una sorta di menu' in modo che per ogni link mi compaia il contenuto relativo...
    È possibile?

    Grazie mille :)

    RispondiElimina
    Risposte
    1. @Dalila
      Ti potrei postare anche un elenco di un centinaio di menù ma forse puoi cominciare a vedere se ce n'è qualcuno che ti piace qui
      http://www.ideepercomputeredinternet.com/2011/03/i-migliori-menu-per-blogger.html

      Elimina
  8. E' molto utile questa funzione! l'ho usata in una pagina statica. L'unico problema è che a ogni minima modifica della pagina succede quello che descrivi qui:
    Se si usa l'Editor di Blogger bisogna avere l'accortezza di pubblicare l'articolo solo dopo aver controllato l'HTML perché Blogger introduce automaticamente dei nuovi link che possono vanificare il funzionamento dell'hack.

    e ogni volta mi tocca risistemare l'html, cancellando i link modificati da blogger :(

    RispondiElimina
  9. Ciao Ernesto,
    ho inserito il plugin di mybloggertricks Create Table Of Contents (TOC) With Multi-level List In JavaScript per creare un indice tipo Wikipedia. Ma ho un problema: si ripete il numero, per esempio 1 Idee per Computer, 1.1 Indice tipo Wikipedia diventano 1.1 Idee per Computer, 1.1.1 Indice tipo Wikipedia. Cioè ripeto il primo numero. Hai qualche idea in merito. Non riesco a venire a capo.
    Grazie mille.

    RispondiElimina
    Risposte
    1. Ti riferisci a questo?
      http://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html
      Prova a chiedere all'autore. Vedo che ci sono diversi commenti a cui ha risposto quindi puoi fare presente il problema
      @#

      Elimina
  10. Ciao Ernesto,
    sto facendo una prova con il TOC (Table of Contents) in un sito web (non blog) e non riesco ancora a venire a capo. Non è che per caso hai sviluppato qualche script apposta per i siti web (non Blogger).
    Grazie e buon weekend

    RispondiElimina
    Risposte
    1. No, non vedo una grande utilità, probabilmente sbagliando :)
      @#

      Elimina

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