Introduzione nella home page di Blogger Scrivi un commento!

Blogger (blogspot.com): inserire un’Introduzione nella home page

BloggerCon 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 :mrgreen:

Box informazioni su Blogger
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). :mrgreen:

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! :D

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). ;-)

27 Responses to “Blogger (blogspot.com): inserire un’Introduzione nella home page”

  1. annarita Says:

    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

  2. Notorious aka Andrea Romagnoli Says:

    @annarita: figurati :P :oops: 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! ;)

  3. annarita Says:

    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;).

  4. Traffyk Says:

    Bello bello complimentissimi! Come sempre sei fin troppo dettagliato. Un consiglio per il code utilizza l’overflow altrimenti esce fuori dal div :)

  5. Notorious aka Andrea Romagnoli Says:

    @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.
    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… :( Probabilmente il tuo browser ha pescato il CSS dalla cache, aggiorna la pagina con SHIFT+F5 ;)
    @annarita: anche il mio arrossimento (credo che questa parola esista… anzi… spero :mrgreen: ) è virtuale ;)
    Grazie a tutti per i complimenti :)

  6. Massimiliano Forastieri Says:

    Ciao ! Pensi che sia possibile fare in modo che l’introduzione appaia solo a chi visita per la prima volta il blog ?

  7. Notorious aka Andrea Romagnoli Says:

    @Massimiliano: più tardi controllo (adesso devo andare a pranzo :P ); 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. ;)

  8. Traffyk Says:

    Ciao Massimiliano per fare ciò dovresti settare un Cookie e richiamare tutto il blocco informativo via javascript se ne è la condizione ;)

  9. Massimiliano Forastieri Says:

    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!

  10. Notorious aka Andrea Romagnoli Says:

    @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! ;)

  11. Val3ri0 Says:

    Come ti dicevo nei commenti su okno questo è il mio blog (in strat up):

    http://sondaggiamoci.blogspot.com/

    Ciao e grazie!

  12. Andrea Romagnoli Says:

    @ Val3ri0:
    Grazie per aver usato lo widget, e scusa per il ritardo della risposta - il tuo commento era stato “catturato” da Akismet. :oops:

  13. Guida aggiornata: Presentazione su Blogger/Blogspot, in Home page Says:

    […] Trovate la guida aggiornata nella pagina Introduzione nella home page di Blogger […]

  14. gimbola Says:

    grazie, i tuoi post mi sono molto utili!

  15. Andrea Romagnoli Says:

    @ gimbola:
    Figurati! ;)

  16. C'era una volta una gatta Says:

    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

  17. Andrea Romagnoli Says:

    @C’era una volta una gatta: non so se ho ben capito :P 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 :P

  18. Chiara Says:

    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????

  19. Andrea Romagnoli Says:

    @ 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. :)

  20. Andrea Romagnoli Says:

    @ 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). ;)

  21. Chiara Says:

    @ Andrea Romagnoli:
    Grazie mille per le dritte.
    Ci provo.
    A presto

  22. Andrea Romagnoli Says:

    Per Frankie Palla:

    Modifica il div HomePageIntro in questo modo:

    <div class="HomePageIntro" style="background: #5C5C5C; margin-top: 1em;margin-bottom:1em;padding:1em;">

    Inserisci l’introduzione, così riesco a vedere se qualcosa non va, e ad aiutarti meglio ;)

  23. luigi Says:

    Ciao complimenti per il tuo blog, che ne diresti di passare anche nel mio???Sto ancora all’inzio e vorrei qulche sostenitore
    il ilnk è questo
    http://mytechnopassion.blogspot.com/

  24. Gloria Says:

    @ Andrea Romagnoli: Ciao Andrea, ti scrivo per la prima volta ma i tuoi post mi hanno aiutata sin da quando ho deciso di aprire il mio blog a capire meglio questo “mondo”. Come Chiara cercavo anche io un modo per elencare i vari post sotto le etichette di appartenenza ed ho usato i tuoi suggerimenti di creazione di un elenco manuale, vorrei però chiederti se esiste anche un modo più automatico per ottenere questo risultato?
    Grazie mille
    ciao Gloria

  25. iohounaidea Says:

    Ottimo intervento…mi stavo proprio chiedendo come fosse possibile realizzare una Home Page con Blogger….Basta fare le domande giuste e alla fine le risposte arrivano…… grazie per aver condiviso la tua conoscenza!!!

  26. giovanni Says:

    Volevo attivare un blog su google ma sono incorso in un problema.
    Dopo aver reaklizzato l’account mi si è aperta la pagina blogger. Ho scritto il titolo del blog e inserito il mio imdirizzo. Ho scelto il template e ho cliccato crea il tuo blog. Ma non c’è stato verso di andare acanti. Qualcuno mi sa dire il perchè

  27. come creare un blog Says:

    bisognerebbe usare dei tag condizionali per il widget in modo tale che il widget sia presente solo in homepage. in alternativa installare il widget già pronto (che non ho provato) proposto dall’autore del blog.

Leave a Reply


SMS Gratis