Pubblicato il 11/03/17 - aggiornato il  | 7 commenti :

Come creare una landing page nella Home di Blogger.

Come creare una Landing Page nella Home di Blogger e nascondere i post che saranno visibili in un'altra scheda del Menù delle Pagine Statiche.
A seguito di un commento che ho ricevuto passo a mostrare una procedura per creare una landing page  nella Home di un blog di Blogger senza che vi si vedano gli ultimi articoli pubblicati. Questi articoli potranno essere comunque visibili cliccando in una voce del Menù delle Pagine Statiche che per esempio può essere chiamata Blog. Tale pagina potrà essere linkata anche nella Landing Page.

Il trucco è quello di usare i tag condizionali per non mostrare i post nella homepage. Gli stessi post potranno essere visti in un diverso link quando si inserisca una etichetta aggiuntiva a ciascuno di essi. Nella Home al posto degli articoli mostreremo un widget che sempre per i tag condizionali sarà visibile solo in quella pagina. In tale widget potremo inserire testo, immagini, video  e altri oggetti HTML a piacere.

Il risultato che intendiamo creare consiste in una Landing Page al posto della Home e i Post visibili cliccando in un Link della stessa Home oppure andando in una voce del Menù delle Pagine Statiche.







landing-page-blogger

La Homepage manterrà il suo URL così come i post, non ci sarà quindi alcun redirect 301. Andiamo per gradi.

CREARE UNA LANDING PAGE


Si va su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript e si incolla il codice della Landing Page in Sezioni del sito quindi si va su Salva.

landing-page-blogger-codice

Tale elemento pagina con il drag & drop va posizionato subito sopra a Post del blog. Quindi si va su Salva disposizione in alto a destra. Il codice della Landing Page può essere ricavato editandola nell'Editor dei Post di Blogger per poi copiare il tutto andando su HTML. Si può anche usare Open Live Writer.






TAG CONDIZIONALE PER MOSTRARE LA LANGING PAGE SOLO NELLA HOME


La Landing Page sarà visibile in tutti i post di Blogger dovremo quindi inserire un tag condizionale che la mostri solo in Home. Si va su Tema -> Modifica HTML e si cerca l'ID del widget che abbiamo usato con Ctrl+F. Si clicca sulle freccette nere poste a sinistra per visualizzare tutto il codice

tag-condizionali

Si incolla la riga

<b:if cond='data:blog.url == data:blog.homepageUrl'>

subito sotto a

<b:includable id='main'>

e la riga

</b:if>

subito sopra a

</b:includable>






NASCONDERE I POST NELLA HOMEPAGE


Per nascondere i post nella Homepage rimaniamo su Tema -> Modifica HTML e, subito sopra alla riga </head>, incolliamo il codice seguente

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#Blog1 {display:none;}
</style>
</b:if>

Salviamo il Tema.

AGGIUNGERE UNA ETICHETTA A TUTTI I POST


Per visualizzare i post dobbiamo usare un escamotage come quello di aggiungere una stessa etichetta a tutti quelli che vogliamo vedere nella scheda Blog. Scegliamo l'etichetta Home che illustra bene il significato

aggiungere-nuove-etichette

Per aggiungere la etichetta Home a tutti i post basterà andare su Bacheca -> Post e cliccare nel quadratino di controllo posto in alto per selezionare tutti i post della pagina. Si va poi sulla freccetta verticale, si sceglie Nuova Etichetta e si digita Home per poi andare su OK.

In pratica non occorrerà mettere l'etichetta Home a tutti i post del blog visto che Blogger nelle pagine dinamiche al massimo mostra 20 elementi. Anzi con questo sistema si può decidere anche eventualmente di non mostrare un post nella scheda Blog semplicemente non aggiungendo l'etichetta Home.

CREARE LA SCHEDA BLOG CON TUTTI I POST


Se il vostro sito ha indirizzo nomeblog.blogspot.com allora i post con la etichetta Home avranno URL

nomeblog.blogspot.com/search/label/Home


Dopo aver creato il Menù delle Pagine Statiche come illustrato nel post linkato all'inizio si va su Layout e si clicca su Modifica nell'elemento pagina del menù per aprire la finestra di configurazione. Si clicca su Aggiungi Link esterno quindi si mette Blog (p.e.) nel Titolo della Pagina

link-esterno

e si incolla l'indirizzo della pagina con etichetta Home. Ricordo che Blog e Home sono nomi assolutamente arbitrari che ho usato per rendere le cose più chiare ma che possono essere sostituiti da altre parole.  Ricordo anche che le etichette sono case sensitive e che l'etichetta home è diversa da Home e da HOME.

COME NASCONDERE LA SCRITTA VISUALIZZA ETICHETTE


Nella pagine delle etichette di Blogger viene mostrato un rettangolo grigio con la scritta Visualizzazione post con etichetta ... che naturalmente sarebbe visibile nella scheda Blog quando viene aperta.  Per evitarlo si utilizza il codice del post sulla personalizzazione del messaggio Visualizzazione post

<b:if cond='data:blog.url == "http://nomeblog.blogspot.com/search/label/Home"'>
<style>
.status-msg-wrap {visibility:hidden;display:none;}
</style>
</b:if>

da incollare sempre sopra a </head> . Ovviamente va cambiato l'URL e eventualmente l'etichetta.

Con questo sistema l'URL del feed rimarrà inalterato così come l'URL del post di cui potranno essere personalizzati i Permalink. La Landing Page di Blogger può essere usata per linkare un network di blog, per un elenco di siti collegati e potrà contenere tutto quello che si desidera.


7 commenti :

  1. Ti posso ringraziare veramente tanto per la tempestività con cui hai fatto la guida?
    Grazie.
    Ho aggiunto il tag < style > al codice per non mostrare i post perché se no non andava.

    RispondiElimina
  2. Sì manca il tag style. Ho scritto il posto troppo di fretta prima di uscire. Poi lo correggo.
    @#

    RispondiElimina
  3. Ciao. Potresti spiegare come fare una landing page su una pagina statica o su un post del mio blog su Blogger.com?
    Vorrei creare cioè una pagina senza le sidebar destra e sinistra e altri fronzoli che sono presenti normalmente (e che non voglio eliminare dall'intero blog). Grazie.

    RispondiElimina
    Risposte
    1. Non è cosa difficile. Segui le istruzioni di questo post
      http://www.ideepercomputeredinternet.com/2016/04/blogger-pagine-statiche-sidebar-larghezza.html
      La difficoltà risiede nel trovare gli ID degli elementi da nascondere. Per esempio
      #sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2, #footer-1, #footer-2-1, #footer2-2, #footer
      per sidebar sinistra destra e footer. Nella prima parte del post c'è scritto anche come trovare questi ID nei modelli scaricati da internet. Non importa neppure modificare il modello
      @#

      Elimina
  4. Non ho parole. Semplicemente un grande Ernesto!
    Grazie davvero

    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