Pubblicato il 08/09/11e aggiornato il

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:

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.

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

messaggio di benvenuto 

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.





5 commenti :

  1. Ciao Ernesto, io vorrei affiancare il messaggio di benvenuto alla galleria immagini come in questo blog. http://www.nellacucinadiely.it/
    Mi potresti aiutare? La mia home page si presenta così http://creazionifusionorconfusion.blogspot.it/
    Grazie
    Alysha

    RispondiElimina
  2. @Alysha
    Hai detto poco!!!
    Per prima cosa devi sostituire il tag condizionale della homepage con quello della pagina della galleria
    http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html
    poi spostare i contenuti sulla destra
    float: right;
    Forse ti conviene acquistare il template come ha fatto il/la proprietario/a del sito che mi hai linkato
    http://www.cappuccino-factory.com/2010/09/coffee-shop-two-columns.html

    RispondiElimina
  3. Ciao !
    Tempo fa su un tuo sito demo era apparso un messaggio di benvuto che appariva e spariva nella parte bassa della homepage...ma non la trovo più ! Mi sai dire dove trovarla ?
    Grazie !

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.