Pubblicato il 20/06/09 - aggiornato il  | 13 commenti :

Come racchiudere all’interno di un bordo e mettere un sottofondo colorato (background) ai nostri post su Blogger.

Questa è una personalizzazione piuttosto semplice che è indicata soprattutto per i blog che hanno un aspetto semplice e vogliono ravvivarlo un po’.

Andare su Layout > Modifica HTML e scaricare un modello completo per sicurezza. Cercare la seguente riga di codice cliccando su F3 o Ctrl+F

.post {

Troverete un codice di questo tipo

.post {
  padding-$startSide:20px;
  margin-bottom:20px;
  text-indent:12px;
  padding-$endSide:20px;
  line-height:22px;
}

Per aggiungere bordi e colore di sfondo basta aggiungere le seguenti righe colorate di rosso

.post {
border: 2px dashed #003366;
background:#FFFFFF;
  padding-$startSide:20px;
  margin-bottom:20px;
  text-indent:12px;
  padding-$endSide:20px;
  line-height:22px;
}

in cui le parti in blue possono essere personalizzate.

  1. 2 rappresenta il numero dei pixel del bordo
  2. dashed significa che il bordo è tratteggiato ma può essere sostituito da solid per una linea unita e dotted per una punteggiata
  3. I codici dei colori dopo il cancelletto possono essere scelti in funzione dei colori del nostro blog

Possiamo, nello stesso modo, personalizzare anche la data andando su

h2.date-header

troveremo un codice simile a questo

h2.date-header {
  border-bottom:none;
  font-size: 130%;
  text-align:$startSide;
  margin-top:20px;
  margin-bottom:14px;
  padding:1px;
  padding-$startSide:17px;
  color: $dateHeaderColor;
  font-weight: normal;
  font-family: Trebuchet MS, Verdana, Sans-serif;
}

 

che potremo modificare per esempio così

h2.date-header {
border: 2px dashed #003366;
background:#FFFFFF;
  border-bottom:none;
  font-size: 130%;
  text-align:$startSide;
  margin-top:20px;
  margin-bottom:14px;
  padding:1px;
  padding-$startSide:17px;
  color: $dateHeaderColor;
  font-weight: normal;
  font-family: Trebuchet MS, Verdana, Sans-serif;
}

con le stesse personalizzazioni precedenti. In questo caso anche la data sarà racchiusa in un bordo e avrà un colore di sottofondo. Salvate il modello e visualizzate il blog.



13 commenti :

  1. da quando hai aggiunto i bordi ai tuoi post trovo il blog molto più elegante :D

    RispondiElimina
  2. In alcuni Blog, vedo dei bordi arrotondati, addolciti e non squadrati. esiste un modo per farlo? :)

    RispondiElimina
  3. @L'altra notizia
    Se mi dai l'URL posso dare uno sguardo ai CSS...

    RispondiElimina
  4. Ciao, ci ho messo un pò perchè non ricordavo il blog preciso, però sapevo di averlo visto...

    Oggi ho cercato su blogger andando avanti mediante il pulsante "blog successivo"
    se vedi questo blog, ha gli angoli non squadrati ma più morbidi .
    eccolo http://www.monitordownloads.net/

    RispondiElimina
  5. @L'Altra Notizia
    Ma non è su Blogger :), comunque ho dato uno sguardo ed è più semplice di come pensassi. Sono dei semplici background. Vale a dire hanno messo delle immagini di sfondo con i bordi arrotondati. Per renderti conto di quello che dico vai qui.
    Ciao

    RispondiElimina
  6. Credo che sia su blogger perchè l'ho trovato sfogliando la funzione "blog successivo" che c'è nella barra sopra l'intestazione (quella per accedere all'account). Credo che abbia acquisato il dominio come ho fattto pure io ^^.

    Cmq non intendevo le immagini, ma i bordi che contornano ogni articolo, alla fine sono arrotondati, almeno che non scriva i suoi articoli all'interno di un'immagine, allora è una cosa che non sapevo :)
    Grazie cmq come sempre ^_^ Ciao

    RispondiElimina
  7. @L'Altra Notizia
    Hai ragione è su Blogger. Il concetto è lo stesso e le immagini sono qui e qui. Ce ne sono molte altre. E' un lavoro fatto da un grafico professionista. Ciao

    RispondiElimina
  8. Mi potresti aiutare a capire come si fa a staccare di qualche mm il bordo dal testo? E' tutto vicino è sembra un po' disordinato...

    RispondiElimina
  9. @Claudia
    aumenta i pixel del padding o padding-left o padding-$startSide. Se si tratta del bordo sinistro...

    RispondiElimina
  10. Ciao Ernesto,
    volevo chiederti se è possibile creare una cornice tra il blog e lo sfondo, come ad esempio in questo sito http://ilquotidianoinclasse.corriere.it/, dove la linea grigia separa l'area scritta dallo sfondo bianco.
    Grazie :)

    RispondiElimina
  11. @DietaEDintorni
    Non si tratta di un sito di Blogger ma il sistema potrebbe essere questo
    http://www.ideepercomputeredinternet.com/2011/09/come-creare-dei-riquadri-dentro-il-post.html

    RispondiElimina
  12. Ciao, ho visto che questo post ha ormai 4 anni, dunque volevo chiederti se è ancora valido o nel tempo ne hai fatti altri più moderni e con il tuo solito blog di prova da visualizzare, perchè vedo che non c'è neanche un'immagine del risultato.

    Poi volevo chiederti anche, possibile che a distanza di più di 4 anni ancora sia così difficile arrotondare i bordi in maniera semplice?

    RispondiElimina
    Risposte
    1. Non credo a meno che tu non abbia un vecchio modello oppure uno scaricato da internet che risalga a quel periodo. Non ricordo di essermi occupato di nuovo di questa cosa. Devo dire però che mi ero dimenticato anche di questo post :)
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy