2 Cara Mudah Membuat Halaman Kontak Di Blog 2022
Yosa AP
---
Cara Membuat Halaman Kontak di Blogger - Halo Sobat.. Pada kesempatan kali ini saya akan memberikan tutorial bagaimana cara untuk menambahkan halaman kontak di blog. Halaman kontak merupakan salah satu halaman yang wajib ada pada blog. Dengan adanya halaman ini, akan memudahkan pengunjung blog yang ingin menghubungi kita, misal blog kita mengenai jasa, pengunjung bisa memesan jasa kita lewat halaman kontak. Selain itu, misalkan blog kita tentang unduh film, game atau aplikasi, halaman kontak juga akan sangat membantu jika ada pengunjung yang ingin melaporkan link unduhan yang sudah tidak berfungsi. Dari dua contoh diatas bisa kita simpulkan betapa pentingnya halaman kontak.
 |
| 2 cara menambahkan halaman kontak di blog |
Untuk detail lengkap tutorialnya langsung saja akan saya bahas di bawah ini :
Daftar isi :
Membuat Halaman Kontak Lewat 123FormBuilder
Membuat halaman kontak lewat 123FormBuilder cukup mudah. Kamu tinggal mengikuti langkah-langkah di bawah ini :
- Pertama, silahkan buka web 123FormBuilder.
- Klik 'Sign Up' terlebih dahulu.
 |
| Sign Up pada web 123FormBuilder |
- Lalu pilih Basic dan klik Choose Plan.
 |
| Pilih Basic agar gratis |
Baca juga : Cara Membuat Baca Juga Secara Otomatis di Tengah Postingan Blog
- Isi Form, lalu klik Agree & Sign Up.
 |
| Pilih setuju dan buat akun |
- Akun sudah terbuat dan kamu akan auto masuk ke Dasboard.
- Silahkan pilih 'Blank Form'.
 |
| Pilih Blank Form pada Dasboard 123FormBuilder |
- Silahkan pilih apa saja yang akan di masukkan ke dalam form. Kamu bisa memasukkan Nama, Email, Website dan Long Text seperti dibawah ini.
 |
| Pilih form yang ingin digunakan |
- Jika sudah selesai, pilih menu 'Publish' dan klik Blogger.
 |
| Pilih platform Blogger |
- Kamu akan mendapatkan kode, pilih 'Copy Code'.
 |
| Copy code yang akan digunakan |
- Sekarang masuk ke Blogger. Pilih Halaman - Halaman Baru. Pilih HTML.
- Pastekan kode yang sudah kamu copy tadi.
 |
| Paste code yang disalin tadi pada halaman blogger |
- Jika sudah, pilih 'Publikasikan'.
Tampilan halaman kontak yang sudah dibuat :
 |
| Tampilan halaman kontak menggunakan 123FormBuilder |
Membuat Halaman Kontak Lewat Gadget
Membuat halaman kontak lewat Gadget juga tidak sulit. Dari segi tampilan pun tidak kalah keren dibandingkan dengan menggunakan 123FormBuilder. Berikut tutorialnya :
- Masuk ke Blogger.
- Pilih Tata Letak - Tambah Gadget Baru di Sidebar - Formulir Kontak - Simpan.
- Contact Form sudah dibuat, akan tetapi muncul di sidebar bukan di halaman. Agar Contact Form muncul di halaman kita perlu memasukkan kode terlebih dahulu.
- Silahkan copy kode di bawah ini :
<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: #000; /* Button background color */
color: #fff; /* Button text color */
border: none;
}
.page-contact-form input.contact-form-button.contact-form-button-submit:hover {
background: #777; /* Button background hover color */
color: #fff; /* Button text hover color */
}
</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>
- Buat Halaman Baru di menu Halaman.
- Pastekan kode yang tadi sudah di copy.
 |
| Salin dan tempelkan code pada halaman blogger |
- Jika sudah pilih 'Publikasikan'.
- Karena tadi kita menambahkan gadget di sidebar otomatis Form Contact juga muncul di sidebar. Oleh karena itu sekarang kita coba untuk menyembunyikan gadget Form Contact.
- Pilih menu Tema - Sesuaikan - Lanjutan - Tambahkan CSS, lalu copy dan paste kode di bawah ini :
#ContactForm1{display:none !important;}
Tampilan halaman Contact Us :
 |
| Tampilan halaman kontak dengan skrip code |
Bagaimana Sobat? Mudah bukan? tentu saja mudah jika kalian mengikuti tutorial di atas sesuai urutannya. Sekian tutorial mengenai cara membuat halaman kontak keren di blogger. Semoga bermanfaat dan selamat mencoba.
Posting Komentar
Posting Komentar