DUJAA.COM | Cara Membuat Kontak Form Di Blogspot Tanpa Aplikasi Pihak Ketiga - Kontak Form atau halaman kontak adalah sebuah halaman atau menu blog yang berisikan isian data untuk menghubungi pemilik blog atau pengelola blog. Didalamnya menyajikan menu isian pesan yang dapat dikirim ke pemiliki blog.
Keberadaan kontak form pada suatu blog sangatlah penting karena kontak form merupakan salah satu syarat dasar kelengkapan blog. Selain itu juga jika anda ingin mendaftarkan blog ke Google Adsense maka kontak form ini wajib dibuat.
Kita flashback sebentar ke syarat dasar agar blog diterima Google Adsense. Salah satu syarat dasar blog yaitu adanya property blog yaitu :
Nah untuk itu saya sengaja membahas Cara Membuat Kontak Form Di Blogspot agar membantu blogger pemula yang ingin mengawali menjadi seorang blogger.
Baiklah pada kesempatan kali ini saya akan berbagi pengalaman saya tentang Bagaiman Cara Membuat Kontak Form Di Blogspot Tanpa Aplikasi Pihak Ketiga.
Maksud dari tanpa aplikasi pihak ketiga yaitu kontak form yang dibuat tidak menggunakan bantuan apilikasi lain. Salah contoh aplikasi pihak ketiga untuk membuat kontak form yaitu 123formbuilder.
Sebenarnya BLOGGER juga sudah menyediakan kontak form tapi perlu optimasi lagi agar menjadi kontak form di halaman Blog. Untuk itu saya manfaatkan fitur bawaan blog tersebut.
Baiklah langsung saja kita mulai langkah - langkah Cara Membuat Kontak Form Di Blogspot Tanpa Aplikasi Pihak Ketiga, Terdapat 3 langkah yang harus anda selesaikan yaitu :
1. Buka Dashboard Blogger
2. Klik Layout / Tata Letak
3. Klik Add a Wiget / Tambahkan Widget ( Disini letak wigdet bebas, bisa di sidebar atau footer )
4. Muncul daftar Widget kemudian cari Widget Contact Form / Formulir Kontak
5 .Klik tanda ( + ) untuk menambahkan
1. Klik Theme / Tema
2. Klik Edit HTML
3. Cari kode </head> (Tekan CTRL + F > masukan </head> > Enter)
4. Kemudian Copy kode dibawah ini sebelum atau ditas </head>
5. Klik Save / Simpan
1. Klik Page / Halaman
2. Ketikkan Judul Kontak
3. Klik Mode HTML
5. Kemudian Copy kode dibawah ini dan paste ke halaman kontak
Jika sudah semuanya maka hasilnya seperti ini
Nah sekarang blog anda sudah terpasang kontak form keren tanpa melibatkan web atau aplikasi penyedia kontak form pihak ketiga.
Anda bisa melakukan test kontak form dengan mengisinya sendiri kemudian klik kirim, stelah itu pesan yang ada kirim tadi akan masuk ke email yang anda gunakan untuk login BLOGGER.
Dengan demikian jika ada pengunjung blog ingin menghubungi anda maka bisa klik menu kontak yang sudah anda pasang pada blogger.
Demikian tutorial tentang Cara Membuat Kontak Form Di Blogspot Tanpa Aplikasi Pihak Ketiga. Semoga tutorial ini bermanfaat bagi anda. Jangan lupa share agar lebih bermanfaat. Terima Kasih.
Keberadaan kontak form pada suatu blog sangatlah penting karena kontak form merupakan salah satu syarat dasar kelengkapan blog. Selain itu juga jika anda ingin mendaftarkan blog ke Google Adsense maka kontak form ini wajib dibuat.
Kita flashback sebentar ke syarat dasar agar blog diterima Google Adsense. Salah satu syarat dasar blog yaitu adanya property blog yaitu :
- About
- Kontak
- Disclaimer
- Privacy Policy
- Sitemap
Nah untuk itu saya sengaja membahas Cara Membuat Kontak Form Di Blogspot agar membantu blogger pemula yang ingin mengawali menjadi seorang blogger.
Cara Membuat Kontak Form Di Blogspot Tanpa Aplikasi Pihak Ketiga
Baiklah pada kesempatan kali ini saya akan berbagi pengalaman saya tentang Bagaiman Cara Membuat Kontak Form Di Blogspot Tanpa Aplikasi Pihak Ketiga.
Maksud Tanpa Aplikasi Pihak Ketiga Apa Mas ?
Maksud dari tanpa aplikasi pihak ketiga yaitu kontak form yang dibuat tidak menggunakan bantuan apilikasi lain. Salah contoh aplikasi pihak ketiga untuk membuat kontak form yaitu 123formbuilder.
Sebenarnya BLOGGER juga sudah menyediakan kontak form tapi perlu optimasi lagi agar menjadi kontak form di halaman Blog. Untuk itu saya manfaatkan fitur bawaan blog tersebut.
Baiklah langsung saja kita mulai langkah - langkah Cara Membuat Kontak Form Di Blogspot Tanpa Aplikasi Pihak Ketiga, Terdapat 3 langkah yang harus anda selesaikan yaitu :
Langkah Pertama
1. Buka Dashboard Blogger
2. Klik Layout / Tata Letak
3. Klik Add a Wiget / Tambahkan Widget ( Disini letak wigdet bebas, bisa di sidebar atau footer )
4. Muncul daftar Widget kemudian cari Widget Contact Form / Formulir Kontak
5 .Klik tanda ( + ) untuk menambahkan
Langkah Kedua
1. Klik Theme / Tema
2. Klik Edit HTML
3. Cari kode </head> (Tekan CTRL + F > masukan </head> > Enter)
4. Kemudian Copy kode dibawah ini sebelum atau ditas </head>
<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>
5. Klik Save / Simpan
Langkah Ketiga
1. Klik Page / Halaman
2. Ketikkan Judul Kontak
3. Klik Mode HTML
5. Kemudian Copy kode dibawah ini dan paste ke halaman kontak
Silahkan Hubungi saya dengan mengisi form dibawah ini, Apabila saya tidak sibuk atau tidak ada halangan lainnya, saya akan membalasnya.<br />
<br />
<form id="contact-form" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> <br />
<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>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
#contact-form{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#34495e;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#3498db;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0}
.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
6. Klik Publish / Publikasikan<br />
<form id="contact-form" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> <br />
<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>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
#contact-form{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#34495e;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#3498db;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0}
.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
Jika sudah semuanya maka hasilnya seperti ini
Nah sekarang blog anda sudah terpasang kontak form keren tanpa melibatkan web atau aplikasi penyedia kontak form pihak ketiga.
Anda bisa melakukan test kontak form dengan mengisinya sendiri kemudian klik kirim, stelah itu pesan yang ada kirim tadi akan masuk ke email yang anda gunakan untuk login BLOGGER.
Dengan demikian jika ada pengunjung blog ingin menghubungi anda maka bisa klik menu kontak yang sudah anda pasang pada blogger.
Demikian tutorial tentang Cara Membuat Kontak Form Di Blogspot Tanpa Aplikasi Pihak Ketiga. Semoga tutorial ini bermanfaat bagi anda. Jangan lupa share agar lebih bermanfaat. Terima Kasih.
