Baca Juga

Blog Ponsel Si Oon - Cara Membuat Contact Form Keren Di Blogger Blogspot hai Sobat Mickey kali ini Blog Oon Akan Membagikan Tentang Cara Membuat Contact Form atau Contact Us atau juga hubungi kami keren di blogger blogspot .. kenapa saya katakan keren ? Lihat saja hasil nya di bawah ini atau lihat di halaman Contact form saya .. dengan mengklik link berikut » Contact Form .. dan di katakan keren karena untuk memasangnya kita tidak perlu mendaftar ke website pihak ketiga ( yang kadang kala widgetnya ada iklannya dan link yang keluar ) .. ke web penyedia widget tersebut .. tapi kita akan menggunakan widget yang telah disediakan oleh pihak Blogger sendiri .. namun sedikit kita rubah untuk jadi lebih keren ..

Dan memasang contact form di blog merupakan salah satu bagian yang penting dan berfungsi sebagai media korenspondensi formal dan personal .. Meskipun sudah ada banyak media lain .. namun halaman kontak menjadi pilihan karena menjaga privacy bagi kedua belah pihak .. yaitu pemilik blog/website dan visitor/customer .. dan di bawah ini demo hasil pembuatan nya ..

Cara Membuat Contact Form Keren Di Blogger Blogspot


Contact form sangatlah penting untuk Blog Oon maupun para pembaca karena jika mereka ingin menyampaikan sesuatu kepada pemiliki blog .. mereka dapat menghubungi kita menggunakan widget ini .. Biasanya contact form diberi judul "Hubungi Kami" atau "Contact Us" atau pun "contact Form" dan disediakan oleh Blogger hanya bisa digunakan untuk widget blog .. tapi dengan tutorial ini maka kita dapat memasangnya ke halaman blog kita .. Nah berikut adalah cara membuat dan memasang widget ini ke halaman blog ..

Langkah / Cara Pertama ( 1 )

Kita harus menambahkan widget contact form kedalam halaman yang kita buat .. namun sebelum masuk ke halaman / sebelum buat halaman baru .. langkah awal nya dengan Cara buka halaman layout > Add gadget > Contact Form .. Letakkan di sembarang tempat .. ini nanti akan di sembunyikan Dari sidebar dengan CSS .. untuk di tampilkan pada halaman Contact Form ..

Langkah / Cara Kedua ( 2 )

Setelah Contact Form berhasil di tambahkan di bagian sidebar .. berikut nya buat halaman baru .. dan beri judul terserah anda .. mau contact form / contact us / hubungi kami .. setelah itu simpan kode di bawah ini pada mode HTML jangan Compose :



<div id="contact_wrap">
<h3>Contact Form</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>



Berikut nya klik publish .. dan lanjut ke tahap ke 3 .. yaitu cara pasang CSS nya .. untuk menyembunyikan Contact Form yang ada di sidebar .. dan untuk memperkeren contact form yang sudah kita buat tadi .. pada halaman contact form ..

Langkah / Cara Ketiga ( 3 )

Tambahkan CSS berikut ini .. untuk mempercantik tampilan dan sekaligus menyembunyikan Contact form pada Widget di sidebar .. copas CSS dibawah ini di atas ]]></b:skin>



#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/AVvXsEgYDmAp2l9LS6ONI-dzvJzd0XHd5h2TFSAjP9NvkKQgXIbDTI9Vldvicu0cO-n1Gz1USzj5DBbOZwObkIT8rfvsiFCTebsVe45ySN7awijlAXQBhGT6K9EkaQHHy6OSVfTGlaGmcm0SGgI/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/AVvXsEg6g47CUd8Xsv-w4IxCi4NH3xmhOFE3ipj3wNMLgVMcBSe4OcWKTiS_GnT0h-RAKwHflnOPrS0iPrGm6v22fQStzvs9_LW3HYijdIQVaCUv8swbSptK2o8AxspZzIhUStLH7S8Rv-z0sis/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/AVvXsEgtmWlXhHEzf_Cyzy4UnKcJBJQQnjwn9k7v9jzf6yOWifDN4H4e5XlFqFCbEsnaXJMhIKPIXPF2HyadM902RqzRb_Vr4yMO56gsx3zK_RD5_4KceuW015b5HCLTC-Pro8R_vJqn74NDoWI/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 dirasa sudah cukup .. jangan lupa klik simpan .. dan lihat hasil nya .. jika kurang pas pada template sobat .. silhakan di rubah lagi ukuran mau pun warna nya ..

Ok Next .. itulah tadi Cara Membuat Contact Form Keren Di Blogger Blogspot Selamat mencoba dan semoga bermanfaat ..

Tag : #Contact, #Contact Us, #Contact Form, #Hubungi, #Hubungi Kami, #Cara Membuat Contact Form Keren Di Blogger Blogspot, #Blogger, #Blogspot, #Cara, #Cara Buat, #Cara Membuat

 
Top
Loading...