CARA MEMBUAT WIDGET CONTACT FROM KEREN & UNIK DI BLOGGER

ONEPOIN.COM - Selamat sore para blogger disini saya akan berbagi Tutorial bagaimana cara membuat widget contact from untuk blogger yang keren dan unik anda penasaran bukan :

KLIK DEMO

Itu contoh dari widget from contact yang akan kita buat kali ini sobat keren dan bagus bukan :D
baiklah sobat tanpat berbasa-basi lagi ikuti lahh langkah-langkah di bawah ini untuk pembuatan widget contact from tersebut :

• Langkah yang pertama yaitu login dulu ke blog anda masing-masing

• Setelah itu masuk ke Menu Tataletak dan Klik "Add Gadget"

• Setelah itu pilih Menu Gadget lainnya ===> Formulir Kontak seperti gambar di bawah ini :

• Langkah selanjutnya yaitu buat "Laman Baru" dan berikan judul dari Lama Baru tersebut "Hubungi Kami"  setelah itu pastekan kode di bawah ini ke dalam Laman yang sobat buat tadi :

<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>

<style type="text/css">

/* Menyembunyikan elemen dalam postingan */

#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}

</style>

• Setelah itu klik simpan

Dan langkah yang terakhir adalah kita akan mempercantik tampilan dari widget contact from yang kita buat tadi dengan cara masuk ke Menu "Template" lalu pilih "Edit HTML" setelah itu cari kode ]]></b:skin> di dalam Edit HTML tersebut untuk mencari kode ]]></b:skin> dengan cepat anda dapat menekan tombol "CTRL+F" lalu cari kodenya :

Setelah itu COPY kode di bawah ini dan PASTE kan di atas kode ]]></b:skin>  :

/* CSS Contact Form Light Theme by http://www.onepoin.com/ */

#ContactForm1{

display:none;

}

#contact_wrap {

margin: auto;

width: 321px;

height: 380px;

padding: 25px;

border-radius: 1em;

border-top:1px solid #dbdbdb;

border-right:1px solid #b2b2b2;

border-left:1px solid #dbdbdb;

border-bottom:1px solid #9d9d9d;

background-color:#cccccc;

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

background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

box-shadow: 1px 1px 5px #ccc;

}

#contact_wrap h3{

color: #e8f3f9;

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 #1f4962;

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

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

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

background-color: #3689b9;

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: #333 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 #333;

}

#ContactForm1_contact-form-name{

width: 270px;

height:auto;

margin: 5px auto;

padding: 10px 10px 10px 40px;

background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6HOBc7Phq1GtWmSeUzEMpbEi8rWnqIzvjMbPXjpYWGLHqYSy0ig9XnDNR-lfGuZqM18qNjDGySLgDjRoJcMivhFvUfJnbYdKDDMsdv_mlNbVlYJJA7UfKRoymdFl2UmpTrqQ7_ThW3Jo/s1600/user.png)no-repeat 10px center;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

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

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

}

#ContactForm1_contact-form-email{

width: 270px;

height:auto;

margin: 5px auto;

padding: 10px 10px 10px 40px;

background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQyhqfuZBaAjB0gEuh4LKMiPwPu_dOdutvGsrxUwF2wCVHQ0go4RAElzQQQiCMFfvVd1eGRJ2_5Wwbf0UcOUTvTBe93OW05ZV0f420jTZLlt7zzl6OO_ga01-BlT6sBq_zsCRsHmcmsBw/s1600/pen.png)no-repeat 10px center;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

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

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 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: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCq8o-IYbsqpRJNEwtv4HyBjxGenck2sGz6dHzJTFjU_Ht0cUrUNJLcr2c_uq4ZuTSY8tL9G93jDi-dNeg7ohyeAD0ddeGB6mIS0t9fyfznEUyb502JIfy7NRV7N7JN_KWdgVmkeAyiyY/s1600/msg2.png)no-repeat 10px 10px;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

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

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 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: #3689b9;

border:1px solid #194f6d;

}

#ContactForm1_contact-form-submit:hover {

background:#4c9bc9;

}

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

width: 320px;

margin-top:35px;

}

• Setelah itu klik simpan sekarang lihat hasilnya :D

Related Posts:

Tweet