Cara Membuat Halaman Kontak Kami di Blogger

 

Update: Berhubung template ini anti copy-paste, untuk mengambil code dalam artikel ini nanti tekan Control +P agar bisa melakukan copy code HTML-nya

Sebuah blog harus memiliki halaman hubungi kami, ini membantu pengguna untuk menghubungi admin. Ada beberapa cara untuk membuat halaman hubungi kami di Blogger.

Postingan ini akan membantu Anda mengatur halaman hubungi kami untuk Blogger atau Blogspot . 

Sangat mudah untuk menambahkan halaman kontak kami HTML ke dalam sebuah halaman. 

Ada cara untuk mendapatkan formulir kontak gratis untuk Blogger di sidebar blog Anda. 

Mari kita lihat cara membuat halaman hubungi kami di Blogger.

Cara Tambahkan Halaman Hubungi Kami di Blogger

Anda dapat membuat halaman hubungi kami di Blogger, ingin tahu  bagaimana cara menambahkan halaman hubungi kami di Blogger? Ini sangat sederhana dan tidak diperlukan keahlian teknis. Cukup ikuti langkah-langkah yang diberikan di bawah ini.

1. Buka dasbor Blogger > Pilih blog > Tata Letak

2. Tambahkan formulir kontak ke sidebar blog

Peringatan: Diperlukan untuk menambahkan formulir kontak di blog Anda agar formulir kontak ini berfungsi di halaman hubungi kami di Blogger. Jika Anda tidak akan menambahkan formulir kontak dan mencentang kotak "tampilkan formulir kontak" maka formulir kontak tidak akan berfungsi.

3. Sembunyikan kontak dari sidebar blog

Kami akan menyembunyikan formulir kontak untuk sider Blogger menggunakan kode CSS. Anda harus mengikuti langkah-langkah untuk menyembunyikan gadget formulir kontak dari sidebar blog.

a) . Buka Tema > Klik pada tiga titik vertikal > Edit HTML

b) . Cari kode berikut

]]></b:skin>

Berikut adalah cara mencari dengan HTML Blogger.

c) .  Tempelkan kode CSS berikut tepat di atasnya.

div#ContactForm1{display: none !important;}

Periksa tangkapan layar tentang cara menerapkannya.

d) . Sekarang, klik ikon floppy untuk menyimpan perubahan.

Setelah menyelesaikan semua langkah yang disebutkan di bawah poin nomor tiga. Formulir kontak Anda akan ada di bilah sisi tetapi tidak akan terlihat oleh pengunjung blog.

4. Selanjutnya, navigasikan ke bagian Halaman

5. Klik ikon oranye untuk membuat halaman baru. (Bukan postingan)

Tempelkan kode HTML berikut (templat halaman hubungi kami) dan publikasikan halaman tersebut. Ini adalah formulir kontak bergaya untuk Blogger.

<style>
.page-contact-form input,.page-contact-form textarea {width: 100%;max-width: 100%;margin-bottom: 10px;}
.page-contact-form input.contact-form-button.contact-form-button-submit {padding: 10px;background: #ea6337; color: #fff;border: none;}
.page-contact-form input.contact-form-button.contact-form-button-submit:hover {background: #d85b32;color: #fff;}
</style>
<div class="contact-form-widget page-contact-form">
<div class="form">
<form name="contact-form">
Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail: <span id="required">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message: <span id="required">*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<br/>
<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>
</form>
</div>
</div>

Catatan: Periksa tangkapan layar berikut ini lalu sesuaikan 

6. Buka halaman di browser web Anda dan periksa apakah halaman berfungsi dengan benar dan pengguna dapat mengirimi Anda pesan. 

Buka bagian Halaman dan klik ikon mata untuk melihat halaman hubungi kami.

Hubungi Kami Contoh Halaman

Halaman hubungi kami untuk Blogger akan terlihat mirip dengan contoh ini.

Sampai disini kita sudah membuat halaman hubungi kami di blogger dengan mudah sehingga artikel ini mungkin bisa dijadikan referensi untuk membuat contac from di blogger untuk pemula. Semoga sukses!