Memasang Widget Contact Form menarik di laman blog

Hoollaaaa... !!! sobat semuanya, kali ini saya coba membagikan informasi tentang bagaimana membuat/memasang contact Us pada blog. Seperti yang kita tau, salah satu syarat dari Adsense yang dikeluarkan oleh google adalah adanya Contact Us itu sendiri, terlebih bila sobat menggunakan domain sendiri/berbayar.

Untuk pembuatan contact us pada blog ini sendiri berasal dari blog seocips, dan dengan sedikit perubahan dari saya yang tidak terlalu siknifikan tentunya.... maaf ya Om, hehehehe..

Oke, lanjut.... berikut ini cara membuat contact us sederhana namun menarik dijamin sobat juga ingin mencobanya :

1.    Sobat masuk kehalaman Tata Letak pada blog sobat, kemudian pilih add a gadget

2.    Pilih more gadget >> kemudian pilih contact form

3.    Kemudian masuk ke template >> edit HTML pada blog sobat

4.    cari kode seperti dibawah ini dan hapus beberapa bagian seperti tampilan di bawah

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
Bagian yang dihapus
</b:includable>
  </b:widget>
</b:section>

 

5.   oke... jika sudah save/simpan perubahan template sobat.

Sekarang kita lanjut untuk untuk pemasangan contact us pada blog kita, tenang saja cara nya tidak terlalu sulit. Untuk pemasangannya, silahkan masuk ke menu laman blog sobat dan pilih laman baru, untuk judul laman sesuaikan saja dengan selera sobat pembaca setelah itu masukkan kode dibawah ini dengan menggunakan  mode HTML sebelah (composse) kedalam halaman sobat.

<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 == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
<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 == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
<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 == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></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:#e9e9fe; border:solid 1px #0851bd; background:#0865d9; }
.contact-form-name,.contact-form-email,.contact-form-email-message { max-width:320px; width:100%; font-weight:bold; }
.contact-form-name { https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4-BhhTWoaz-6X9sSqB_UGoP5eR6wrElR-fPeXTibu-nuz8hF6IjzvbaM5q46jpz5O1Nz4rU9c7e294V7zdQZdZjo4no1ADima8hEPG3E-egIQ8mpJls1qiIQp3RmXvuXl3D2tPanGvOo/s20/testimonial.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/AVvXsEgSkzO9P_t29_mtPiIQ1WghYhVVKYHjr8cpTyYFYcLn9tbU9sXdUsuEGYA7Tsg6DGlSQp8iWrBIBMP_GTYwaKEDhHFtoveusn1ukDJEZyU4u_mOT8XDukhdWbp4mwj0knRkNLc4MB3PhSs/s20/Communication-email-blue-icon.png) no-repeat 7px 6px; 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:# e9e9fe; border:solid 1px # 110cd3; background:# 1c11f4; }
.seocips-button-color:hover { background:# 2020f4; }
.seocips-button-color:active { color:#fcd3a5; }
.contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4-BhhTWoaz-6X9sSqB_UGoP5eR6wrElR-fPeXTibu-nuz8hF6IjzvbaM5q46jpz5O1Nz4rU9c7e294V7zdQZdZjo4no1ADima8hEPG3E-egIQ8mpJls1qiIQp3RmXvuXl3D2tPanGvOo/s20/testimonial.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>

jika sudah, tetap dalam mode HTML dan silahkan sobat publikasikan. karna jika sobat kembalikan ke menu compose terlebih dahulu baru di publikasikan ditakutkan menunya akan berantakan.

sampai disini dulu info yang saya bagikan mengenai pembuatan contact form / contact us, meskipun tampilan widgetnya sederhana tapi sudah cukup menarik bagi saya, dan sobat bisa langsung mengujinya dan pesan yang dikirim akan langsung masuk ke e-mail sobat. 

Posted by Unknown

Tweet