Tutorial Terbaru Membuat Halaman Contact Us atau Contact Me Pada Blogspot

Form Contact Us atau Contact Me merupakan salah satu atribut yang paling penting dalam blogger, Form Contact ini dibuat untuk para pembaca yang ingin menghubungi anda melalui email. Contact ini juga sangat penting apabila anda ingin mendaftarkan blog anda ke Google Adsense.

Mungkin yang membahas soal pembuatan form contact ini sudah bertebaran di pencarian google, bing dan mesin pencari yang lainnya. Tapi kebanyakan mereka membagikan cara membuat contact ini dengan menggunakan jasa 123ContactForm. Nah untuk itu disini saya akan membahas Tutorial Terbaru Membuat Halaman Contact Us atau Contact Me Pada Blogspot dengan cara yang berbeda dan tentunya mudah untuk dipahami.

Disini bahas tutorial membuat contact ini menggunakan fitur yang sudah disediakan oleh Blogger, yaitu dengan widgate Contact Form. Secara Default contact form ini hanya bisa digunakan pada widget saja, nah untuk itu ikuti langkah-langkah dibawah ini supaya bisa ditempelkan pada halaman.

Pada tahap ini kita buat dulu Widget Contact Form atau Formulir Kontak Pada layout atau tata letak Blogger

1. Pada langkah pertama ini anda masuk ke Akun Blogger, lalu pilih Tata Letak atau Layout.

2. Setelah itu pilih Tambahkan Gadget, lalu Pilih Gadget Lainnya.

3. Terus pilih Formulir Kontak atau Contact Form, terus langsung saja pilih Simpan.

Note : Hasilnya akan seperti ini.

Apabila anda menambahkan widgate maka langsung saja ke tahap kedua yaitu mengedit HTML pada Template anda.

1. Pilih Template pada Menu Blogger, lalu pilih Edit HTML.

2. Nanti anda akan masuk ke halaman Code HTML Template anda, disana anda cari widget ContactForm (Supaya mudah ditemukan Tekan tombol CTRL+F secara bersamaan nanti akan muncul kotak kecil nah anda masukan ContactForm lalu tekan enter). Untuk lebih jelasnya anda lihat gambar dibawah ini.

4. Lalu klik kanan pada titik-titik, terus hapus code html dari mulai <b:if cond='data:title != &quot;&quot;'> sampai </div>.

5. Selanjutnya pilih Simpan Template.

Lanjut ke Tahap Tiga yaitu membuat contact form pada halaman blogger sobat.

1. Langkah pertama anda pilih Laman atau Page pada Menu Blogger.

2. Pilih Laman Baru.

3. Selanjutnya ganti dari mode Compose ke HTML (Beri judul Contact Me atau Contact Us)

4. Langakah berikutnya salin code html dibawah ini

<center>
<div class="tutorialblogs" s-contact-form="">
<div class="form">
<!-- Custom Contact Form By Tutorial Blog's -->
<div class="tutorialblog" s-contact-title="">
</div>
<form name="contact-form">
<!-- Name Field -->
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Name" />
<br />
<!-- Email ID Field -->
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}" onfocus="if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Email ID" />
<br />
<!-- Message Field -->
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}" onfocus="if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}" value="Leave Your Message.."></textarea>
<br />
<!-- Clear Button -->
<input class="contact-form-button contact-form-button-submit Tutorial Blog's-button-color" type="reset" value="Clear" />
<!-- Send Button -->
<input class="contact-form-button contact-form-button-submit TutorialBlog's-button-color" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />

<!-- Validation -->

<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<!-- End Custom Contact Form By Tutorial Blog's -->
</div>
</div>
<style>
.TutorialBlog's-contact-form { background:#fff; box-shadow:-1px 2px 3px #ddd; font:12px arial; width:100%; max-width:320px; margin:20px auto; padding:15px; border:1px solid #ddd; }
.TutorialBlog's-contact-title { box-shadow:-1px 2px 3px #ddd; text-shadow:0 1px 1px rgba(0,0,0,.3); margin:0 0 10px 0; font-weight:400; padding:10px 15px; font:16px Arial; cursor:pointer; text-align:center; color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.contact-form-name,.contact-form-email,.contact-form-email-message { max-width:320px; width:100%; font-weight:bold; }
.contact-form-name { background:#f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWOsF-3-3J2YNJ1AzVRdr1wHIpjFNz_Y0EPxZPH3qcAl39Iz_5ac2FgttWQGHYguQVN3G2FljHw_lq8xlPZN6qC7m6sRvFWjk_1Q0C0M1Pjd_aDVxi1w6A_ABIq_vZE8ucX-WkA4nDdCU/s320/name.png) no-repeat 7px 8px; background:#f3f3f3; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; box-shadow:inset -2px 2px 3px #ddd; vertical-align:top; }
.contact-form-email { background:#F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWOsF-3-3J2YNJ1AzVRdr1wHIpjFNz_Y0EPxZPH3qcAl39Iz_5ac2FgttWQGHYguQVN3G2FljHw_lq8xlPZN6qC7m6sRvFWjk_1Q0C0M1Pjd_aDVxi1w6A_ABIq_vZE8ucX-WkA4nDdCU/s320/name.png) no-repeat 7px 10px; background-color:#F2F2F2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; vertical-align:top; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-email:hover,.contact-form-name:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:5px 15px 5px 28px; }
.contact-form-email-message:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:10px; }
.contact-form-email-message { background:#FFF; background-color:#f2f2f2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:arial; font-size:13px; margin:0; margin-top:5px; padding:10px; vertical-align:top; max-width:320px !important; height:150px; border-radius:4px; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-button { cursor:pointer; height:32px; line-height:28px; font-weight:bold; border:none; }
.contact-form-button { display:inline-block; zoom:1; *display:inline; vertical-align:baseline; margin:0 2px; outline:none; cursor:pointer; text-align:center; text-decoration:none; font:14px/100% Arial,Helvetica,sans-serif; padding:.5em 2em .55em; text-shadow:0 1px 1px rgba(0,0,0,.3); box-shadow:-1px 2px 3px #ddd; }
.contact-form-button:hover { text-decoration:none; }
.contact-form-button:active { position:relative; top:1px; }
.TutorialBlog's-button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.TutorialBlog's-button-color:hover { background:#f47c20; }
.TutorialBlog's-button-color:active { color:#fcd3a5; }
.contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWOsF-3-3J2YNJ1AzVRdr1wHIpjFNz_Y0EPxZPH3qcAl39Iz_5ac2FgttWQGHYguQVN3G2FljHw_lq8xlPZN6qC7m6sRvFWjk_1Q0C0M1Pjd_aDVxi1w6A_ABIq_vZE8ucX-WkA4nDdCU/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style></center>

5. Setelah itu Pastekan pada Mode HTML pembuatan halaman Contact anda.

6. Langkah terakhir ini anda pilih Publikasikan dan coba lihat hasiilnya.

Jangan sungkan-sungkan untuk bertanya pada saya. " Jangan Bengong ketika anda salah Jalan"

Sekian Tutorial Terbaru Membuat Halaman Contact Us atau Contact Me Pada Blogspot ini, mudah-mudahan dapat membantu dalam membuat contact form untuk blogger sobat. Apabila ada yang kurang dimengeti anda bisa tanyakan dikomentar.