Blogger Book

Una delle nuove funzionalità che mi mancava era il gadget Modulo di Contatto di Blogger , un modulo che permette ai nostri lettori di contattarci privatamente senza dover aprire le nostre email. Il gadget in sé è utile e, sebbene non offra molte opzioni, credo che includa i campi più basilari e sufficienti di cui la maggior parte dei blogger ha bisogno.

Il vantaggio di questo gadget è che non dobbiamo dipendere da servizi esterni che poi ci limitano con un numero mensile di invii e ci obbligano a mantenere visibile il loro link.

Lo svantaggio è che il suo design è troppo semplice e forse è questo il motivo per cui molti utenti non osano utilizzarlo.

La buona notizia è che la sua semplicità ci permette di modificarlo a nostro piacimento e adattarlo al nostro template.
Sapete che non sono molto bravo con il design, ma ieri ho passato qualche ora a creare questi esempi, che vi daranno un'idea di come possiamo trasformare radicalmente questi widget e passare da semplici a accattivanti.

Ci sono 5 design e il codice è pronto per essere copiato e incollato. Per prima cosa, ti servirà il gadget Modulo. Se non lo hai ancora, vai su Design | Aggiungi un gadget . Si aprirà una piccola finestra; dal menu a sinistra, seleziona Altri gadget e poi Modulo di contatto .

Una volta inserito nel tuo blog, vai su Modello | Modifica HTML e prima di incollare il codice per lo stile del modulo che preferisci. Salva le modifiche e il gioco è fatto.

Stile di base

/* Modulo di contatto, stile base
----------------------------------------------- */
/* Contenitore principale */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 self;
margin-bottom: 25px;
float: left;
padding: 10px;
background: #d5dde6;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}
/* Stili dei campi */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
border-radius: 40px;
}
/* Campo messaggio */
.contact-form-email-message {
padding: 5px;
border-radius: 5px;
}
/* Pulsante Invia */
.contact-form-button-submit {
float: right;
width: 25%;
max-width: 35%;
height: self;
background: #28597a;
padding: 2px 5px;
border-radius: 15px;
border:none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Pulsante Invia al passaggio del mouse */
.contact-form-button-submit:hover{
background: #4a7694;
border:none;
}

Stile cartolina

/* Modulo di contatto, stile postale
----------------------------------------------- */
/* Contenitore principale */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 self;
margin-bottom: 25px;
padding: 10px;
border:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtI8QY_2ffc43oXOg8Dg2DLt2e2DOe_IYkBl_rf7pumV15di foZVSJEKbEz2vqf8r_fmPJONooaDvKDbAU0HPi0EfXNOIDJrRNm8JrIMSHCUyB3Mj4doGG-TCg_EZ10f6YZIRoz6YChU-9/s74/postal.png);
colore: #000;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* Stili del contenitore interno */
.contact-form-widget div.form {
sfondo: #fff;
immagine di sfondo: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnFE6bxX9JZ7_kCDUn78GmwJCvUktFTuBFhaPmV1gruGHrKN HHyHtkp0OxgwJKo3ZKcna4TptIlvAERJrafB2fadBDhyZAGiatxzkH_-wjaAaVi6xvF4fHvWdl5G2C99hdVCqhBtVDQ_NI/s133/stamp.png);
ripetizione sfondo: nessuna ripetizione;
background-position: 95% 85%;
padding: 1px 10px;
}
/* Stili dei campi */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo messaggio */
.contact-form-email-message {
width: 60%;
max-width: 60%;
padding: 5px;
}
/* Pulsante Invia */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: self;
background: #28597a;
padding: 2px 5px;
border-radius: 5px;
border:none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Pulsante di invio con il mouse */
.contact-form-button-submit:hover{
background: #a14248;
bordo: nessuno;
}

Stile limone nero

/* Modulo di contatto, stile nero limone
----------------------------------------------- */
/* Contenitore principale */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 self;
margin-bottom: 25px;
padding: 10px;
border:none;
background: #282828;
border-bottom: 35px solid #98bd3c;
color: #98bd3c;
}
/* Stili dei campi */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo messaggio */
.contact-form-email-message {
padding: 5px;
}
/* Pulsante Invia */
.contact-form-button-submit {
width: 25%;
larghezza massima: 35%;
altezza: self;
sfondo: #98bd3c;
padding: 2px 5px;
raggio del bordo: 2px;
bordo: nessuno;
colore: #282828;
dimensione del carattere: 13px;
famiglia di caratteri: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
peso del carattere: normale;
margine inferiore: 10px;
}
/* Pulsante di invio con il mouse */
.contact-form-button-submit:hover{
sfondo: #F9D423;
colore: #282828;
bordo: nessuno;
}

Stile femminile

/* Modulo di contatto, stile femminile
----------------------------------------------- */
/* Contenitore principale */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 self;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #d44897;
border-bottom: 10px solid #d44897;
sfondo: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAOvqH63xO-lZsxRp42tW0ce1v24ZRl6C31Yektrsp6osJ7 1pp6XswEu-Onx3_Ag3KiEXaf1amx-qcOazrg9cvn9aChg4OkV_e-RnXMt6WEW08kA2bAVnCRYIf1JB3ciY5NFjgnork0ylZ/s55/pink.png);
colore:#424242;
ombra riquadro: 0 1px 4px rgba(0, 0, 0, 0.2);
raggio bordo: 18px;
}
/* Stili del contenitore interno */
.contact-form-widget:before {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7sVLYUcwvuVt1LqNj0_FrkANG9FAFlyu7Qf_73VP0tOK8r 3WRThzElh2mt92MKRwMC-0G6qotC9luvDFIsDCZKTBIagplaXv5Kj82DkgBCBsWZnsZ7Lcxz85EutMOzs6mrynXUkrRDar4/s160/lazo.png);
background-repeat: no-repeat;
background-position: 100% 0;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
/* Stili dei campi */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo messaggio */
.contact-form-email-message {
padding: 5px;
}
/* Pulsante Invia */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: self;
background: #d44897;
padding: 2px 5px;
border-radius: 2px;
border:none;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Pulsante Invia al passaggio del mouse */
.contact-form-button-submit:hover{
background: #d1f6ff;
color: #424242;
border: none;
}

Stile metallico

/* Modulo di contatto, stile metallico
----------------------------------------------- */
/* Contenitore principale */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 self;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #424242;
border-bottom: 25px solid #424242;
sfondo: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnunOAuGIy1_CdVsily9qhd-o0fGl2XyUyu8l52opCzzObc2 L1OvdOsu_zhytFhupKYyRF5av4hcrAUuVqvg3YBULf0IcncKRsSfXkQG9207FfaLNFEEajjV66e2J5Gnp5hdpA96Vxb-pT/s128/metal.gif);
colore:#424242;
ombra testo: 1px 1px 1px #FFFAFB;
ombra riquadro: -6px 6px 6px 0px rgba(50, 50, 50, 0.65);
raggio bordo: 18px;
float: sinistra;
}
/* Stili dei campi */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
box-shadow:inset 1px 1px 5px 1px #808080;
}
/* Campo messaggio */
.contact-form-email-message {
padding: 5px;
}
/* Pulsante Invia */
.contact-form-button-submit {
width: 40%;
max-width: 40%;
height: self;
border:none;
border-top: 1px solid #9c9c9c;
background: #424242;
background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#575757));
sfondo: -webkit-linear-gradient(top, #424242, #575757);
sfondo: -moz-linear-gradient(top, #424242, #575757);
sfondo: -ms-linear-gradient(top, #424242, #575757);
sfondo: -o-linear-gradient(top, #424242, #575757);
padding: 2px 5px;
border-radius: 8px;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
margin-bottom: 10px;
float: right;
}
/* Passa il mouse sul pulsante di invio */
.contact-form-button-submit:hover{
background: #424242;
color: #ccc;
border:none;
}

In verde ho indicato a quale area appartiene ogni gruppo di stili, nel caso qualcuno volesse modificare qualcosa o creare il proprio design.
In ogni caso, la larghezza massima del gadget è controllata qui: max-width: 280px;

Tieni presente che alcuni stili, essendo CSS3, potrebbero non apparire uguali in tutti i browser, in particolare in Internet Explorer.

fonte