Lavoriamo insieme ✨

Sei pronta a diventare la blogger che hai sempre sognato di essere?
Agire facendo il primo passo è un ottimo modo per cominciare ecco chi sono

Blogger in Azione

Blogger in Azione

Primi Passi

Primi Passi

F.A.Q.

F.A.Q.

Come creare un indice dei contenuti nel tuo post

27.11.20
Simona S.
9 commenti
Come creare un indice dei contenuti nel tuo post

In un post ricco di informazioni, per rendere la lettura scorrevole e piacevole, può risultare dividere il testo in paragrafi. Ancora più utile è facilitare la navigazione del post con un Menu Argomenti, che, grazie ai link interni, riesce a farti saltare da un punto all'altro sempre all'interno dello stesso post.

Sono certa che una delle domande che ti verranno in mente è: devo inserire il menu in tutti i post che pubblico? La mia personale opinione è no.




Di fatto in questo post avrei anche potuto non inserire un menu, perché non credo ce ne sia necessità; questo post è semplicemente un tutorial che si esaurisce in pochi, brevi passaggi. Nonostante ciò, ho voluto mostrarti il funzionamento dei link interni.

Ricorda, infatti, che quando scrivi sul tuo blog lo stai facendo per gli altri. Ogni tipo di contenuto è diverso dagli altri, e ciò che conta è il beneficio che l'utente ne deve trarre dalla sua esperienza di navigazione.


Come funzionano i link interni.

Essendo dei link, hanno la funzione di collegare un punto A ad un punto B, solo che il punto B non si trova al di fuori della pagina che stiamo visualizzando, ma all'interno del post stesso.

Questi tipi di link (ma in genere tutti i link) vengono chiamati ancore, proprio perché creano dei punti di ancoraggio visibile anche nell'url perché preceduti dal simbolo #.

Essendo un collegamento fra due punti, il codice HTML presenterà due tag <a> che notoriamente racchiudono un link (o come si chiamava agli inizi 'collegamento ipertestuale').

Sappiamo che il tag <a> ha al suo interno l'attributo href che richiama il punto di ancoraggio, ovvero dove ci porterà quel link una volta cliccato. Ciò che differenzia questo tag dagli altri che definiscono un link classico, è l'inserimento, all'interno dell'attributo href, della parola ancora che preceduta dal simbolo # ci porterà in un punto specifico dentro il post stesso.

Il secondo tag <a> ha, invece, al suo interno l'attributo name, nel quale viene scritto il nome univoco che aggancerà il link collegato (quello che si trova nel menu argomenti per intenderci).

Lo so, sembra difficile... Ma credimi, è molto più difficile spiegarlo che mostrartelo.

Ecco come si presenta il codice HTML:

il primo:

<a href='#ancora'>voce menu</a>

il secondo:

<a href='' name='ancora'></a>

Noterai che anche il secondo tag <a> ha al suo interno l'attributo href ma rimane vuoto; sono costretta ad inserirlo solo perché, altrimenti, Blogger mi darebbe errore nella fase di salvataggio. Non preoccuparti non dà comunque nessun problema.

Il secondo tag può essere inserito prima dell'intestazione (h2, h3,...), oppure prima di un blocco di testo che ritieni importante.


Come si usano i link interni in Blogger?

Ecco, questa sì che è stata un sfida. Come per ogni cosa del resto. Ma, proprio come per ogni cosa qui su Blogger, ho trovato il modo per farlo funzionare senza avere troppi problemi.

Prima che tu venga presa (o preso, perdonami il mio pubblico è prevalentemente femminile) dall'entusiasmo e corra ad aggiungere i tuoi link interni, tieni a mente questo prezioso consiglio: inseriscili SOLO, e ripeto, SOLO quando il tuo post è pronto per essere pubblicato, perchè Blogger ha il brutto vizio di correggere i link che secondo lui non sono scritti correttamente.

Insomma, io te l'ho detto.


Personalizzare il menu argomenti.

L'obiettivo principale del mio blog è quello di aiutarti a migliorare il blogging, sia nei contenuti ma soprattutto nella parte estetica, scrivendo tutorial che siano di facile comprensione, perchè anche io ho iniziato come autodidatta, perciò conosco le difficoltà nel capire certi procedimenti.

Ci sono, però, dei passaggi che richiedono un minimo di conoscenza di CSS, ovvero quei codici che determinano lo stile grafico di una pagina web.

Quanto ne sai di CSS? Ti piacerebbe imparare di più sull'argomento? Fammelo sapere nei commenti!

Perché ti ho parlato di tutto questo? Perché il menu avrà bisogno di essere personalizzato proprio grazie al CSS, e se non sai dove inserire i codici ho, guarda caso, appena aggiornato un mio vecchio post che ti spiegherà come fare.

Il codice si divide in due parti: il codice HTML, che dovrai inserire nel post, e il CSS.

Crea il box che contiene il menu.

Il menu argomenti è un elenco di link che puoi creare facilmente utilizzando il tasto sulla barra di formattazione; nel mio post lo trovi come elenco numerato, ma tu puoi usare anche quello puntinato.barra formattazione di Blogger

L'elenco si trova a sua volta nel tag <nav> che sta per navigation. Ed ecco come si presenta il codice HTML:

<nav>
<ul>
<li><a href='#ancora-1'>voce menu</a><li>
<li><a href='#ancora-2'>voce menu</a><li>
<li><a href='#ancora-3'>voce menu</a><li>
</ul>
</nav>

Il codice che devi inserire nel punto di ancoraggio, invece, è questo:

<a href='' name='ancora-1'></a>

A questo punto devi personalizzare lo stile del tag nav, ovvero l'elemento che contiene il menu argomenti, attraverso il CSS. Aggiungi il selettore class all'interno in questo modo.

<nav class='nav-demo-arg'>
<ul>
<li><a href='#ancora-1'>voce menu</a><li>
<li><a href='#ancora-2'>voce menu</a><li>
<li><a href='#ancora-3'>voce menu</a><li>
</ul>
</nav>
 

Ovviamente puoi cambiare il nome del selettore, l'importante è che non sia uguale ad altri già presenti nel tuo codice per non rischiare di modificare altri elementi. 

.nav-demo-arg { background: #eaeaea; padding: 20px; } .nav-demo-arg ul { padding: 0 !important; }

Questo è il risultato.

Per modificare il colore dello sfondo - background - devi cambiare il valore dopo il simbolo #.
N.B. Il colore dei link cambia a seconda del colore impostato nel tuo tema.

Che tu ci creda o no, questo è tutto! Ricorda solo di inserire il menu SOLO prima di pubblicare il tuo post e SOLO nella modalità Visualizzazione HTML.
Se hai domande, dubbi, problemi, sentiti libera/o di scriverlo nei commenti.

SALVA IL POST!

Come creare un indice dei contenuti nel tuo post


9 commenti in "Come creare un indice dei contenuti nel tuo post"

  1. Ciao, mi presento... Sono Barbara, sono approdata sul tuo sito cercando diverse soluzioni per il mio blog, ancora in fase di costruzione... Per l'esattezza cercavo il modo di linkare una parola specifica per portare il lettore ad un altro post, come trovo qui da te alle voci sottolineate che mi rimandano ad altri articoli appunto... Ci ho provato ma proprio non ci riesco! �� Credevo pure di averlo letto qui da te da qualche parte, ma mi sono persa... Nel senso che ho letto tutto d'un fiato molti argomenti che hai trattato, meglio di chiunque altro, per il linguaggio semplice che offri e l'immediata comprensione degli argomenti trattati. Grandi complimenti a te, dunque! Mi sono appena iscritta anche al tuo canale YouTube �� Tornando al mio problema, riusciresti a delucidarmi? Ti ringrazio, intanto, per l'attenzione, nel frattempo continuo a leggere tutti i tuoi segreti!

    RispondiElimina
    Risposte
    1. Ciao Barbara! Innanzitutto ti ringrazio davvero tanto per i tuoi complimenti, perché dai un senso a tutto ciò che faccio online ♥.♥

      Credo di aver capito che tu non riesca ad inserire un link (così si chiama la connessione fra due pagine) nei tuoi post, è così?
      Quando scrivi un post, trovi nella barra di formattazione una serie di pulsanti e fra questi c'è il simbolo di una "catena" proprio accanto al punsante di caricamento immagine.
      Se clicchi sulla "catena" ti si apre una finestrella, nella quale inserire la parola nel 'Testo da visualizzare' (che sarà cliccabile, quella sottolineata per intenderci) e il link alla pagina che vuoi far raggiungere una volta cliccato. Puoi anche scegliere se fare aprire la pagina in una nuova scheda (te lo consiglio se il link si trova nel mezzo di un post). Non scegliere 'nofollow'!

      Spero di aver capito bene il tuo quesito e di aver risposto in modo chiaro :D.

      Grazie ancora ♥

      Elimina
    2. Ti ringrazio davvero tanto! Hai centrato in pieno e non avevo alcun dubbio infatti! Io come una stupida selezionavo la parola e poi andavo su quella voce ma ovviamente non succedeva niente... Ahahah Sono agli inizi e lo puoi vedere dal mio blog che ancora è praticamente bianco! Ti disturberò sicuramente tante altre volte, sappilo! Sono anch'io una di quelle che ha ancora paura di fare partire tutto, ma sto cercando di pianificare bene le cose per iniziare a fare girare il mio blog con Instagram e facebook intanto e come hai visto su Instagram il mio account collegato al blog non sarà quello... Uan cosa che avevo provato a fare, grazie ai tuoi consigli, è stata per esempio quella di personalizzare le citazioni con le virgolette, ma anche lì non è accaduto nulla, forse perché ci ho provato dal telefono, ma ci riproverò dal PC e vediamo che succede...Intanto grazie ancora! Ci risentiamo presto... Un abbraccio!

      Elimina
    3. Sono felice 😅
      La questione del codice della citazione, invece, potrebbe dipendere dal tema che stai usando, perché anche se i temi sono di Blogger, quelli nuovi hanno magari qualche codice che differisce da quello che uso io.

      Per il resto disturba tranquillamente 😂.
      E non preoccuparti, pian piano con la pratica questi gesti ti verranno automatici, vedrai.
      Non demordere!
      Stay Happy, Stay Blogger 💪❤️

      Elimina
    4. Ah sì! Eccome se ti disturberò! 😅 Mi hai aperto un mondo nel modo più semplice possibile! Considera che nei miei percorsi di studi ho pure studiato codice, ma dopo 10 anni che non tocco una riga non ricordo più una ceppa e mi è sembrato tutto così complicato adesso! 😑 Pian piano sicuramente riuscirò ad addentrarmi di nuovo in questi labirinti... Il tema che sto utilizzando, comunque, è uno basico proprio, tanto che di chiama Essenzial 😊 Ma sicuramente il suo codice non sarà proprio così "essenziale" ahahahah Proprio per non incappare in grosse problematiche di impostazioni ho puntato su questo che è pulitissimo, vedrò se riuscirò a personalizzarlo come voglio io, nel caso cambierò tutto! 🤣

      Elimina
    5. Prima di cambiare ti consiglio di fare il backup, nel caso dovessi pentirti 😂

      Elimina
    6. Uh! Vero! Ho pure letto l'articolo al riguardo... 😉 E dunque ancora grazie! ❤️

      Elimina
  2. questo codice funziona anche su shopify o solo su blogger?

    RispondiElimina
    Risposte
    1. essendo in HTML e CSS funziona dappertutto, prova e fammi sapere se va bene :)

      Elimina

Grazie di aver commentato!
Solitamente rispondo ai commenti nelle prime 24 ore, se hai richieste urgenti puoi scrivermi usando il modulo dei contatti :)

Per favore NON lasciare link, a meno che non siano richiesti espressamente nel post stesso.
I commenti con link non richiesti o con link affiliati verranno considerati come SPAM e quindi subito cancellati.
So che capirai ;)