Aggiungere e personalizzare un bordo ai post e agli elementi del blog su Blogger


image Altra proposta votatissima nel sondaggio è stata la possibilità di aggiungere e personalizzare un bordo ai post e agli elementi del blog. Con questo articolo spiegherò sia come aggiungere un bordo fatto non solo da linee ma anche da altri motivi.

Come sempre partirò dal template Minima (il più diffuso e base di partenza per la maggior parte degli altri) per fare l’esempio.

Come viene definito il bordo dei post e degli elementi del blog

L’aspetto dei bordi viene definito dal codice CSS presente nei template. Nel template Minima, l’aspetto dei post viene definito da questo codice:

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }

Mentre l’aspetto dei widget da questo:

.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}

Più genericamente, possiamo dire che la definizione dello stile dei post comincia con .post o #post, mentre quello degli elementi della colonna laterale con .sidebar o #sidebar.

Modifichiamo i bordi dei post

Delle righe viste, ce ne interessa particolarmente una, ed è quella che definisce il bordo delle varie parti:

border-bottom:1px dotted $bordercolor;

Questa riga indica di inserire un bordo sotto gli elementi (border-bottom), larga 1 pixel (1px), punteggiata (dotted), del colore predefinito da Layout->Caratteri e colori ($bordercolor, ovvero Colore del bordo nella personalizzazione dei colori). Se nel vostro template non trovate questa riga, inseritela voi stessi nella sezione corrispondente!

Vediamo le possibili combinazioni del comando:

  • border: inserisce un bordo in tutto l’elemento
  • border-bottom: inserisce il bordo solo in fondo all’elemento
  • border-top: inserisce il bordo solo in alto nell’elemento
  • border-left: inserisce il bordo a sinistra
  • border-right: inserisce il bordo a destra

Per fare una prova e capire il concetto, sostituiamo nel codice che definisce l’aspetto del post la parola border-bottom con border:

.post {
  margin:.5em 0 1.5em;
  border:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }

Ecco l’aspetto che avrà il post:

image

Il bordo non è più solo sotto ma tutto intorno. In questo caso si nota davvero poco, ma possiamo intervenire sul primo parametro (1px) per definire la larghezza del bordo:

.post {
  margin:.5em 0 1.5em;
  border:5px dotted $bordercolor;
  padding-bottom:1.5em;
  }

Ed ecco il risultato ottenuto:

image

Adesso si nota sicuramente di più. Passiamo al secondo parametro (dotted - punteggiato) che definisce l’aspetto della linea. Ecco i possibili valori:

  • none (nessun bordo)
  • hidden
  • dotted
  • dashed
  • solid (un linea compatta)
  • double
  • groove
  • ridge
  • inset
  • outset

Facciamo direttamente una prova per capire, nel codice sostituiamo dotted con dashed (tratteggiato):

.post {
  margin:.5em 0 1.5em;
  border:5px dashed $bordercolor;
  padding-bottom:1.5em;
  }

Ecco il risultato:

image

A questo punto resta l’ultimo parametro, $bordercolor, che potete personalizzare direttamente da Layout->Caratteri e colori (Colore del bordo) oppure decidere voi stessi usando la codifica RGB dei colori (potendo così scegliere un colore diverso per le varie sezioni del blog). Proviamo a cambiare $bordercolor con #FF9900 (che provato con Color Scheme Online darà una tonalità di arancione):

.post {
  margin:.5em 0 1.5em;
  border:5px dashed #FF9900;
  padding-bottom:1.5em;
  }

Ecco come appaiono i nostri post ora:

image

Adesso potete sbizzarrirvi a provare le varie cominazioni.

Modifichiamo i bordi degli elementi della colonna laterale

Ricordiamoci della seconda porzione di codice, quella che definisce il bordo dei widget:

.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}

In realtà questa porzione non definisce solo l’aspetto della colonna laterale ma anche quella dell’area occupata dalle varie sezioni del blog. Per semplificare le cose, incolliamo subito sotto queste righe:

.sidebar .widget {
  border-bottom:1px dotted $bordercolor;
}

Che ci permetteranno di personalizzare solo il bordo degli elementi della colonna laterale. Facciamo una prova più completa, modificando così il codice aggiunto:

.sidebar .widget {
  border-bottom:5px dotted #993300;
  border-left:5px dotted #993300;
 
}

Che secondo quanto spiegato sopra, aggiungerà un bordo sotto (border-bottom) e uno a sinistra (border-left):

image

Anche se la cosa può sembrare più complicata di quella che è, basta fare delle prove per afferrare subito il concetto. Per qualsiasi chiarimento, lasciatemi un commento!

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

41 commenti:

Vinnie ha detto...

Bella modifica

AUTOdiMERDA ha detto...

o ciao tene scusa l OT ma mi son perso la mia precedente domanda. Quel icona comunista della falce e martello per l'edit veloce è possibile farla esplodere per favore? :)

Tenebrae ha detto...

@paolo: è stata inserita nel sondaggio

Iole ha detto...

Tenebrae sei sempre chiarissimo.
Io ci lavoro tutti i giorni con i fogli di stile, l'html e il javascript ma non riesco ad essere chiara come te nelle spiegazioni.

chiara ha detto...

é chiarissimo, io il colore dei bordi l'ho modificato da sola, ma come cambiare forma non lo sapevo proprio!vorrei togliere i bordi alle foto perchè col formato polaroid stanno malissimo secondo me..proverò così, allora, grazie
chiara

Tenebrae ha detto...

@iole: grazie iole! ah, rimani nei paraggi mi raccomando, che stasera (salvo imprevisti) sarai nominata ;)

@chiara: fammi sapere se va tutto come deve!

Stefano ha detto...

Ciao e complimenti per il blog strepitoso che seguo sempre!
Posso farti una domanda che non c'entra con questo post?
Nel mio blog (ancora di prova) ho inserito un header dal mio pc in formato jpg, metti che abbia un peso di circa 80 kB, ebbene, una volta caricato, quando visualizzo il blog noto che è più degradato e di bassa qualità.
Ci clicco col tasto destro, proprietà, e mi accorgo che è circa 27 kB!
Com'è possibile che l'immagine che ho caricato (e che ora risiede su un account picasaweb come le immagini che carica blogger) da 80 kB venga ridotta a 27 kB?
Non ho mai letto nessuna funzione di "ricompressione" automatica di picasaweb a riguardo..
E' una cosa che mi infastidisce perchè anche con 70 kB l'immagine è buona, mentre con 27 kB perde leggibilità..
Spero che potrai aiutarmi, per ora grazie infinite..

Tenebrae ha detto...

@stefano: la cosa suona nuova anche a me, sinceramente... l'unica cosa che mi viene in mente è che tu abbia selezionato l'opzione di adattare le dimensioni dell'immagine all'header, perchè magari troppo grande, anche se questo non spiega realmente la cosa

mi dovresti lasciare il link all'immagine e permettermi di vedere il tuo blog, così magari riesco a farmi un'idea

Iole ha detto...

@Tenebrae: sarò nominata??? che onore!

alexilgrande ha detto...

Ciao!


Ti chiedo gentilmente una cosa. Ho creato tempo fà un bottone per il mio blog. Il problema è che nel bottone, come puoi vedere tu stesso nella mia pagina, c'è scritto "ALEXILGRANDE", il mio nick. Non ho messo "IL CANE DA GUARDIA DEL POTERE" perchè è un nome troppo lungo da mettere nel bottone. Il problema è che voglio trovare il modo per mettergli il nome del mio blog e non il mio nickname. Quello che ti chiedo è proprio questo: cosa faccio? Tu che sei un blogger creativo puoi aiutarmi?

http://ilcanedaguardiadelpotere.blogspot.com/

amrita ha detto...

al solito,c'entro come i cavoli a merenda,ma mi servirebbe un elemento da aggiungere,per vedere i commenti che mi lasciano.qualcosa che li metta bene in evidenza,senza dover controllare ogni post...dove lo trovo sto coso?l'ho visto in diversi blog,ma cerca cerca,non ho trovato nulla...

enrico ha detto...

Ciao Tenebrae, come stai?Mi serve un aiuto per risolvere un problema. Premetto che questo mio commento non è inerente all'articolo qui sopra e per questo mi scuso, ma non sapevo dove poterti postare questo mio quesito.
Il problema è che ho notato che quando apro il mio blog (http://parliamodivino.blogspot.com) con Firefox ci sono alcuni post che nella home page vengono visualizzati per intero, invece che in parte con sotto "leggi il resto dell'articolo" come accade per gli altri. Ho notato che questo succede con gli articoli che presentano all'interno degli elenchi puntati. Puoi darmi qualche consiglio?grazie

Il Blog | Attualità | Psicologia ha detto...

Molto interessante, ma quando hai tempo caro conterraneo, guarda se riesci a sapere se noi poveri splinderiani potremo mai inserire friendconnect... :-)

Ciao
Il Blog | Attualità | Psicologia

novalis ha detto...
Questo commento è stato eliminato dall'autore.
Ketty ha detto...

Ciao Tenebrae...ho seguito i tuoi consigli e ho anche rimpicciolito le immagini, ma non ho risolto il problema. E se dipendesse da Windows Live Writer? Magari il prossimo post provo a farlo direttamente dal blog senza usare WWR e se funziona ti faccio sapere...Non è di vitale importanza, ma ora è diventata una sfida! :-) Cmq grazie e... sei davvero in gamba!
Ketty

Dany ha detto...

voglio proprio provarci,
ma è possibile inserire un'immagine che faccia da cornice?
ciao e grazie mille per quello che fai

Dany ha detto...

per ora ho messo il bordo ed è stato molto facile grazie alle tue spiegazioni,

altra domanda (non mandarmi.....)
e un effetto ombra come hai fatto alle immagini è possibile farlo ai bordi del post?

gianpy1988playlist ha detto...

sei straordinario orazio, era da tempo che stavo pensando a questa modifica sul blog, bravissimo!

novalis ha detto...

Tutto apposto. Grazie Orazio

flid ha detto...

@stefano:

tutte le immagini caricate sui blog di piattaforma blogger presentano un limite di kb quando vengono caricate. Per esempio le immagini caricate nei post non devono superare i 290 kb altrimenti vengono ridotte molto nella qualità; io da quando creo sfondi 1280x800 e 1440x900 ho dovuto hostare le immagini in siti esterni e non Picasa, perchè sono un pò pesanti e non ho intenzione di ridurre la qualità per i compromessi che ti impone Blogger. Stessa cosa vale per l'header, viene ridotta la qualità se supera il limite. Per risolvere il problema carica l'header in un host esterno e quando lo inserisci nel blog lo carichi dall'indirizzo dell'host e non dal pc. Così il peso dell'immagine è indifferente. Spero di esserti stato utile.

Monica ha detto...

ciao Orazio, ho visto alcuni template in giro che in fondo ad ogni post (dopo la data di pubblicazione e l'elenco delle etichette) hanno un'immagine, ad esempio un divisorio. Come posso fare per inserirla?
Grazie 1000000
Ciao

L'Altra Notizia ha detto...

ciao, avrei bisogno di aiuto su una cosa, ho fatto i bordi tutto bene, però il bordo mi viene attaccato al testo, vorrei che ci fosse un po' di distanza tra il bordo (io ho fattto solo il bordo a destra) e il testo...

immagino che devo usare il comando padding, ma non so bene di preciso.
spero mi aiuterai ^_^
ciao

Tenebrae ha detto...

@altra notizia: ne ho parlato in questo post, dovresti risolvere!

MWebmaster ha detto...

ciao!!!ho lo stesso problema di altranotizia!
ho un blog a tre colonne ho modificato i margini ma il testo del post mi rimane attaccato al bordo sinistro....help me!!!

Marica ha detto...

ciao,
utilissimo anche questo post...
io nel mio blog ho cancellato tutti i bordi perchè mi piace di più così... solo che tra un post e l'altro vorrei inserire un'immagine (al momento ho lasciato il bordo "dotted"), potresti aiutarmi?
http://chiarordiluna.blogspot.com

Varese Wedding ha detto...

Complimenti per il sito !! E' molto preciso e utile alle persone alle prime armi come me !! Non ho trovato questa informazione: come si inserisce una cornice doppia semplice alle foto, come quelle delle foto dei blog dei fotografi??
grazie
Varese

flblu ha detto...

è possibile inserire un'immagine che faccia da cornice?

inchiostronero ha detto...
Questo commento è stato eliminato dall'autore.
Pennywise ha detto...

ciao ho un problema con un mio blog... ho la sidebar a sinistra, ci ho messo dei widget e il titolo di questi me lo mette sempre e solo in maiuscolo anche se io lo scrivo minuscolo... altro problema che non me lo allinea a sinistra come il contenuto del widget... hai qualche idea su come risolvere il problema?

altro problema è che il nuovo blogger nn mi da modo di cambiare il carattere dei post, me lo fai scegliere ma poi nn mi fa nessuna variazione, da cosa dipende???

questo è il link del blog tanto per farti un idea http://lacgilchevogliamofirenze.blogspot.com/...

Chiara -Cucinando con mia Sorella- ha detto...

ciao Tenebrae!
ho applicato il css con successo... solo che vorrei sapere se è possibile distanziarlo un pò dal post... le linee così vicne al corpo del post ho paura che facciano un pò di confusione quando si .
Grazie, Chiara

Chiara -Cucinando con mia Sorella- ha detto...

risolto!
padding:)

ELENA SOLUNA ha detto...

non ci sono riuscita :( uffa ! non mi potresti aiutare

方松腾 ha detto...

cheap jordans
michael kors outlet online,michael kors,kors outlet,michael kors outlet,michael kors handbags,michael kors outlet online sale,michael kors handbags clearance,michael kors purses,michaelkors.com,michael kors bags,michael kors shoes,michaelkors,cheap michael kors
mulberry handbags
tory burch outlet online
swarovski crystal
canada goose coats
toms outlet
michael kors factory sale
giuseppe zanotti sale
nba jerseys wholesale
fitflops shoes
hollister pas cher
longchamp outlet online
cheap mlb jerseys
swarovski outlet
swarovski outlet

dong dong23 ha detto...

cheap oakley sunglasses
michael kors outlet online
nike sb
nike running shoes
true religion jeans
nfl jerseys wholesale
christian louboutin outlet
abercrombie & fitch
celine
polo ralph lauren
nike basketball shoes
coach outlet
michael kors handbags
nike roshe flyknit
polo ralph lauren
coach outlet online
rolex watches
coach factory outlet
celine
cartier watches
ray ban sunglasses outlet
coach factory outlet
michael kors outlet
caoch outlet
coach outlet
michael kors outlet online
louis vuitton handbags
nike air force 1
louis vuitton outlet
louis vuitton
louis vuitton outlet
giuseppe zanotti sneakers
michael kors outlet
michael kors handbags
cheap jordan shoes
replica watches for sale
michael kors outlet clearance
ray ban sunglasses
cheap jerseys
20165.4wengdongdong

Chenzhen 20160303chenzhen ha detto...

coach purses on sale
cheap ray bans
coach outlet online
louboutin outlet
ray ban outlet store
tiffany and co outlet
nike free 5.0
birkenstocks
cartier love ring
ghd hair dryer
lacoste shoes
nike free flyknit 3.0
louis vuitton purse
cheap jordan shoes
adidas trainers
burberry outlet
michael kors outlet online
ghd
coach outlet online
longchamp outlet
cheap oakley sunglasses
christian louboutin uk
black timberland boots
michael kors outlet clearance
rolex replica watches
louis vuitton handbags
polo ralph lauren outlet
yeezy boost 350 white
louis vuitton handbags
adidas nmd runner
louboutin shoes
michael kors handbags
yeezy boost 350
jordan pas cher
michael kors uk
fake oakleys
louis vuitton pas cher
pandora jewelry
adidas gazelle
louis vuitton outlet
chenzhen201662

Yuanyuan Lin ha detto...

7.25lllllyuanmichael kors outlet online
michael kors outlet
mulberry outlet
mulberry uk
abercrombie and fitch
abercrombie outlet
abercrombie and fitch
abercrombie outlet
adidas outlet store
adidas outlet
adidas shoes
adidas trainers
adidas uk store
adidas uk
adidas wings shoes
adidas wings
air force 1 shoes
nike air force 1
air jordan 11
jordan 11
air jordan 13
jordan 13
air jordan 4
jordan 4
air jordan shoes for sale
air jordan shoes
air max 90
nike air max 90
air max 90
air max 90
asics,asics israel,asics shoes,asics running shoes,asics israel,asics gel,asics running,asics gel nimbus,asics gel kayano
asics
babyliss flat iron
babyliss pro
basketball shoes,basketball sneakers,lebron james shoes,sports shoes,kobe bryant shoes,kobe sneakers,nike basketball shoes,running shoes,mens sport shoes,nike shoes
7.25

chenlina ha detto...

ralph lauren outlet
uggs outlet
mont blanc pens
gucci handbags
coach factory outlet
michael kors handbags
coach outlet
michael kors outlet
canada goose coat
juicy couture
nike outlet
cheap uggs
canada goose outlet
louboutin sale clearance
ray ban sunglasses outlet
coach outlet
oakley sunglasses
louis vuitton handbags
gucci handbags
coach outlet store online clearances
longchamp handbags
hollister outlet
uggs outlet
rolex submariner
ray ban wayfarer
true religion outlet
coach factory outlet
ralph lauren outlet
gucci outlet
cheap oakley sunglasses
christian louboutin paris
ugg outlet
new york knicks jerseys
coach outlet online
michael kors outlet
oakley sunglasses
cartier watches
michael kors outlet
nhl jerseys
ugg italia
chenlina20160823

Unknown ha detto...

michael kors outlet week!
ed hardy clothing for
salvatore ferragamo HOW
versace shoes Super
nike trainers uk top
nike tn pas cher it
cincinnati bengals jerseys stuffed
air max 90 adding
nike roshe run I
michael kors outlet super

龙大猫 ha detto...

kobe sneakers
kobe 9
kobe 11
chrome hearts
yeezy boost 350
adidas yeezy
yeezy shoes
yeezys
yeezy boost
adidas yeezy boost

raybanoutlet001 ha detto...

gucci borse
michael kors handbags
birkenstocks
titans jersey
ray ban sunglasses
michael kors handbags
new york knicks
birkenstock sandals
cleveland browns jerseys
mont blanc pens outlet

xiaozhengsen ha detto...

2017-5-30 xiaozheng6666
polo shirts
polo ralph lauren outlet
pandora outlet
canada goose
polo outlet
mbt shoes
ralph lauren uk
adidas yeezy shoes
mbt shoes
mlb jerseys


Prima di lasciare un commento, leggete qui

Posta un commento