Cara Membuat Halaman Kontak di Blogspot yang Simple dan Elegan

Halaman kontak adalah salah satu kelengkapan blog yang wajib dipasang ketika membangun blog. Apalagi kalau sobat lagi bisnis online. Wajib ada hukumnya. Membuat halaman kontak di blog sebenarya cukup dengan memberikan informasi berupa email dan nomor handphone. Ada juga yang lebih lengkap dengan memberikan informasi PIN BBM, chanel youtube, Facebook bahkan twitter.

Apapun bentuk informasi kontak yang sobat berikan yang pasti harus bisa memudahkan pembaca dengan cepat mengghubungi pemilik blog.

Sebagian besar blogger selalu menyembunyikan identitas asli atau lebih tepatnya tidak mau diekspos. Hal ini sah-sah saja tidak ada larangan. Kalau ditampilkan semua bisa repot sob..


Cara terbaik adalah dengan memasang form kontak di halaman utama blog. Si pembaca tidak perlu repot-repot membuka email atau membuka hp untuk mengirimkan pesan kepada pemilik blog. Tinggal isikan saja pesan di form yang tersedia.

Berikut ini adalah cara membuat halaman kontak yang saya ambil dari blognya kangismet.
Ada 3 langkah pembuatan.

1. Langkah Pertama
Buat Widget Contact Form yang telah disediakan oleh google :

1. Klik Tata Letak
2. Tambahkan Gadget
3. Klik Gadget Lainnya
4. Pilih Formulir Kontak

Untuk sementara biarkan formulir kontak ada di sidebar / widget (jangan diotak atik).
Pada langkah pertama ini sebenarnya form kontak sudah jadi. Hanya saja tampilannya masih default bawaan blogger. Dan letaknya tidak bisa dipindah ke halaman statis.


2. Langkah Kedua

Menambahkan halaman yang akan dijadikan halaman statis di menu
Berikut caranya :

1. Masuk ke laman
2. Klik Laman baru
3. Beri judul : kontak
4. Lihat pojok kanan bawah : pada menu pilihan : pilih tekan “enter” untuk baris baru
5. Tambahkan kode-kode di bawah ini pada mode HTML. Jangan salah sob.. bukan Compose ya… (kalau dimasukan pada mode compose gak akan tampil)

----------------------------------------
<form name="contact-form">
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
Alamat Email <span style="color: red; font-weight: bolder;">*</span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
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>
<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}
</style>

----------------------------------------

3. Langkah Ketiga
Ini langkah terakhir sob.. fungsinya untuk menambahkan CSS dan menyembuyikan widget (menyembuyikan tampilan kontak form bawaan blogger). Berikut caranya :

1. Masuk ke setingan Template
2. Tekan Ctrl + F (untuk memudahkan pencarian)
3. Cari kode ini sob ]]></b:skin>
4. Jika sudah ketemu tambahkan kode di bawah ini. Letakkan di atas kode  ]]></b:skin>

 /* CSS Contact Form */
#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;
}

Selamat mencoba dan semoga berhasil yaa..

Terimakasih telah membaca artikel berjudul Cara Membuat Halaman Kontak di Blogspot yang Simple dan Elegan

Sumber: https://www.kangmasian.com/2017/01/cara-membuat-halaman-kontak-di-blogspot.html