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.
- 2 rappresenta il numero dei pixel del bordo
- dashed significa che il bordo è tratteggiato ma può essere sostituito da solid per una linea unita e dotted per una punteggiata
- 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.
da quando hai aggiunto i bordi ai tuoi post trovo il blog molto più elegante :D
RispondiEliminaIn alcuni Blog, vedo dei bordi arrotondati, addolciti e non squadrati. esiste un modo per farlo? :)
RispondiElimina@L'altra notizia
RispondiEliminaSe mi dai l'URL posso dare uno sguardo ai CSS...
Ciao, ci ho messo un pò perchè non ricordavo il blog preciso, però sapevo di averlo visto...
RispondiEliminaOggi 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/
@L'Altra Notizia
RispondiEliminaMa 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
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 ^^.
RispondiEliminaCmq 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
@L'Altra Notizia
RispondiEliminaHai 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
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@Claudia
RispondiEliminaaumenta i pixel del padding o padding-left o padding-$startSide. Se si tratta del bordo sinistro...
Ciao Ernesto,
RispondiEliminavolevo 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 :)
@DietaEDintorni
RispondiEliminaNon 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
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.
RispondiEliminaPoi volevo chiederti anche, possibile che a distanza di più di 4 anni ancora sia così difficile arrotondare i bordi in maniera semplice?
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@#