Cara Membuat Contact Us - Magazineers kali ini akan membahas tentang contac us. Contact Us adalah salah satu syarat untuk mendaftarkan blognya ke google adsense. Sama halnya dengan sitemap, sitemap juga penting dalam mendaftarkan ke google adsense. Jika belum punya silahkan baca juga Cara Membuat Sitemap Otomatis di Blog. Maka saya akan mengajarkan cara membuat Contact Us tanpa ada pihak ketiga. Karena kalau kita menggunakan jasa pihak ketiga kita harus cek email yang masuk dengan mengunjungi jasa tersebut. Namun beda dengan cara yang satu ini saya ambil tutorial ini dari seocips.com sebab dengan cara ini email yang di kirimkan langsung masuk ke gmail kita dan tutorial ini sangat mudha dipraktekan. Terimakasih buat seocips yang telah share ilmunya.
Untuk demonya bisa lihat dibagian Contact Us diblog ini. Contact Us sangat penting bagi saya karena bisa menjadikan blog terlihat seperti profesional. Kalau kata temen-temen saya sih formalitas tapi ya gitu.
Berikut ini Cara Membuat Contact Us :
1. Masuk ke blog dan menuju ke Tata Letak blog
2. Pilih widget Kontak Form atau Contact Us kemudian simpan
3. Masuk kebagian Template dan Edit Html
4. Cari kode seperti dibawah ini (untuk lebih mudahnya gunakan CTRL + F) dan hapus kode yang ada di tulisan "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. Kemudian simpan template kalian
6. Sekarang masuk kebagian laman atau postingan. Buat satu laman dan masuk ke mode Html
7. Copy dan Paste kode dibawah ini :
<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/AVvXsEghpwPKrIPcip0qkZim3vxXNuzJVE8r8UXbJDdnrq2xNeGzYeaYoBH2ZTpKAvvvMFyvwAelX4z2eGL6gaXvhCNbwcPxHDPz939R5vR2Ny4OH7UJjxpmGY88zAp2qvUbaYoe_ufVgO9XzVo/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/AVvXsEgl5gfsp3pLti_Cv4JXuGI60F2J1-lo1PQuCyBojSPRI-dZpM6QIL6NPBKN3bGGg2GBH2GOtG46iTY3wN6lTjZC9ijkKOYqqcDLbY2anq4EKlO1f-XWvzDylVC8pV7pGEpvo7tMZR98bGg/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/AVvXsEghpwPKrIPcip0qkZim3vxXNuzJVE8r8UXbJDdnrq2xNeGzYeaYoBH2ZTpKAvvvMFyvwAelX4z2eGL6gaXvhCNbwcPxHDPz939R5vR2Ny4OH7UJjxpmGY88zAp2qvUbaYoe_ufVgO9XzVo/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>
8. Kemudian publikasikan dan jangan dipindah ke mode compose karena kalau di ubah ke mode compose, Contact Us akan jadi berantakan.
Ya tampilannya memang hanya seperti yang di blog ini tapi kan lebih baik dan langsung masuk gmail daripada pakai jasa pihak ketiga malah ribet dan tidak langsung ke gmail. Sekian artikel ini saya tulis semoga bermanfaat dan semoga Cara Membuat Contact Us ini berguna.
0 komentar:
Post a Comment