CSS untuk Contact form di blogger/blogspot

CSS

Sebelumnya saya telam memposting "Cara memasang widget contact form di blogger" dan "Memasang widget contact form di halaman statis blogger". kali ini saya akan membagi tiga css yang berbeda untuk formulir kontak widget blogger anda dan bagaimana cara menggunakannya, langsung saja...



01CSS form contact #1


/*---- Custom Blogger Contact Form -----*/

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email-message {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: #FFFFFF;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

#ContactForm1_contact-form-email-message {
width: 245px;
height: 150px;
line-height: 150%;
}

#ContactForm1_contact-form-submit:hover, textarea:hover,
#ContactForm1_contact-form-submit:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}

#ContactForm1_contact-form-submit{
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
height:40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}



02CSS form contact #2


/*---- Custom Blogger Contact Form -----*/

#ContactForm1_contact-form-name {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBJzWzdD1znAw0y0mMeey6E0NXEvHLWaH2xM8hpGg7Jj-bG1wZEkMskvEkvvhPs0-wosUIOgLSQW5eZVOhS6UTtSCCfD6W5QHXDnJ_b1QSBqI7QF15z8dwbSYzy7qw8ZzpRd88jAtbjS4/s1600/form_name.gif") no-repeat scroll 5px 50% rgb(255, 255, 255);
}

#ContactForm1_contact-form-email {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh8ZXROrzn9c3l9ALo7Ma9gzeJa0_NfPeLODYnMuFhAPnBs4yDgwoi5ggyrCmTSRxGnUaqrpa_x34VELFL-SX1UzHsVFRUkRjAoAbedfT70JMI-NWQUa3lXtyGv5lfd4rCtYvWmF8BY7Q/s1600/form_email.gif") no-repeat scroll 5px 50% rgb(255, 255, 255);
}

#ContactForm1_contact-form-email-message {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOnz82MBKbpiiAHbTjH9o67IREhTmy8HkLZECQrRPaROteOIr63uFDSrvdIXObz_aSFUGYeyBIu7EKShntIxv7kmD6F7yCMooHjrozqdhJlxUpCkoMbrf-f1TMv1Xh-_tJqcFmxiPqCBU/s1600/form_note.gif") no-repeat scroll 5px 6px rgb(255, 255, 255);
}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email, #ContactForm1_contact-form-email-message {
margin: 0px;
width: 250px;
border: 1px solid rgb(221, 221, 221);
padding: 3px 5px 3px 25px;
}

#ContactForm1_contact-form-submit {
margin-top: 5px;
padding: 5px;
width: 100px;
background-color: rgb(225, 77, 77);
background-image:none;
border: 1px solid rgb(57, 21, 21);
border-radius: 5px 5px 5px 5px;
color: rgb(255, 255, 255);
text-align: center;
font-weight: bold;
line-height: 48px;
text-transform: uppercase;
text-shadow: 0px 1px 0px rgb(0, 0, 0);
}


03CSS form contact #3


/*---- Custom Blogger Contact Form -----*/

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email {
border-color: rgb(0, 0, 0);
border: 1px solid rgb(186, 186, 186);
padding: 4px 6px 6px 5px;
background-color: rgb(255, 255, 255);
outline: 0px none;
margin-right: 32px;
min-height: 32px;
position: relative;
-moz-box-sizing: border-box;
line-height: normal;
font-size: 100%;
margin: 0px;
vertical-align: baseline;
font-family: sans-serif;
}

#ContactForm1_contact-form-email-message {
border-color: rgb(0, 0, 0);
padding-right: 5px;
min-height: 100px;
width:265px;
border: 1px solid rgb(186, 186, 186);
padding: 4px 6px 6px 5px;
background-color: rgb(255, 255, 255);
outline: 0px none;
margin-right: 32px;
min-height: 32px;
position: relative;
-moz-box-sizing: border-box;
overflow: auto;
vertical-align: top;
font-size: 100%;
margin: 0px;
vertical-align: baseline;
font-family: sans-serif;
}

#ContactForm1_contact-form-submit {
background-image:none;
background-color: rgb(0, 130, 135);
color: rgb(255, 255, 255);
font-family: 'Segoe UI','Open Sans',Verdana,Arial,Helvetica,sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
vertical-align: middle !important;
min-width: 90px;
min-height: 32px;
height: 32px;
border: 1px solid transparent;
color: white;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
text-align: center;
cursor: pointer;
padding: 4px 10px;
position: relative;
outline: medium none;
border-radius: 0px 0px 0px 0px;
}

Cara Menambahkan Gaya Custom Untuk Formulir Kontak:

Menambahkan kode CSS kustom ke blog Anda cukup sederhana. Beberapa dari Anda hanya akan meninggalkan bagian ini, karena mereka tahu bagaimana trik ini sebenarnya mudah. Bagi anda yang tidak tahu, di ikuti langkah dibawah ini:

  1. Login ke Blogger> Template> Edit HTML
  2. Cari kode tag ]]> </ b: skin>:
  3. Tambahkan CSS favorit anda di atas kode ]]> </ b: skin> 
  4. Simpan template Anda

bagaimana, cukup mudahkan. Anda juga dapat berbagi gaya kustom Anda di bagian komentar di bawah ini ...

Semoga berguna

Artikel Terkait

  • Memahami CSS dan Penerapan CSS pada HTML
    Css sendiri berfungsi untuk mendesain tampilan/layout agar terlihat lebih indah dan berkualitas.selain itu css juga dapat meringkas kode-kode yang di gunakan pada template anda dan tentunya anda pun akan sedikit menggunakan kode kode pada blog. CSS adalah singkatan dari Cascading Style Sheets CSS digunakan untuk mendesain tampilan dari html,…
  • CSS untuk Contact form di blogger/blogspot
    Sebelumnya saya telam memposting "Cara memasang widget contact form di blogger" dan "Memasang widget contact form di halaman statis blogger". kali ini saya akan membagi tiga css yang berbeda untuk formulir kontak widget blogger anda dan bagaimana cara menggunakannya, langsung saja... 01CSS form contact #1 /*---- Custom Blogger Contact…
  • Efek shadow dengan css :before :after pseudo-elemen
    Dalam tutorial ini kita akan menciptakan kotak dengan efek bayangan hanya dengan CSS. Kita akan menggunakan CSS shadow properti yang merupakan salah satu properti CSS favorit saya yang akan Anda lihat dalam tutorial ini dan betapa mudahnya Anda dapat menggunakannya untuk kreasi anda sendiri. Properti box-shadow memungkinkan Anda untuk dengan…
  • :before dan :after Elemen Pseudo pada Sidebar
    Ini adalah metode lain menggunakan properti :before dan :after dan akan bekerja tanpa masalah di browser apapun, termasuk IE8. trik ini akan membagi bar header sidenar ke kiri dan kanan bagian, di mana kiri akan berisi judul dan kanan link terkait. Ide menghasilkan Adobe ini sebenarnya dibahas oleh css-trik yang disesuaikan dengan Blogger. …
  • Blockquote yang membuka otomatis di posting
    Dengan memanfaatkan css transisi dan css pseudo classes kita coba untuk membuat blockuote yang akan terbuka dengan sendirinya ketika pointer di arahkan ke area elemen blockquote tersebut. trik ini sendiri sebenarna lebih cenderung seperti efek hover, dan tidak menggunakan javasript atau pun jQuery di dalam cara kerjanya. jika anda ingin tau cob…
  • Bullet otomatis dan manual dengan css di post
    Bullet default dari blogger memang tidak terlihat begitu jelek di posting namun para blogger memodifikasinya agar lebih terlihat unik dan berbeda dari yang lainnya dengan menambahkan icon yang bervatif. Selain menambah kesan postingan unik bullet hasil modifikasi ini juga menambah tampilan posting lebih cantik dan tidak terlihat biasa saja se…

Tidak ada komentar :


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...