22 febbraio 2011

Come aggiungere link al widget delle pagine statiche per creare un menù.

In Blogger, dopo l'introduzione delle pagine statiche, si può creare un menù orizzontale formato proprio da tutte quelle pagine che sono state pubblicate e che possono arrivare fino a dieci. Il menù che si viene a creare può essere inserito in senso orizzontale sotto l'intestazione o in senso verticale in una sidebar. C'è anche la possibilità di non associare alcun widget alle pagine statiche che è stata la scelta di questo blog. Blogger non dà nativamente la possibilità di inserire dei collegamenti a degli URL che non siano di pagine statiche di quello stesso blog.

Vediamo come sia possibile ovviare a questo problema e di come si possa creare un menù orizzontale molto efficiente e semplice da realizzare. Per prima cosa dobbiamo aver pubblicato almeno una pagina statica e averla salvata nel widget orizzontale. Andiamo adesso su Design > Modifica HTML e salviamo il modello completo. Dopo aver messo la flag a espandi modelli widget cerchiamo questo codice

<b:widget id='PageList1' locked='false' title='Pagine' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>

Immettere l'elenco delle voci del menù

    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Il widget non è altro che un elenco che inizia con <ul> e termina con </ul>. Possiamo sfruttare questa cosa per inserire prima della sua fine altre voci che ci interessano con questa sintassi

<li><a href="LINK COLLEGAMENTO">TESTO</a></li>

Per fare un esempio pratico ecco come potrebbe diventare il precedente codice

<b:widget id='PageList1' locked='false' title='Pagine' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
<li><a href='http://www.ideepercomputeredinternet.com/'>Home</a></li>
<li><a href='http://www.ideepercomputeredinternet.com/search/label/blogger'>Blogger</a></li>
<li><a href='http://www.ideepercomputeredinternet.com/search/label/immagini'>Immagini</a></li>
<li><a href='http://www.ideepercomputeredinternet.com/search/label/template'>Modelli</a></li>
<li><a href='http://www.ideepercomputeredinternet.com/search/label/giochi'>Giochi</a></li>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

dove le righe aggiunte sono colorate di rosso. Salvate il modello. Sono adesso possibili ulteriori interessanti personalizzazioni. Andate su Design > Elementi pagina > Pagine > Modifica. Dovete cioè aprire il widget delle pagine statiche

pagine statiche widget

La finestra di configurazione ci darà la possibilità di non mostrare le pagine statiche e di visualizzare solo il nostro semplice menù

pagine statiche da mostrare

Possiamo farlo agevolmente togliendo il segno di spunta dai rispettivi quadratini. Quando abbiamo terminato clicchiamo su Salva. Il menù avrà i colori del nostro blog

menù pagine statiche

che potranno però essere modificati andando su Design > Designer modelli > Avanzato > Testo schede. Si seleziona un colore tra quelli previsti dal modello oppure se ne immette un altro ottenuto dai codici dei colori; si termina andando su Applica al blog in alto a destra.

Concludo dicendo che questo menù potrebbe essere usato per evidenziare le categorie più importanti del blog inserendo degli URL del tipo

http://www.nomesito.blogspot.com/search/label/nome-etichetta




56 commenti:

  1. Ciao,come stai...è da un bel pò che nn ci sentiamo...ho avuto un bel pò da fare tra post e guest posting...ma ti ho sempre seguito..
    ora dovrei sistemare un pò l'aspetto grafico del blog...
    Parto col domandone:Ho un bel pò di etichette e vorrei creare un menù con le pagine statiche, che adoro e nn voglio togliere...se nn ti dispiace...vai a vedere nel mio blog www.blognotesalento.bolspot.com nella pagina GITA FUORI PORTA ho creato un menù "casereccio"vorrei sapere se quello che ho combinato posso farlo in modo più professionale...spero di essere stata chiara
    ciao e grazie per il tuo aiuto.....

    RispondiElimina
  2. Ciao! Trovo il tuo blog utilissimo e tu bravissimo! Però ho una domanda riguardo appunto le pagine statiche di blogger. Spero che almeno tu riesca trovare la soluzione a questo problema. Questo è il mio blog: http://theglamshopper.blogspot.com .Sotto l'header vorrei inserire delle pagina statiche e una di queste vorrei fosse quella di facebook, ovvero, vorrei che cliccando su questa pagina il lettore venisse direttamente trasferito nella mia fanpage di Facebook. Ho provato inserendo dei codici html che ho trovato qui sul tuo blog e in rete, il problema è nonostante questo codice, il link non è mai diretto poichè cliccando si viene indirizzati su un'altra pagina del mio blog e su questa pagina si trova il link da cliccare per andare su FB. Su altri blog ho visto che invece è possibile fare questo collegamento diretto! Aiuto!!!Please come devo fare??

    RispondiElimina
  3. @Petra
    Una pagina statica ti va alla seconda riga. Dovresti rinominarle e dare titoli più brevi

    @The Glam Shopper by Valentina F.
    Questo è proprio il post giusto. Segui le indicazioni dell'articolo e aggiungi i link alla pagina fan, a Twitter al tuo Profilo, insomma a quello che vuoi. Puoi lasciare anche le altre pagine statiche che hai già creato. Nella prima riga in rosso al posto di Home metti Pagina Fan (o altro) e al posto di
    http://www.ideepercomputeredinternet.com/
    inserisci
    http://www.facebook.com/pages/The-Glam-Shopper-by-Valentina-Fulgori/195388597157074

    RispondiElimina
  4. Grazie mille! Ma purtroppo non ho questo codice! Ho inserito una pagina statica come hai suggerito tu ma questo codice non appare nel modifica html. possibile?

    RispondiElimina
  5. @The Glam...
    Forse sarà leggermente diverso. Cerca
    PageList1 pigiando su F3 e incollandolo nel campo che si apre

    RispondiElimina
  6. Ciao parfisal!
    grazie della dritta!
    io ho avuto il bisogno di mettere il mio account Twitter appena fatto, ma non volevo togliere due pagine statiche dal widget, e allo stesso tempo non volevo che la voce "twitter" comparisse alla fine.

    ho cambiato la posizione del link con i tag "li" "/li"

    di preciso l'ho messo subito dopo il "li class='selected'" dentro al primo b:loop

    (scusa è che non riesco a incollare il codice qui nei commenti)

    poi volevo aggiungere, che nel mio caso è stato utile mettere l'opzione target="_blank" dentro al tag "a" del link, in questo modo apre la mia pagina di twitter in un'altra scheda.

    Magari a qualcuno serve ;)

    RispondiElimina
  7. @Santiago
    Certo che si può fare come si vuole con l'ordinamento dell'elenco così come per il target="_blank" per aprire la pagina in un'altra scheda.

    RispondiElimina
  8. Grazie mille! E' stato utilissimo!
    Ho messo anche l'inconcina dell rss feed!

    RispondiElimina
  9. Ho inserito il widget in oggetto ma mi dà un elenco pagine esclusivamente in orientamento verticale, anche posizionandolo sotto la testata in sostituzione del menu orizzontale che utilizzo attualmente..dov'è possibile impostarne l'orientamento? Per il momento ho dovuto posizionarlo come widget nella sidebar.

    RispondiElimina
  10. @CalcioNapoli365.com
    All'inizio, quando pubblichi la pagina statica, puoi scegliere tra tre possibilità, scheda orizzontale, widget verticale nella sidebar o nessun collegamento. Per averlo orizzontale devi ripubblicare tutte le pagine con quella modalità

    RispondiElimina
  11. @parsifal32

    Grazie Parsifal, non potevo ricordare perchè le ho create mesi fa..allora devo cancellarle prima tutte e poi ripubblicarle :(

    Visto che devo comunque reimpostarle, volevo chiederti se ai fini dell'indicizzazione dei motori mi consiglieresti di creare un menu contenente dei post anzichè delle pagine statiche (cosa che anche tu adotti in questo sito) oppure se non vi è differenza in ambito SEO.

    RispondiElimina
  12. @CalcioNapoli365.com
    Le pagine non devi cancellarle. Devi andare su Modifica pagine e ripubblicarle inserendole in un widget orizzontale. Ai fini SEO, se inserisci un link a un post significa favorirlo nel posizionamento. E' evidente che se metti 10 link favorirai dieci post, se ne metti 100 ne favorirai molti di più ma in misura minore. Non si possono fare calcoli ma se nel primo caso dai a ciascuno una spinta del 20% in più, nel secondo caso sarà solo del 2%.

    RispondiElimina
  13. @parsifal32

    Anche qui forse ci siamo fraintesti, intendevo capire se i motori indicizzano di più i post rispetto alle pagine statiche di Blogger oppure se non vi è alcuna differenza.

    Nel menu orizzontale attualmente ho tutte pagine statiche ma se digito su google il mio sito non figurano le sottocategorie come accade ad esempio con il tuo sito, digitando ideepercomputer visualizzo anche le sottocategorie del tuo menu.

    RispondiElimina
  14. @CalcioNapoli365.com
    Tu fai riferimento a quelli che si chiamano Sitelink e che sono generati automaticamente da Google
    http://www.ideepercomputeredinternet.com/2010/01/cosa-sono-i-sitelink-perche-sono-utili.html
    Le pagine statiche in genere non fanno parte dei sitelink. Google tende a privilegiare i post che hanno un collegamento in home.

    RispondiElimina
  15. @parsifal32
    Ecco, mi sfuggiva il termine..mi riferivo proprio ai sitelink, a tal fine ti chiedo un consiglio:
    se mi ricopiassi integralmente, utilizzando "modifica html", singolarmente le pagine statiche riproponendole in appositi posts, ne guadagnerebbe anche il posizionamento del sito?

    RispondiElimina
  16. @CalcioNapoli365.com
    No. Potresti essere penalizzato per contenuti duplicati

    RispondiElimina
  17. @parsifal32
    Però poi eliminerei le pagine statiche..mi riferivo ad una vera e propria sostituzione.

    RispondiElimina
  18. @CalcioNapoli365.com
    Non so quanto potrebbe essere utile...
    Ricordati comunque che eliminare le pagine o i post si può fare solo se non sono state linkate perché Google non vede di buon occhio i link che non funzionano

    RispondiElimina
  19. @parsifal32

    Ok, allora rimarrò tutto così com'è...il tuo sito ha un posizionamento eccellente, hai mai creato un articolo o guida SEO per i blog/siti creati con Blogger?

    RispondiElimina
  20. @CalcioNapoli365.com
    Leggiti questo
    http://www.ideepercomputeredinternet.com/2010/11/migliorare-il-posizionamento-di-un.html
    e quest'altri
    http://www.ideepercomputeredinternet.com/search/label/seo

    RispondiElimina
  21. Grazie...il tuo post mi è stato davvero utile!
    Chiara

    RispondiElimina
  22. @Chiara/gioiecolori
    Sempre felice quando sento che i lettori rimangono soddisfatti :D

    RispondiElimina
  23. Allora, Sig. Ernesto,
    la bustina diciamo che va bene, poggia sul bordo inferiore del suo rettangolino, ma inserendo i due tag per metterla proprio centrata non succede nulla.
    Invece ora le chiedo su questo: ho già un collegamento "About" che fa parte del tema originale. Come faccio ad utilizzarlo per, appunto, parlare un po' dell'autore del blog? Posso usare le pagine statiche di Blogger in questo caso o quale sarebbe l'alternativa? Grazie.
    Joy

    RispondiElimina
  24. ... Sig. Ernesto,
    mi sa' che potrei utilizzare il sistema che spiega lei qui. Lei dice che bisogna già aver pubblicato almeno una pagina statica e messa nel menu orizz. Be', cliccando su "About" si apre una pagina, che poi fa parte della demo del template. Posso personalizzare questa, sempre attraverso le pagine statiche di Blogger?
    Sempre, grazie.
    Joy

    RispondiElimina
  25. :D sei un GENIO, hai sempre una soluzione per tutto. grazie!

    RispondiElimina
  26. una volta creato un menu orizzontale (o verticale) con (max) 10 pagine statiche, accanto al titolo di ogni pagina statica, è possibile inserire il numero dei commenti che ognuna di esse contiene (come succede per le etichette per intenderci)?

    ps
    ho abilitato i commenti nelle pagine statiche per necessità e visto che con esse non funzionano i widget degli ultimi commenti, mi serve monitorare la presenza o meno di nuovi commenti nelle singole pagine statiche..

    Grazie!

    RispondiElimina
  27. Non mi occupo di commenti nelle pagine statiche. Sono una eventualità rara quindi non so rispondere.

    RispondiElimina
  28. Ciao Ernesto, ho cercato nel mio html, il codice, ma non l'ho trovato, ho provato a cercare anche "PageList1" come hai suggerito in un commento precedente, l'ho trovato, ma qui non saprei dove inserire i link di collegamento per creare il mio menù, perchè non c'è nè b:loop nè
    ul (sia di apertura che di chiusura del widget, premetto che le pagine statiche sono già pubblicate sul mio blog e salvate nel widget orizzontale)ci sono invece una serie di "div"...ma nessuna traccia di "b:loop" e "ul". dove debbo inserire i link? Altra domanda: dopo aver modificato html, posso modificare i titoli delle mie pagine? Grazie!!

    RispondiElimina
  29. @Fatti Di Carte
    Prova a inserire i link prima di
    <b:include name='quickedit'/>
    </div>

    RispondiElimina
  30. non ci crederai ma non c'è nè anche questo!..??

    RispondiElimina
  31. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  32. Grazie come al solito dei tuoi post, mi hanno sempre molto aiutata. Una domanda, forse sciocca:come posso inserie come collegamento alla pagina statica, il nome di due etichette? Ho provato a separarle con la , ma non funziona. Sai aiutarmi?

    RispondiElimina
  33. @Federica
    Il link di una etichetta sì. Per esempio una è questa
    http://ecobiopinioni.blogspot.com/search/label/Mineral%20make-up

    Non esistono pagine che abbiano due etichette contemporaneamente. Si possono però creare dei feed e dei widget
    http://www.ideepercomputeredinternet.com/2010/02/come-creare-dei-widget-degli-ultimi.html

    per esempio questo URL
    http://ecobiopinioni.blogspot.com/feeds/posts/default/-/Buff%27d%20Cosmetics/Mineral%20make-up
    rappresenta il feed a tutti i post che hanno quelle due etichette.

    RispondiElimina
  34. ciao grande, allora da premettere che ho già il menu' con le varie pagine nel mio blog. Seguo la guida passo passo aggiungo i link vado per salvare e mi da un errore:

    RispondiElimina
  35. Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto....

    RispondiElimina
  36. @Mark86
    Guarda se per caso non ti è scappato un apostrofo. Se non è così prova a convertire il codice dei link che vuoi aggiungere in XML con questo strumento
    http://blogcrowds.com/resources/parse_html.php

    RispondiElimina
  37. @Mark86
    Era un problema di server, ora va.

    RispondiElimina
  38. ok ora va...quindi incollo la lista dei miei link clicco su 'parse' e il risultato lo incollo tra "b:loop" e "ul"???

    RispondiElimina
  39. ok perfetto ora va alla grande. :) se ti posso dare un suggerimento. Allora io ho voluto questo menu per linkare i label del mio blog marcoparrilla.blogspot.com ...ma poi mi usciva quel fastidioso riquadro "VISUALIZZAZIONE DEGLI ULTIMI POST CON ETICHETTA...", l'ho risolto aggiungendo in “Design”>”Designer di Modelli” nel menu “Avanzato”>”Aggiungi un CSS”:

    .status-msg-wrap
    {
    display: none;
    }

    spero possa essere d'aiuto a te o qualcun'altro..ciao e grazie mille ;)

    RispondiElimina
  40. Ciao e grazie come sempre perchè le tue spiegazioni sono sempre efficaci!
    Sto facendo delle prove per creare il menu per me ideale.
    Ovviamente strada facendo sono sorti dei dubbi su come definire alcuni dettagli.

    - Siccome il mio menu è composto da pagine statiche e da pagine link e con le tue indicazioni l'ho creato correttamente (per ora in un blog di prova). Però, se non ho sbagliato alcuni passaggi), ho visto che blogger mette automaticamente le pagine statiche per prime e poi quelle link. Siccome vorrei, e credo sia più corretto, mettere la pagina statica con i contatti per ultima, mi sai dire se e come è possibile farlo?
    - Seguendo l'indicazione del commento prima del mio, ho tolto la scritta "VISUALIZZAZIONE DEGLI ULTIMI POST CON ETICHETTA..." che è posta all'inizio di ogni pagina link. Mi chiedevo se fosse possibile (e soprattutto come) inserire un testo (o un contenuto tramite codice html) introduttivo prima dei post corrispondenti all'etichetta designata per quella pagina link. Una sorta di introduzione di ogni pagina, quindi diversa per ognuna di esse.

    Spero tu possa aiutarmi.

    Grazie e... buona Pasqua!

    RispondiElimina
  41. Primo quesito risolto... errore mio di distrazione! :-)

    RispondiElimina
  42. Ciao
    ho le tutte le info che dai sulle pagine statiche e credo che sia tutto molto utile per capire come funzionano , ma non riesco a capire come si crea un elenco di link nella pagina
    adesso ho l'elenco dei miei link preferiti sul lato sinistr della pagina principale ma vorrei avere la stessa cosa in una pagina separata
    Come posso fare?
    spero tu possa aiutarmi
    Mari
    http://bricieemicie.blogspot.it/
    marielisadt@gmail.com

    RispondiElimina
    Risposte
    1. @Marielisa
      Per creare un elenco di link in una pagina statica si deve semplicemente usare l'Editor di Blogger, cliccare su Elenco (puntato o numerato) ed inserire manualmente i vari elementi con i rispettivi link.

      Elimina
  43. ciao volevo farti i complimenti per il miglior contenuto in rete, contenuti chiari e finalmente precisi e approfonditi, io purtroppo non capisco nulla di template html ma cerco di studiare e imparare, io non ho ancora capito se necessito di pagine statiche o sezioni con elenco di link, provo a dirti qual e' la mia esigenza e mi risponderai tu ^^? lo spero...

    OK, vorrei creare una sezione Esempio Indirizzi Segreti e vorrei pubblicare saltuariamente post con quella etichetta e vorrei che andassero tutti in quella sezione consultabile dai lettori con la possibilita' di avere accesso a tutti i post che ho scritto con quella etichette....insomma se un lettore vuole consultare la sezione indirizzi segreti , si trovera' poi tutti i post in ordine cronologico? garzie ze vorrai rispondermi, ciao

    RispondiElimina
    Risposte
    1. @tuttepazzeperibijoux
      Se si vogliono visualizzare tutti insieme gli articoli che parlano di un certo argomento basta mettergli la stessa etichetta. Per esempio arguisco che il tuo sito possa parlare di anelli, orecchini, bracciali, ecc.
      Se per esempio metti l'etichetta "parure" a tutti gli articoli che trattano questo tema poi li ritroverai tutti nella relativa pagina. In questo blog a questo indirizzo
      http://www.ideepercomputeredinternet.com/search/label/menu
      ci sono tutti i post che parlano di menu mentre a quest'altro
      http://www.ideepercomputeredinternet.com/search/label/youtube
      tutti gli articoli che parlano di Youtube. Si possono mettere anche più etichette per inserire un articolo anche in più raccolte. I post sono in ordine cronologico però a partire dal più recente.

      Elimina
  44. Ernesto, come posso tenere di un colore diverso il bottone che hai cliccato e che stai vedendo? (Esempio: mi ritrovo su una pagina dal nome casa, come posso posso fare che nel menù il bottone casa sia in evidenza con un'altro colore?)

    RispondiElimina
    Risposte
    1. @ Francesco
      Non sto vedendo alcun bottone :) Credo che tu ti riferisca all'effetto hover nel CSS. Non è cosa che si possa spiegare in un commento. Comunque cerca "immagini effetto hover" anche tradotto in inglese e forse troverai qualcosa

      Elimina
  45. Ciao Ernesto, domanda forse sciocca..come faccio ad allineare l'elenco pagine orizzontale al centro invece che a sinistra?

    RispondiElimina
    Risposte
    1. @ Si deve creare un CSS da inserire nel modello. Segui questo post
      http://www.ideepercomputeredinternet.com/2012/10/blogger-menu-pagine-altezza-larghezza-centrare-personalizzare.html

      Elimina
  46. Ciao Ernesto! molto bello questo post, e molto utile, non finirò mai di ringraziarti per tutte le perle di saggezza che scrivi. Pensavo di aver trovato la soluzione al mio problema con questo post, ma credo di non aver risolto.
    In poche parole questo è il blog, vorrei che cliccando sopra la parola "Portfolio" la gente venisse direttamente catapultata nella pagina di flickr dove c'è l'album. Come faccio? Come in questo blog, http://nepitella.blogspot.it/ se si clicca sopra "le mie foto" si viene direttamente portati al link dell'album su flickr? c'è un modo per realizzarlo, senza creare un nuovo menù?

    RispondiElimina
    Risposte
    1. @# Che problema c'è? Puoi inserire un altro link con il collegamento al tuo album su Flickr. Per esempio l'URL di un mio album è questo
      http://www.flickr.com/photos/25868141@N08/
      Basta che tu aggiunga un altro elemento al menù delle pagine statiche. Segui quest'altro post che è più recente
      http://www.ideepercomputeredinternet.com/2011/11/come-creare-un-menu-aggiungendo-link-al.html

      Elimina
    2. Grazie mille! e io che mi stavo sbattendo, per cercare una soluzione intervenendo adirittura sui codici html, mentre invece era così semplice.. -.-" grazie mille! :) grazie grazie!! ^-^*

      Elimina

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