Cara Membuat Contact Us Bawaan Blogger

Untuk mengurangi link dari luar blog kita, Salah satu caranya adalah dengan membuat contact us blog kita menggunakan contact us bawaan dari bloggger itu sendiri. Selain blog kita menjadi lebih ringan juga membuat blog kita lebih ter SEO.

Umumnya membuat contact us di blogger yaitu dengan menambahkan gadget di posisi yang kita inginkan di Tata Letak, tapi tentu contact us tersebut akan sangat mengganggu karena ukuranya. Karena itu disini kita akan membuat contact us seperti pada umumnya tapi akan kita sembunyikan tampilanya di blog sehingga tidak mengganggu. Dan di blog hanya akan terlihat Tulisan contact us yang ketika di klik akan terhubung dengan link ke Laman contact us. Nah mari kita ikuti langkah dibawah ini :

1. Di Tata Letak kita buat dulu Formulir kontak yaitu dengan klik Tambahkan Gadget di posisi yang kita inginkan. Pada Gadget Klik Formulir Kontak. Akan muncul kotak konfigurasi widget Formulir Kontak kemudian Simpan. 

2. Formulir Kontak yang selesai dibuat tampilanya akan seperti di bawah ini kemudian Klik Simpan setelan

3. Di Laman kita buat contact us yaitu dengan klik Laman Baru. Pastekan kode dibawah ini di bagian HTML :

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

Atur seperti dibawah ini. Beri judul dan terakhir klik Publikasikan

4. Di Tema klik edit HTML. Tekan keyboard Ctrl + F secara bersamaan, akan muncul kotak search. Isi kotak search dengan skin lalu enter. Akan muncul seperti dibawah ini. Klik gambar segitiga.

5. Scroll ke bawah sampai ketemu code  ]]></b:skin>.

Pastekan kode dibawah ini di atas code ]]></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;
}

Lalu Klik Simpan Tema

6. Selesai tinggal kita hubungkankan link contact us di laman dengan contact us di tampilan blog kita.