Teknologi komputer kali ini akan membahas tentang Contact Us. Seberapa penting contact us menurut kalian? Kalau menurut saya penting sekali karena dari situlah saya bisa melihat respon kalian walaupun bisa dari komentar sih. Namun jika ada yang memberi feedback dari Contact Us kan berarti blog kita ada yang memperhatikan hahaha. Contact Us itu adalah salah satu syarat wajib jika kalian ingin mendaftarkan blognya ke Google Adsense. Sama seperti sitemap yang mempunyai peran penting dalam lolos tidaknya blog kalian ke Google Adsense. Jadi jika kalian belum mempunyai Sitemap segera baca juga artikel " Cara Membuat Sitemap Blog Otomatis ". Saya tidak akan membahas sitemap, fokus lagi ke contact us ya.
Ada sih cara lain untuk membuat Contact Us ini, Namun dengan menggunakan pihak ketiga, dan seperti yang saya tau atau kalian juga tau bahwa jika kalian menggunakan jasa pihak ketiga, kalian harus cek email kalian di pihak ketiga tersebut, Kan repot. Nah kalau menggunakan cara ini, email yang kalian terima akan langsung masuk ke gmail kalian kan asik hahaha. Nah tanpa panjang lebar lagi silahkan simak cara berikut :
1. Masuk kedalam blog kalian dan menuju ke Tata Letak
2. Kemudian " Add Gadget " pilih " Kontak Form " / " Contact Us "
3. Simpan dan menuju ke halaman Template dan klik " Edit Html "
4. Kemudian cari kode dibawah ini ( untuk lebih mudahnya gunakan " CTRL + F " ) dan hapus bagian yang tersebut " Hapus Bagian Ini "
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
Hapus bagian ini
</b:includable>
</b:widget>
</b:section>
5. Setelah itu simpan template kalian dan menuju ke laman
6. Buat laman baru dan kasih judul terserah kalian dengan mode " Html " sebelah " Compose "
7. Kemudian Copy dan Paste Kode dibawah ini ke laman baru kalian
<div class='seocips-contact-form'>
<div class='form'>
<!-- Custom Contact Form By Seocips start -->
<div class='seocips-contact-title'>
Contact Form
</div>
<form name='contact-form'>
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' />
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/>
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Leave Your Message..' onblur='if (this.value == "") {this.value = "Leave Your Message..";}' onfocus='if (this.value == "Leave Your Message..") {this.value = "";}'></textarea>
<p></p>
<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit seocips-button-color' type='reset' value='Clear'/>
<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit seocips-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>
<!-- Validation -->
<div style='text-align: center; max-width: 222px; width: 100%'>
<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>
</div>
</form>
<!-- End Custom Contact Form By seocips -->
</div></div>
<style>
.seocips-contact-form { background:#fff; box-shadow:-1px 2px 3px #ddd; font:12px arial; width:100%; max-width:320px; margin:20px auto; padding:15px; border:1px solid #ddd; }
.seocips-contact-title { box-shadow:-1px 2px 3px #ddd; text-shadow:0 1px 1px rgba(0,0,0,.3); margin:0 0 10px 0; font-weight:400; padding:10px 15px; font:16px Arial; cursor:pointer; text-align:center; color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.contact-form-name,.contact-form-email,.contact-form-email-message { max-width:320px; width:100%; font-weight:bold; }
.contact-form-name { background:#f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Sw7bHm6vMOQ9JmM0RkZuX7NniOJZE7E36YqHfpZB25bxvPnVh2-6fnyw88EJSaPfLsioJLJYB-mgbGH12K4gtXOK2g9GZp1no2Gt1dFI9O972WRG2FGPgzZ-Z94vEUjMzM3qeHMoJuo/s320/name.png) no-repeat 7px 8px; background:#f3f3f3; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; box-shadow:inset -2px 2px 3px #ddd; vertical-align:top; }
.contact-form-email { background:#F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLDGWaQYtmgpQlqGbZHtuKJ39GHE-y5-kcG4MvKZOGfBOzhWyVmOcUFkBUNhjOOF5UkEBWLQanqU6de5KzlNuSjXYq_1vjXfGnNGQDp1SuzO7Jhq4I8Cvi2FFVinlVFd7dsdS5zexFRRA/s320/email.png) no-repeat 7px 10px; background-color:#F2F2F2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; vertical-align:top; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-email:hover,.contact-form-name:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:5px 15px 5px 28px; }
.contact-form-email-message:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:10px; }
.contact-form-email-message { background:#FFF; background-color:#f2f2f2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:arial; font-size:13px; margin:0; margin-top:5px; padding:10px; vertical-align:top; max-width:320px !important; height:150px; border-radius:4px; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-button { cursor:pointer; height:32px; line-height:28px; font-weight:bold; border:none; }
.contact-form-button { display:inline-block; zoom:1; *display:inline; vertical-align:baseline; margin:0 2px; outline:none; cursor:pointer; text-align:center; text-decoration:none; font:14px/100% Arial,Helvetica,sans-serif; padding:.5em 2em .55em; text-shadow:0 1px 1px rgba(0,0,0,.3); box-shadow:-1px 2px 3px #ddd; }
.contact-form-button:hover { text-decoration:none; }
.contact-form-button:active { position:relative; top:1px; }
.seocips-button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.seocips-button-color:hover { background:#f47c20; }
.seocips-button-color:active { color:#fcd3a5; }
.contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Sw7bHm6vMOQ9JmM0RkZuX7NniOJZE7E36YqHfpZB25bxvPnVh2-6fnyw88EJSaPfLsioJLJYB-mgbGH12K4gtXOK2g9GZp1no2Gt1dFI9O972WRG2FGPgzZ-Z94vEUjMzM3qeHMoJuo/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>
8. Langsung Publikasikan saja dan jangan ubah ke mode compose. ( Jika di ubah hasilnya akan berantakan )
Selamat Contact Us kalian udah jadi. Sekian Artikel Cara Membuat Contact Us in saya tulis semoga bisa bermanfaat dan berguna bagi kalian yang membutuhkan artikel ini. Salam
