Cara Mudah Membuat Halaman Kontak di Blogger

Baca Juga

Halaman Kontak (Contact Page) adalah salah satu halaman penting yang harus ada di dalam sebuah blog. Kita bisa dengan mudah membuatnya di halaman statis (static page).

Halaman kontak ini berfungsi sebagai sarana di mana pengunjung blog kita dapat mudah berkomunikasi atau menghubungi kita sebagai admin blog. Pesannya akan langsung diterima via inbox email.

Untuk memudahkan pengunjung berkomunikasi atau mengirimkan sebuah pesan, maka biasanya perlu disediakan sebuah form (contact form) di halaman kontak ini. Form ini dapat diisi oleh pengunjung untuk bisa langsung mengirimkan pesan kepada admin blog.

Tujuannya tentu agar pengunjung tidak perlu repot-repot untuk mengirim email, SMS, atau menghubungi via telepon kepada pengelola blog. 

Setelah dibuat, link halaman kontak bisa dipasang di navigasi menu. Sejajar dengan menu Home, About, Disclaimer, dll.

Cara Mudah Membuat Halaman Kontak di Blogger

MEMBUAT halaman statis khusus Kontak (Contact Form) gak harus pake ribet edit templat dan ini itu. Cukup lakukan langkah ini.

1. Buat halaman baru dengan Judul "Kontak"
2. Klik mode HTML
3. Copas kode berikut ini:

<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: 450px;
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: 450px;margin-top:35px;}
</style>

PUBLISH!!!

Jika cara di atas tidak cocok dengan template blog Anda, coba pilih yang cocok di Halaman Kontak. Good Luck & Happy Blogging! (www.contohblog.com).*