Modifikasi Widget Contact Form Keren

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Modifikasi Widget Contact Form Keren 

  Sudahkah anda tahu Fitur Blogger yang baru, yaitu Contact Form. Tapi terkesan terlalu simpel dan kurang menarik, karena itu saya memberi terobosan baru yang mungkin keren dan anda menyukainya. Karena ini Widget pada Tata Letak, maka anda harus memasangnya terlebih dahulu.

  Caranya mudah, silahkan anda ikuti sesuai dibawah ini

• 1. Masuk ke Blogger
• 2. Pilih Menu Tata letak
• 3. Tambah Widget
• 4. Pilih Widget Contact Form

• 5. Simpan

Jika anda Memasang Pada Halaman Statis atau Postingan

  Pasang Kode ini pada Halaman Baru atau Membuat Postingan Baru. Jangan Lupa pilih Mode HTML !

<div id="contact_wrap">

<h3>

Hubungi Kami</h3>

<form name="contact-form">

<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />

<div style="max-width: 222px; text-align: center; width: 100%;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

Tambahkan CSS

Jika anda tidak ingin memberatkan loading Blog anda, anda bisa memasang CSS ini pada Postingan dan tambahkan <style type="text/css"> CSS disini </style>

<style type="text/css">CSS disini</style>

/* CSS Contact Form by Blitarian4rt.com */

#ContactForm1{

display:none;

}

#contact_wrap {

margin: auto;

width: 321px;

height: 380px;

padding: 25px;

border-radius: 1em;

border: #600 solid 1px;

border-bottom: #420000 solid 1px;

background-color:#983738;

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#bf5355', endColorstr='#983738');

background-image:-webkit-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);

background-image:-moz-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);

background-image:-ms-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);

background-image:-o-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);

background-image:linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);

}

#contact_wrap h3{

color: #fff;

font-family:Georgia;

font-size: 20px;

font-style:italic;

font-weight:bold;

margin: 0 -36px 20px -36px;

padding: 12px;

text-align: center;

text-shadow: 2px 0 0 #3b5931;

-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;

-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;

box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;

background-color: #659156;

position: relative;

}

#contact_wrap h3:before {

content: ' ';

position: absolute;

bottom: -10px;

left: 0;

width: 0;

height: 0;

border-style: solid;

border-width: 10px 0 0 10px;

border-color: #000 transparent transparent transparent;

}

#contact_wrap h3:after {

content: ' ';

position: absolute;

bottom: -10px;

right: 0;

width: 0;

height: 0;

border-style: solid;

border-width: 0 0 10px 10px;

border-color: transparent transparent transparent #000;

}

#ContactForm1_contact-form-name{

width: 270px;

height:auto;

margin: 5px auto;

padding: 10px 10px 10px 40px;

background:#2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYIoWKf5z3BFdUvcQXNth1OwsFIV13zvxnpquVgF5eMlSCXHJG5C0nDeTcL7ri1SPS_L6GZNQvh4btcl5aSOIfrIPC6xieYG87fsxhLyIyPZRBTUvbpanwOop1GACwC-CRqvjYeE395u0/s1600/user.png)no-repeat 10px center;

color:#d2d2d2;

border:1px solid #ce6d6e;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;

}

#ContactForm1_contact-form-email{

width: 270px;

height:auto;

margin: 5px auto;

padding: 10px 10px 10px 40px;

background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsotIfvUGoKMEsY_2o2wlb9CgTjSW9z1EwgL5VIHOL9RIFAXI8syo7V_B0Fdz7SbcV8xCdwQXdaxrXrvcBHqT5ClAy9_Oh5rMIPH15Jz_Vkc8SE2j0nYn6IIsW-l-fiRlTvra_MlQBBXQ/s1600/pen.png)no-repeat 10px center;

color:#d2d2d2;

border:1px solid #ce6d6e;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;

}

#ContactForm1_contact-form-email-message{

width: 270px;

height: 150px;

margin: 5px auto;

padding: 10px 10px 10px 40px;

font-family:Arial, sans-serif;

background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeZo1LC2zMPUweREWEb3YWTGDq45-BzA0UlphOLxxOyBcErha7BDKJuHBtpL02wPlRMeRseCSlV1jLUsrnzl4_6CQZyr6brBvFRCW51G4yB4TdLPKRs-5KOSI7y1TmqOURzNGlnIXYaiY/s1600/msg.png)no-repeat 10px 10px;

color:#d2d2d2;

border:1px solid #ce6d6e;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;

}

#ContactForm1_contact-form-submit {

width: 95px;

height: 30px;

float: right;

color: #FFF;

padding: 0;

cursor:pointer;

margin: 25px 0 3px 0 0;

background-color:#005a8a;

border-radius:4px;

text-shadow: 1px 0 0 #1f4962;

-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

background-color: #659156;

border:1px solid #333;

}

#ContactForm1_contact-form-submit:hover {

background:#5d894d;

}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{

width: 320px;

margin-top:35px;

}

Note : Anda bisa memodifikasi Kode warna yang lain untuk tampilan yang anda inginkan

 Keren atau tidak kembali pada anda, semoga membantu ! Terima Kasih, Salam Blogger !

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Judul :Modifikasi Widget Contact Form Keren
Dipublikasikan oleh:Unknown
Dipublikasian pada :2013-06-01T21:53:00+07:00
Rating : 4.9
Direview oleh : 3765 Orang
Terima Kasih sudah mau membaca artikel saya yang berjudul Modifikasi Widget Contact Form Keren. Copy Paste tidak dilarang kok ! Asal mencantumkan link sumbernya ^_^, sudah 3 Blog saya laporkan dan terhapus lho gara-gara copy paste lho, jadi mohon hati-hati ya.....

Suka Dengan Artikel ini ? Klik tombol dibawah ini, terutama yang Plus One ya !