Come inserire un messaggio di benvenuto nella homepage del blog.

Su alcuni blog su Blogger è talvolta necessario mostrare un messaggio di presentazione del sito corredato delle informazioni che possono essere utili all'utente. Questo messaggio è in genere opportuno che venga visualizzato solo in homepage per fare in modo che, quando si apre un post, il navigatore possa iniziare a leggerlo senza dover prima dover scorrere il messaggio di presentazione.

Mi sono già occupato altre volte di come introdurre widget o messaggi di invito. Ricordo i seguenti articoli:

1. Come inserire un messaggio di benvenuto delle pagine delle etichette -
2. Come inserire un widget di benvenuto in Blogger -
3. Come creare una pagina di benvenuto (prima versione) -
4. Come inserire una pagina di benvenuto (seconda versione) -
5. Come inserire un articolo di presentazione su Blogger -

Con questo post voglio riprendere in modo stilisticamente più evoluto il concetto esposto nell'ultimo post dell'elenco precedente. Vediamo cioè come inserire un messaggio di testo con eventualmente link, immagini, video o altri oggetti da mostrare solo in homepage. La differenza risiederà nel fatto che lo stile di questo messaggio potrà essere molto diverso da quello dei normali post per renderlo più attrattivo e esteticamente valido.

• Demo di un messaggio di benvenuto in homepage -

Come vedete nel blog di demo, se aprite una qualsiasi altra pagina, il messaggio non si visualizza più. Naturalmente può essere personalizzato come colori, caratteri, posizione del titolo, posizione e stile delle immagini, margini, insomma tutto quello che si può fare con i CSS.

Si va su Design > Modifica HTML e si scarica il modello completo per un eventuale backup di ripristino. Non si espandono i modelli widget e si cerca il blocco di codice

<b:section class='main' id='main' showaddelement='no'>
   ......
<b:widget id='Blog1' locked='true' title='Post sul blog' type='Blog'/>
   .........
</b:section>

Dove si visualizzano i puntini di sospensione, potrebbero esserci dei widget che sono stati inseriti sopra all'area del post. Penso per esempio a dei menù o a degli slideshow. Immediatamente sopra a questo blocco, incollate il codice

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='WelcomeMs' id='WelcomeMs' showaddelement='yes'>
<b:widget id='HTML99' locked='false' title='MESSAGGIO DI BENVENUTO' type='HTML'/>
</b:section>
</b:if>

dove 99 è stato messo per non rischiare di avere nel blog un altro widget con lo stesso ID e MESSAGGIO DI BENVENUTO rappresenta il titolo del gadget che può anche essere cambiato. Cercate adesso la riga </head> e, immediatamente sopra, incollate questo CSS

<link href='https://sites.google.com/site/scriptperilblog/javascript-2/welcomeMs.css' rel='stylesheet' type='text/css'/>

Salvate il modello. Se adesso andate su Design > Elementi pagina vedrete il gadget MESSAGGIO DI BENVENUTO subito sopra all'area del post

 

Se clicchiamo su Modifica si apre l'elemento HTML/Javascript in cui inserire materialmente il codice HTML del messaggio. La sintassi da usare è la seguente

<div id="WelcomeMs">
<h3>BENVENUTO</h3>

Codice HTML da visualizzare nell'elemento che può contenere testo immagini e link

</div>

dove BENVENUTO rappresenta il titolo del messaggio e al posto della scritta in blu può essere inserito il codice HTML del messaggio. Per editarlo possiamo usare anche Windows Live Writer con il procedimento illustrato nel post numero 5) dell'elenco linkato a inizio articolo. I colori e gli stili usati per questa demo sono assolutamente dimostrativi e possono essere sostituiti con altri più adatti al tema del blog. Se scaricate il file

 https://sites.google.com/site/scriptperilblog/javascript-2/welcomeMs.css

e lo aprite con Notepad++, vi accorgerete che fissa i seguenti stili per il messaggio di benvenuto

#WelcomeMs h3 {
color: #003366; /* Colore del titolo Benvenuto */
border: 1px solid #003366;
float: center;
padding: 2px;
font-size: 20px; /* Dimensione caratteri titolo */
font-weight: bold;
}
#WelcomeMs {
color:#003366; /* Colore del testo */
background:#FDBCB7; /* Colore dello sfondo */
font-family: Arial,helvetica,sans-serif;
font-size: 14px; /* Dimensione catteri */
padding: 6px 10px;
}
#WelcomeMs a {
color: #940F04; /*Colore del link */
font-weight: bold;
text-decoration: underline;
}
#WelcomeMs img {
background:#FDBCB7; /* Sfondo immagine */
border: 1px solid #FDBCB7; /* Bordo Immagine */
float: right;
padding: 2px;
}

Si può editare a nostro piacimento modificando tra gli altro i seguenti elementi:

1. Colore, bordo e dimensioni dei caratteri del titolo
2. Colore, dimensione e famiglia di caratteri del testo
3. Colore di sfondo dell'elemento
4. Colore dei link presenti nel messaggio
5. Posizione della immagine, il suo sfondo e lo stile del suo bordo
6. Margini e padding dei vari elementi
7. Per i meno esperti ricordo che margin definisce la distanza esterna del contenitore mentre padding quella interna e che possono leggersi l'articolo sui codici dei colori e quello sullo stile dei bordi.

Quando lo abbiamo adattato alle nostre esigenze, lo carichiamo su Google Sites in modalità Schedario, ne acquisiamo l'indirizzo diretto che poi sostituiremo nel codice incollato sopra a </head>. Se invece che mostrarlo in homepage vogliamo visualizzarlo in un post particolare, nelle pagine statiche o in quelle di archivio, possiamo sostituire la riga colorata di viola con un altro tag condizionale tra quelli disponibili per Blogger.