Personalizza la sezione Header del tuo blog Blogger.com

Aprile 26, 2024

Nell'ultimo tutorial, abbiamo personalizzato la sezione Link per il tuo Blogger^TM 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.

@media all
palmare @media
#Titolo del Blog
# blog-title a
# blog-title a: hover
#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. Google^TM, Blogger^TM e BlogSpot^TM 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. (Aprile 2024).

Personalizza la sezione Header del tuo blog Blogger.com, HTML, cambia titolo e descrizione del tuo blog Blogger, cambia il carattere tipografico per il modello Blogger, aggiungi uno sfondo colorato al modello Blogger, cambia il codice CSS per il modello Blogger, aggiungi il codice CSS al templage di Blogger , Font modello Blogger, famiglia font tipo Blogger, tag stile CSS

Articolo Precedente

Articolo Successivo

Warhammer 40.000: Dawn of War II

Aprile 2024

Una partenza dalla prima Dawn of War, Dawn of War II si afferma come una strategia / un gioco di ruolo tattico in contrasto con il gameplay più convenzionale dell'originale. Tuttavia, conserva gli...

computer

XBox 360 Elenco risoluzione display di gioco

Aprile 2024

L'XBox 360 è pienamente in grado di produrre incredibilmente alta qualità e alta definizione. Spetta a ciascun game designer trarre vantaggio da quel livello di dettaglio. Questo grafico ti aiuterà...