Template Blog Simple, Ringan, SEO Friendly

Cara Membuat Halaman Kontak (Contact Form) di Blogger

Membuat Halaman Kontak
Cara Membuat Halaman Kontak (Contact Form) di Blogger

Cara Membuat Halaman Kontak  atau Formulir Kontak (Contact Form) di Blogger sangat mudah. Yaitu dengan membuat halaman baru (new page) dan masukkan kode formulir kontak. Beres!

Lihat Demo Halaman Kontak

Halaman kontak memudahkan pengunjung menghubungi admin blog, misalnya mau pasang iklan, kerja sama, dan sebagainya.

Degan halaman kontak ini, pembaca tidak usah membuka akun email untuk mengirimkan email ke admin blog. Cukup menggunakan contact form ini, pesan otomatis terkirim ke email Gmail.

Adanya halaman kontak ini mengesankan blog kita profesional dan "serius". Halaman kontak ini juga berfungsi saat kita membuat Halaman Disclaimer.

Cara Membuat Halaman Kontak (Contact Form) di Blogger

Berikut ini cara membuat halaman statis berisi formulir kontak:
1. Page > New Page
2. Isi judul dengan Kontak
3. Klik mode HTML di kiri atas

Klik mode HTML


4. Copas kode berikut ini:

<h4>Contact Form</h4>
<br/>
<form name="contact-form">
<p>
</p>
Nama
<p>
</p>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p>
</p>
Alamat Email <span style="color: red; font-weight: bolder;">*</span>
<p>
</p>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p>
</p>
Isi Pesan <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p>
</p>
<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>

<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
#ContactForm1{
display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #fffff7;}
#ContactForm1_contact-form-email-message{
width: 95%;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 550px;margin-top:35px;float:left}
</style>

5. Publish!

Kini halaman kontak sudah ada di blog Anda. Tinggal copy linknya ke Navigasi Menu. Good Luck! (http://newthesisseo.blogspot.com).*

2 comments:

About NTS

New Thesis SEO (NTS) adalah template blog simple dan ringan (fast loading), responsive, dan SEO Friendly. Dengan template ini Anda tinggal FOKUS ke konten. SEO On Page elemen desain sudah dipenuhi template ini. Free!!! Gratis!
Copyright © New Thesis SEO. All rights reserved. Template by CB