Personalizza la sezione Header del tuo blog Blogger.com
Nell'ultimo tutorial, abbiamo personalizzato la sezione Link per il tuo BloggerTM weblog. Ora personalizzeremo la sezione Header nella parte superiore del blog. L'intestazione contiene il titolo e la descrizione del tuo blog. Modificheremo il carattere tipografico o il carattere per il testo e aggiungeremo uno sfondo colorato.

Come nell'ultimo tutorial, apporteremo questi miglioramenti modificando alcune righe del codice HTML del modello. Fai clic sulla scheda Modello nel menu nella parte superiore della pagina che ti porterà alla sezione Modifica modello corrente. Troverai il codice HTML per il modello nella casella qui sotto. Faremo alcune modifiche al codice di stile CSS. (Per saperne di più sui fogli di stile a cascata, segui il link in basso.) Scorri verso il basso il codice fino a raggiungere la sezione Intestazione all'interno del tag di stile CSS. Come puoi vedere, il tag di stile è molto lungo e la sezione Header del tag di stile ha sei parti.

  1. @media all
  2. palmare @media
  3. #Titolo del Blog
  4. # blog-title a
  5. # blog-title a: hover
  6. #descrizione

  • La prima parte del codice (@media all) controlla le caratteristiche dell'intestazione, inclusi larghezza, margine e dimensioni del bordo. La seconda parte (palmare @media) eredita queste caratteristiche dalla prima parte e modifica anche la larghezza dell'intestazione al 90 percento per i monitor portatili. Poiché vogliamo che il nuovo colore di sfondo sia usato in entrambi i casi, aggiungeremo una riga di codice per il colore di sfondo nella prima parte (@media all). Questa nuova riga di codice è in grassetto di seguito. Nell'esempio seguente, abbiamo usato un colore grigio chiaro ma sentiti libero di usare qualsiasi colore desideri.

    @media all {
    #intestazione {
    colore di sfondo: # EFE3EF;
    ...

  • Successivamente, cambieremo il carattere tipografico per il titolo nel carattere popolare, in stile casual chiamato Comic Sans MS. Certo, sei libero di usare qualsiasi tipo di carattere che ti piace. Le tre parti successive del codice CSS del modello (# blog-title, # blog-title a, # blog-title a: hover) controllano le caratteristiche per il titolo del blog. La prima parte controlla le caratteristiche generali e le altre due parti controllano l'aspetto del testo quando funziona come collegamento ipertestuale. Per impostare il carattere tipografico o il carattere del titolo, per tutte le istanze, aggiungeremo il codice CSS per la famiglia di caratteri alla prima parte (# blog-title). Poiché il nome del nostro font contiene spazi, dovrà anche essere inserito tra virgolette ("comic sans ms").

    #Titolo del Blog {
    famiglia di caratteri: "comic sans ms";
    ...

  • Infine, lavoreremo sul codice CSS per la descrizione del tuo blog (#description). Questa è l'ultima parte del sei originale. Come puoi vedere di seguito, tutto il codice CSS che controlla le caratteristiche del carattere per il testo della descrizione è elencato insieme su una riga. Tutto quello che dobbiamo fare è aggiungere "comic sans ms" nella parte anteriore dell'elenco dei caratteri che renderà Comic Sans MS il carattere predefinito per il testo della descrizione.

    #description {
    ...
    font: 78% / 1.4em "comic sans ms", "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
    ...
    }

Al termine, fai clic sul pulsante Anteprima per visualizzare l'anteprima delle modifiche e quindi chiudere la finestra del browser per tornare alla pagina Web precedente. Fai clic sul pulsante Salva modifiche modello. Quando viene visualizzato il messaggio di conferma che indica che le modifiche sono state salvate, fare clic sul pulsante Ripubblica. Per verificare che il tuo blog sia stato aggiornato, fai clic sulla scheda Visualizza blog nel menu nella parte superiore della pagina. Potrebbe essere necessario aggiornare la pagina Web del tuo blog per vedere le modifiche.





Schermate ristampate su autorizzazione di Google Inc. GoogleTM, BloggerTM e BlogSpotTM sono marchi o marchi registrati di Google Inc. negli Stati Uniti e / o in altri Paesi.


Istruzioni Video: Come funzionano le sezioni e i widget in Blogger. (Dicembre 2021).