[Blogger] Aggiungere il modulo di contatto e cambiare gli stili esistenti
Per aggiungere il modulo dei contatti in un blog di Blogger, basta andare sulla bacheca da www.blogger.com, cliccare su Layout:
Aggiungi un gadget:
Cliccare a sinistra su Altri gadget e successivamente su Modulo di contatto:
Salviamo tutto cliccando su Salva e avremo il Modulo di contatto nella o colonna o nella posizione che più lo si desidera:
Per cambiare gli stili esistenti del Modulo di contatto (dimensioni, colore, carattere etc), basta aggiungere un CSS andando nella bacheca di Blogger da www.blogger.com, clicchiamo dal menù a tendina su Modello:
Clicchiamo adesso su Personalizza:
- Avanzato
- Aggiungi un CSS
e nello spazio bianco vuoto aggiungiamo questo codice:
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
/* Campi e pulsante di invio */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Stile del pulsante Invia */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
/* Pulsante Invia al passaggio del mouse */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}
Diamo sempre un colpo di invio o di barra spaziatrice dopo il CSS perchè a volte l'editor non legge il copiaincolla. Salviamo tutto cliccando in alto a destra su Applica al blog:
Per cambiare il colore dello sfondo del Modulo di contatto, le dimensioni del contenitore, il colore dei bordi, il colore e la dimensione del pulsante Invia, basta andare nella bacheca da www.blogger.com, cliccare dal menù a tendina su
- Modello
- Modifica HTML (salvatevi prima una copia del template prima di fare modifiche)
- Cercare il codice appena inserito.
Per modificare le dimensione del contenitore del Modulo di contatto, nella sezione Contenitore del modulo di contatto, modificare il parametro in rosso:
/* Contenitore del Modulo di contatto */
.contact-form-widget {
width: 500px;
.contact-form-widget {
width: 500px;
Per modificare il colore dello sfondo del Modulo di contatto, modificare il parametro in rosso:
/* Contenitore del Modulo di contatto */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
/* Contenitore del Modulo di contatto */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
Per modificare il colore del carattere del Modulo di contatto, modificare il parametro in rosso:
/* Contenitore del Modulo di contatto */
.contact-form-widget {width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
Per modificare il colore del bordo del modulo di contatto, modificare il parametro in rosso:
/* Contenitore del Modulo di contatto */
.contact-form-widget {width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
E così via per gli altri campi.
