Pagina aggiornata... Martedì, 25 Agosto 2026 * Tempo di caricamento 1.001 secondi
Link navigazione : Home telaio ೡ Home ~ Template ~ Blogger_tutorial » Bordo blog

Inserire un bordo colorato al blog

Nei blog Blogger non è previsto un bordo di "rifinitura" della pagina
ed anche se si inserisce uno sfondo personalizzato sembra proprio che manchi qualcosa...



A me piacciono le cose fatte per bene ^_^ e sono riuscita a capire come inserire un bordo
direttamente nello style e senza rischiare di fare danni nel codice sorgente

Vi ricordo sempre che i miei esempi sono fatti sul tema "Simple Pale" di Blogger
quindi se avete nel blog un'altro tema ci potrebbero essere delle differenze nel codice

Per l'esempio ho usato i parametri: border: 15px solid #b17148; ovvero
un bordo solido di 15 pixel ed un colore abbinato a quello della pagina blog, personalizzate
come preferite il tipo e lo spessore del bordo, sostituite ovviamente "#b17148"
con un colore coordinato al vostro blog

Clicchiamo su "Design" per accedere al pannello, poi su "PERSONALIZZA"
e in fondo (scroll nel box) sulla sinistra della pagina che si visualizzerà apriamo
il menu "Avanzate" clicchiamo sul triangolino accanto a "Testo pagina" per aprire
il menu a tendina, scorriamo fino in fondo e clicchiamo su "Aggiungi CSS"





Se abbiamo centrato l'immagine logo troveremo i parametri che abbiamo inserito



Andiamo a capo dopo la parentesi graffa e aggiungiamo questi altri parametri:

.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
margin-bottom: 1px;
border: 15px solid #b17148;
}

Nell'anteprima blog sarà subito visibile la modifica, il blog ora ha anche il bordo!
Clicchiamo sull'icona floppy che troviamo a destra in fondo alla pagina, per salvare la modifica

🌷Cliccate sull'immagine per ingrandire e vedere maggiori dettagli


N.B.: Se avete eliminato l'effetto "shadow", l'ombreggiatura che c'è di default nel tema Blogger o se
volete approfittare per farlo ora, in base agli sfondi o ai colori che si inseriscono nelle personalizzazioni
può creare un effetto non proprio piacevole, allora il codice da inserire per il bordo sarà:

.content-outer {
margin-bottom: 1px;
border: 15px solid #b17148;
}

🦉Ricordatevi sempre di salvare affinché le modifiche siano attivate nel blog,
l'anteprima serve solo a farci capire se le modifiche fatte ci piacciono



Se preferite avere i bordi solo ai lati della pagina i parametri da inserire sono:

.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
margin-bottom: 1px;
border-left: 15px solid #b17148;
border-right: 15px solid #b17148;
}

Senza effetto "shadow"

.content-outer {   
margin-bottom: 1px;
border-left: 15px solid #b17148;
border-right: 15px solid #b17148;
}

Spero di essere stata chiara in ogni passaggio, in caso contrario scrivetemi un messaggio
Un abbraccio... buon lavoro e come sempre buon divertimento ^_^
Ciao alla prossima ೡPenelope ♥

Copiato negli appunti!

Dai un giudizio a questo tutorial, Grazie ^_^


Vota qui! Grazie!
100%
Voti totali: 1
Rating... 5



Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^










🪴Pagina visitata da 2785 utenti