Halaman Contact Us bisa dikatakan sebagai halaman yang wajib ada sebagai salah satu halaman penting blog. Terlebih lagi jika blog yang anda kelolah merupakan media pemasaran produk anda. Dengan adanya halaman kontak ini, pembaca blog bisa dengan mudah menghubungi anda terkait hal apapun yang terdapat pada blog anda dengan tidak mengesampingkan privasi anda sebagai pemiliki blog tentunya.
Kabar baiknya, blogger.com sendiri telah menyediakan fasilitas ini sebagai salah satu gadget default blogger. Untuk bagaimana membuat halaman Contact Us di blogger, berikut langkah-langkahnya:
Buka menu
Tata Letak /
Layout yang terdapat pada
Dashboard blog. Klik salah satu link "
Add a Gadget". Anda bisa mengklik link Add a Gadget / Tambahkan Gadget dibagian mana saja. Untuk contoh ini saya misalkan melalui link yang terdapat pada element "
Sidebar".
Akan terbuka window baru pada browser. Klik pada menu "
More Gadgets" dan pilih "
Contact Form" (Formulir Kontak).
Selanjutnya akan muncul pengaturan
Title (Judul), Untuk mudahnya biarkan secara default (Contact Form), dan klik "
Save".
Pada tahap ini, layanan formulir kontak telah berhasil diaktifkan. Anda bisa mengunjungi blog anda untuk melihat widget kontak yang telah ditambahkan pada elemen yang dipilih (pada contoh ini adalah sidebar).
Penambahan gadget contact us diatas akan menampilkan formulir komentar pada semua halaman blog. Pada tutorial ini, kita akan membuat halaman contact us secara khusus yaitu pada laman static blog. Sebelum itu, terlebih dahulu akan kita hapus kode widget contact form ini melalui Edit HTML.
Menghapus Kode Widget Contact Form
Karena disini kita akan membuat halaman contact pada laman static, terlebih dahulu kita akan menghapus kode yang akan menampilkan formulir kontak pada semua halaman. Penghapus kode ini akan kita lakukan melalui "
Edit HTML". Sebelum itu, pastikan anda melakukan Backup template terlebih dahulu, untuk tutorial bagaimana cara backup template bisa anda baca
DISINI.
Sekarang kita mulai tahap penghapusan kodenya. Pada menu "
Template", klik "
Edit HTML".
Pada antarmuka HTML Editor yang terbuka, klik pada "
Jump to widget", kemudian pilih "
ContactForm1".
Anda akan dibawa pada baris kode Widget Contact Form. Pada keadaan awal, hanya tag pembungkus widget yang akan terlihat. Klik tombol
Expand yang terdapat pada samping kiri tag widget untuk menampilkan isi atau sub tag dari widget tersebut (atau bisa juga dilakukan dengan mengklik "..." yang terdapat diantara tag pembuka dan penutup widget. Lebih jelasnya perhatikan gambar dibawah ini:
Tampilan setelah tag widget ter-expand kurang lebih seperti berikut:
Selanjutnya
Expand tag
<b:includable id='main'> ...
</b:includable> yang terdapat didalam tag widget ContactForm1 untuk menampilkan semua kode widget contact form. Tampilan semua kode contact form ini kurang lebih seperti berikut:
Sekarang tugas anda adalah menghapus semua kode yang terdapat diantara kode
<b:includable id='main'> dan
</b:includable> yang terdapat dalam tag widget ContactForm1.
Jika anda melakukannya dengan benar, seharusnya kode widget Contact From ini kurang lebih akan seperti berikut:
Terakhir,
Simpan Template dan tutup antarmuka HTML Editor.
Sekarang kembali kunjungi blog anda, jika proses penghapus telah dilakukan, seharusnya formulir kontak sudah tidak terlihat pada blog.
Cara membuat Halaman Contact Us (Laman static)
Sebelum anda membaca lebih jauh, untuk lebih efektifnya, pastikan anda telah membaca post
Perbedaan Laman dan Post yang telah diterbitkan sebelumnya untuk mengetahui beberapa informasi terkait laman static yang mungkin tidak akan saya jelaskan ulang pada halaman ini ^_^.
Kembali pada pembuatan halaman contact us pada laman static, untuk lebih mudahnya, disini saya telah menyiapkan kode HTML dan CSS yang bisa langsung anda gunakan untuk formulir kontak anda. Adapun tampilan formulir kontak ini kurang lebih akan terlihat seperti halaman Contact Us wiBlogger.com.
Oke, kita mulai pada pembuatan halaman Contact Us. Silahkan buat halaman statik baru dengan judul "Contact Us" atau "Hubungi Kami". Pastikan anda mengikuti langkah-langkah pada tahap prosedur dasar sebelumnya).
Copy dan
Paste semua Kode dibawah ini ke Editor Laman (dengan
Mode HTML).
Kode HTML dan CSS Contact Form:
<p>Tambahkan text pembuka untuk formulir kontak versi anda sendiri disini ^_^</p>
<div class='widget ContactForm' id='ContactForm1'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>Nama</p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-mail <span class='red-color'>*</span></p>
<input placeholder=" Email balasan akan dikirim ke sini" class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Pesan <span class='red-color'>*</span></p>
<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='Kirim Pesan'/>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</form>
</div>
</div>
</div>
<!-- Contact Form Style by wiBlogger.com Start -->
<style type='text/css'>
#ContactForm1 {
padding: 4%;
border: 3px dashed #ababab;
background: #f6f7f8;
}
#ContactForm1_contact-form-name {
width: 300px;
height: 20px;
max-width: 95.5%;
margin-top: 7px;
margin-bottom: 10px;
padding: 2%;
}
#ContactForm1_contact-form-email {
width: 300px;
height: 20px;
max-width: 95.5%;
margin-top: 7px;
margin-bottom: 10px;
padding: 2%;
}
#ContactForm1_contact-form-email-message {
width: 93.5%;
height: 150px;
margin-top: 10px;
padding: 3%;
resize: none;
}
.contact-form-widget select,.contact-form-widget option {
height: 40px;
width: 307px;
}
#ContactForm1_contact-form-submit {
border: 0;
padding: 10px 30px;
font-size: 20px;
background: #659100;
color: #fff;
margin-top: 20px;
box-shadow: 0 0 10px #426e19 inset;
}
#ContactForm1_contact-form-submit:hover {
box-shadow: none;
}
#ContactForm1_contact-form-error-message {
text-align: center;
padding: 0px 20px;
margin-top: 15px;
color: #D41C1C;
}
#ContactForm1_contact-form-error-message img {
display: none;
}
</style>
Sebelum "
Mempublikasikan /
Memperbarui" halaman kontak anda, pastikan setting pada
Line break yang terpilih adalah "
Press Enter for line break" (Poin 3 pada gambar diatas).