Cara Membuat Halaman Kontak Kami di Blog Secara Cepat dan Mudah

Cara Membuat Halaman Kontak Kami atau Contact Us Di Blog-Inspiratif

Halaman Kontak atau Contact Us itu adalah Sebuah Halaman yang cukup Penting pada Sebuah Website atau Blog. Halaman Kontak ini dibuat dengan tujuan untuk memudahkan para Pengunjung Blog atau Web yang ingin menanyakan Perihal Postingan yang di muat pada Postingan Suatu Blog.Halaman Kontak ini juga merupakan Salah Satu Point Penilaian Blog atau Web yang akan di daftarkan pada Layanan Google Adsense. Jadi Jika Sobat Inspiratif ingin Fokus dalam Mengelola Blog yang sudah Sobat Inspiratif buat dengan baik, alangkah baiknya jika Sobat Inspiratif Memasang atau Membuat Halaman Kontak Kami atau Contact Us pada Blog Sobat Inspiratif Sekalian.

Berikut Ini adalah Cara Praktis Untuk Membuat Halaman Kontak Kami atau Contact Us pada Blog yang Cukup Simple namun Tampilannya cukup SEO Friendly.

Langkah-langkahnya Sebagai Berikut :

Langkah  1 : Pertama-tama Sobat Inspiratif Masuk Kehalaman Blogger Anda, atau klik https://blogger.com.

Langkah   2  :    Pada Tampilan Blogger Anda Pilih Tata Letak pada bilah Sebelah kiri Akun Blog Anda, kemudian Klik Tambahkan Gadget. ( Anda bebas memilih Tambahkan Gadget dibagian mana Saja ). Seperti Gambar dibawah ini.

Langkah    3    : Setelah Anda Memilih Tambahkan Gadget, maka akan Tampil Halaman Seperti gambar berikut ini.

Langkah    4     :   Setelah itu Klik Tombol Simpan. ( Sejauh ini Apakah Anda Memiliki Kendala, jika tidak ada, mari kita lanjutkan ).

Langkah     5     :    Kemudian Kembali Pada Akun Blog Sobat Sekalian, kemudian Pilih Laman dan Klik Tab Laman Baru. 

Langkah   6    :   Pada Menu Laman yang akan Tampil. Pilih Menu HTML yang berada di sebelah Menu Compose. dan Salin Script Code Berikut ini ke Menu HTML yang telah dipilih.

<div dir="ltr" style="text-align: left;"> Apabila Anda memiliki pertanyaan, saran dan Masukkan seputar Postingan di "Blog Inspiratif" Silahkan hubungi saya melalui email ke <b>bandi.vanhoutten@gmail.com</b> <br /> <br /> Atau bisa langsung isi form di bawah ini untuk menghubungi Saya. Jika tidak ada halangan dan kesibukan lainnya, Saya akan langsung merespon dengan cepat pesan yang Anda kirimkan. <br /> <form name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br /> <input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br /> <div class="clear"> </div> <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> </div>

Pengaturan :

• Ganti Teks "Blog Inspiratif" dengan Nama Blog Sobat
• Ganti Teks "bandi.vanhoutten@gmail.com" dengan Alamat Email Akun Blogger Anda

Lihat Gambar di bawah ini : 

Langkah   7  :  Setelah Anda Menyalin Kode diatas ke Laman Kontak Anda, Sebelum di Publikasikan. Jangan Lupa Hilangkan Kolom Komentar yang nantinya Tampil Dibawah Halaman Kontak yang telah Anda buat. Caranya Lihat Pada Sisi Sebelah kanan Laman yang sedang anda buat : Klik Setelan Laman => klik Menu Pilihan => pada kolom komentar Pembaca => Pilih Jangan bolehkan, sembunyikan yang ada.

Langkah     8   :    Klik Publikasikan ( Anda dapat mereview Halaman Kontak Yang telah Anda buat dengan cara klik tab Lihat yang berada di bawah Judul Laman yang tadi Anda Buat.

langkah      9   : Tahapan selanjutnya, kita akan menghilangkan formulir form yang berada di Sidebar dengan cara : klik menu Template ==> pilih Edit HTML ==> klik Lompat ke Widget (Contact form1)

Langkah      10  : Hapus semua kode yang berada diantara <b:includeable id='main'> dan </b:includeable> yang berada pada widget ContactForm1

Langkah     11  : Jika benar, maka tampilannya akan seperti gambar berikut

Langkah     12  : Selanjutnya, cari kode ]]></b:skin> kemudian tambahkan kode dibawah ini tepat diatas kode ]]></b:skin> tadi.

 .contact-form-name, .contact-form-email { max-width: 200px; width: 100%; } .contact-form-email-message { max-width: 400px; width: 100%; height: 150px; } 

Perhatikan gambar berikut ini.

Langkah      13  : Simpan Template.

Terakhir, tinggal menambahkan link ke halaman kontak kami pada menu. Caranya dengan menambahkan link p/kontak.html

pengaturan :
link p/kontak.html silahkan anda sesuaikan dengan judul laman yang anda buat.

Perhatikan judul Laman pada gambar ini

Sekian Tutorial Inspiratif kali ini, jika Anda Ragu atau Anda menemukan kesalahan dalam Mempraktekannya, Jangan sungkan-sungkan untuk bertanya di Kolom Komentar yang tersedia, atau Melalui Menu Kontak Kami yang telah disediakan.

Terima Kasih.

Salam

Blog Inspiratif