Blogger (blogspot.com): inserire un’Introduzione nella home page
Con questo articolo provo a rispondere alla domanda di Annarita (la blogger di Web 2.0 and something else): “Come inserire un box di informazioni solo nella Home Page di un blog basato su Blogger, prima dei post?”… beh, basta premere il pulsante qui a sinistra 
Nella home page di How-toLog ho inserito un box di informazioni (è presente anche su TechLog)
Pubblico la soluzione, perché può essere utile anche a te (se scrivi su un blog di blogspot.com) 
Installare lo Widget dell’Introduzione su Blogger
Inserire lo widget di benvenuto nella Home Page di Blogger / Blogspot è semplice… basta un click su questo bottone!
Dopo averlo aggiunto, si aprirà la pagina del layout di Blogger, dalla quale, volendo, è possibile spostare lo widget. Puoi anche inserirne più di uno!
Ho cercato di dare al riquadro un colore di sfondo neutro, che si adatti a qualsiasi template. Se vuoi cambiare i colori, devi modificare il template di Blogger.
Codice CSS (aspetto dell’introduzione)
Puoi lasciare l’aspetto così com’è, oppure evidenziare il box introduttivo con bordi colorati, colore e immagini di sfondo, font… il limite è la tua fantasia (e la tua conoscenza dei CSS).
Cambiare colori dello sfondo e del bordo dell’introduzione
Vuoi cambiare solo i colori del bordo e dello sfondo dell’introduzione? Apri il template di Blogger, attivando i modelli widget, e trova questa riga:
<div class='HomePageIntro' style='background: #efefef; border: 1px solid #ccc; margin-top: 1em;margin-bottom:1em;padding:1em;'>
Per cambiare il colore di sfondo, devi modificare il valore in esadecimale #efefef, mentre per cambiare il colore del bordo devi modificare l’altro valore, #ccc. Puoi utilizzare un qualsiasi color picker per ottenere il codice HTML dei colori.
Modifica avanzata dell’introduzione tramite foglio di stile
Per delle modifiche più avanzate devi conoscere i CSS. Torna nel codice HTML, come ti ho mostrato nel paragrafo precedente; non c’è bisogno, però, di espandere i modelli widget. Cerca il seguente testo:
</b:skin>
Questo tag rappresenta la fine del codice relativo alla presentazione grafica. Ora posiziona il cursore a destra dell’ultima parentesi graffa chiusa - } - vai a capo ed inserisci la seguente regola:
div.HomePageIntro {
... proprietà CSS ...
}
Ti ricordo che sono state definite regole interne al div HomePageIntro, che sovrascrivono le regole appena immesse. Ti consiglio, pertanto di rimuoverle. Espandi i modelli widget e cerca (di nuovo):
<div class='HomePageIntro' style='background: #efefef; border: 1px solid #ccc; margin-top: 1em;margin-bottom:1em;padding:1em;'>
Rimuovi l’attributo style, in questo modo:
<div class='HomePageIntro'>
Se vuoi saperne (molto) di più, ti propongo la guida CSS di base di HTML.it. 
Terminata la personalizzazione grafica, salva e controlla i risultati, riaprendo la home page del tuo blog su blogspot.com.
Cosa inserire nell’introduzione?
Anche qui, puoi sbizzarrirti. I consigli che ti darò sono del tutto personali, e, soprattutto, opinabili (se hai altre idee, fai sapere).
- Descrizione del sito: un visitatore, arrivato nella home page, deve sapere subito di cosa parla il sito - e la tagline, cioè quel breve testo posto di solito sotto il titolo del blog, potrebbe non bastare. Soprattutto, un utente non abituato ai blog potrebbe ritrovarsi spiazzato, ritrovandosi davanti solo l’elenco degli ultimi articoli.
Puoi terminare l’introduzione con l’invito ad iscriversi al feed o alla newsletter, e con un link “maggiori informazioni” che punti ad una pagina “about“, se ne hai preparata una.
Inoltre, inserendo una descrizione nel box può anche essere un’occasione per utilizzare una tagline più breve… - Parole chiave con cui si è scelto di ottimizzare l’home page: se è presente solo l’elenco degli ultimi post, che è dinamico per natura, l’insieme delle keyword cambierà inevitabilmente nel tempo… Inserendo le parole chiave più importanti nell’introduzione, invece, inserirai un insieme di keyword costanti.
E un sistema di statistiche relativo alla sola home page, che ci dica con quali parole chiave viene trovata più spesso, può essere utile per la scelta delle Keyword. - Link alle pagine più importanti del blog: per fornire un aiuto per la navigazione al visitatore, e per mettere in rilievo quelle pagine o post che altrimenti resterebbero nascoste.
È tutto! 
Articoli simili:
Se questo articolo ti è stato utile, segnalalo sul tuo sito! Puoi inoltre seguire comodamente gli aggiornamenti di Techlog tramite il feed RSS; infine puoi lasciare un commento se ti serve aiuto (o anche solo per un saluto); anche qui non serve registrarsi (sono abilitati anche i commenti anonimi; l'E-Mail serve, eventualmente, per ricevere le notifiche delle nuove risposte). ;-)
April 14th, 2008 at 10:46 pm
Andrea, sei una forza! Grazzzzie! Smack. Smack. Smack:).
Hai ragione, non è semplicissimo, ma credo di aver capito, ad una prima impressione. Non mi resta che provare.
Salverò il post e farò le mie prove non appena avrò la calma e il tempo necessari. In questo periodo mi è impossibile perché sto seguendo due progetti impegnativi extra-scolastici.
Il tuo articolo è veramente prezioso e utile.
A presto!
Annarita
April 14th, 2008 at 11:00 pm
@annarita: figurati
In realtà dovrebbe essere difficile trovare i tag giusti, ma solo nel caso in cui i diversi template di Wordpress dovessero avere un codice xhtml diverso… altrimenti il CTRL+F di Firefox troverà tutto! 
Fai pure con calma… e mi raccomando, se incontri problemi, fai un fischio!
April 14th, 2008 at 11:13 pm
Andrea, stai pur certo che di fischi ne farò più d’uno, se dovessi averne bisogno,… ma non è il caso di arrossire per tre bacini virtuali;).
April 15th, 2008 at 1:39 am
Bello bello complimentissimi! Come sempre sei fin troppo dettagliato. Un consiglio per il code utilizza l’overflow altrimenti esce fuori dal div
April 15th, 2008 at 1:55 am
@Traffyk: già lo facevo per il tag code, poi ho modificato il CSS durante la stesura di questo post per farlo anche con PRE: per la prima volta ho dovuto inserire del codice HTML, e il CODE non andava bene.
Probabilmente il tuo browser ha pescato il CSS dalla cache, aggiorna la pagina con SHIFT+F5 
) è virtuale 
Non che il PRE vada poi meglio: quel lazzarone di wordpress si è fumato l’indentazione del codice al primo aggiornamento del post, e ha inserito inutili a capi…
@annarita: anche il mio arrossimento (credo che questa parola esista… anzi… spero
Grazie a tutti per i complimenti
April 15th, 2008 at 10:35 am
Ciao ! Pensi che sia possibile fare in modo che l’introduzione appaia solo a chi visita per la prima volta il blog ?
April 15th, 2008 at 1:07 pm
@Massimiliano: più tardi controllo (adesso devo andare a pranzo
); comunque sia, penso che si debba ricorrere al javascript (da inserire direttamente dentro il div #welcomebox), non avendo a disposizione un linguaggio come il php… 
Comunque ti faccio sapere, commentando questo post.
April 16th, 2008 at 1:34 am
Ciao Massimiliano per fare ciò dovresti settare un Cookie e richiamare tutto il blocco informativo via javascript se ne è la condizione
April 16th, 2008 at 3:53 pm
Vi ringrazio molto per i vostri contributi. Purtroppo per me non sono un programmatore vero e proprio: la mia era solo una curiosità. Comunque continuerò a seguirvi. Ciao!
April 24th, 2008 at 12:58 pm
@Massimiliano: purtroppo non lo sono neanche io
Per lo meno, non conosco il Javascript. Ho rigirato la domanda sul forum di HTML.it, ma non ho ottenuto risposta.
@Traffyk: se conosci qualche documentazione online utile a questo scopo, linka pure!
September 11th, 2008 at 6:50 pm
Come ti dicevo nei commenti su okno questo è il mio blog (in strat up):
http://sondaggiamoci.blogspot.com/
Ciao e grazie!
September 16th, 2008 at 2:22 am
@ Val3ri0:
Grazie per aver usato lo widget, e scusa per il ritardo della risposta - il tuo commento era stato “catturato” da Akismet.
October 4th, 2008 at 4:03 am
[…] Trovate la guida aggiornata nella pagina Introduzione nella home page di Blogger […]
December 8th, 2008 at 9:39 am
grazie, i tuoi post mi sono molto utili!
December 10th, 2008 at 3:00 pm
@ gimbola:
Figurati!
December 24th, 2008 at 2:32 pm
Ho una domanda off topic e forse ingenua. Provengo da un’altra piattaforma e ho appena aperto un blog nuovo su blogspot, ma non riesco a visualizzare la community dei blogger su blogspot. c’è uno strumento interno a blogger per farlo? Grazie! e felice Natale,
Una gatta
eraunavoltaunagatta.blogspot.com
December 24th, 2008 at 4:48 pm
@C’era una volta una gatta: non so se ho ben capito
Intendi qualcosa come il widget “lettori”, che vedo tu hai già inserito sul tuo blog? 
C’è anche un altro widget che mostra i blog che leggi tu, se ti interessa.
Ti consiglio, comunque, anche di iscrivere il tuo blog a Feedburner e generare la newsletter via email, come ho fatto io sul mio blog personale: http://notoriousxl.blogspot.com/ (in questo modo rendi “seguibile” il tuo blog anche a coloro che non sanno cosa sia un feed) 
Contraccambio gli auguri e ti ringrazio per il commento!
PS: intuisco che ti piacciono i gatti
January 1st, 2009 at 12:08 am
Da qualche tempo volevo creare un nuovo blog di cucina su blogger, ma ho trovato un pò di difficoltà.
Cercavo di creare un elenco di tutti i post divisi in base alle etichette. In pratica vorrei che venissero visualizzate nella barra laterale tutte le ricette postate suddivise sulla base della categoria di appartenenza (antipasti, primi, ecc…) Come è possibile farlo????????
Ho provato diverse strategie anche quella di creare un elenco di link ma non sono riuscita a modficare l codice html.
Qualcuno può aiutarmi????
January 2nd, 2009 at 3:53 am
@ Chiara:
Per un elenco manuale, puoi usare questo codice, da inserire in uno widget HTML:
<ul>
<li><a href=”http://example.com/link1″>Testo link 1</a></li>
<li><a href=”http://example.com/link2″>Testo link 2</a></li>
<li><a href=”http://example.com/linkN”>Testo link N</a></li>
</ul>
Inserisci un <li> per ogni elemento della lista. Puoi anche aiutarti con l’editor formattato (RTF).
Per un modo automatico, posso controllare domani.
January 2nd, 2009 at 3:55 am
@ Chiara:
Occhio che nel mio codice precedente Wordpress ha modificato qualche doppio apice: ricopia il codice a mano, piuttosto che fare copia e incolla (oppure correggi i doppi apici).
January 2nd, 2009 at 3:35 pm
@ Andrea Romagnoli:
Grazie mille per le dritte.
Ci provo.
A presto