Cara Membuat Halaman Kontak di Blogger

Posted on 4 views

HALAMAN  kontak berisi formulir (Contact Form) berfungsi memudahkan pengunjung menghubungi admin blog.

Cara Membuat Halaman Kontak di Blogger

Halaman kontak ini berisi nama, email, dan pesan. Pesan yang dikirimkan akan muncul di inbox email admin blog. (Lihat DEMO).

Cara Membuat Halaman Kontak di Blogger

Berikut ini cara membuatnya:

1. Klik Layout > Add a Gadget
2. Pilih Contact Form

Pilih Contact Form



3. Simpan di bagian paling bawah sidebar
4. Save!

Langkah berikutnya memasang kode di template:

1. Klik Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

#ContactForm1 {display:none}

3. Simpan!

Langkah selanjutnya membuat halaman kontak.

1. Klik Halaman > Halaman Baru
2. Isi kolok Judul Halaman dengan Kontak
3. 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!

Selesai. Itu dia Cara Membuat Halaman Kontak di Blogger. (Blogger Bandung).*

Leave a Reply

Your email address will not be published. Required fields are marked *