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.

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.

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

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

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

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.