Membuat Contact Us di Blog Blogger. Mengapa dikatakan sederhana? karena untuk memasangnya kita tidak perlu mendaftar ke website pihak ketiga (yang kadang kala widgetnya ada iklannya dan link yang keluar) ke web penyedia widget seperti ini, tapi kita akan menggunakan widget yang telah disediakan oleh pihak Blogger.
Memasang ini di blog merupakan salah satu bagian yang penting dan berfungsi sebagai media korenspondensi formal dan personal. Meskipun sudah ada banyak media lain, namun halaman kontak menjadi pilihan karena menjaga privacy bagi kedua belah pihak, yaitu pemilik blog/website dan visitor/customer. Hal ini juga sebagai syarat utama agar Google Adsense dapat diverifikasi secara penuh.
Contact form sangatlah penting untuk blogger karena jika mereka ingin menyampaikan sesuatu kepada pemiliki blog, mereka dapat menghubungi kita menggunakan widget ini. Biasanya contact form diberi judul "Hubungi Kami" atau "Contact Us" dan disediakan oleh Blogger hanya bisa digunakan untuk widget blog, tapi dengan tutorial ini maka kita dapat memasangnya ke halaman blog kita.
Nah berikut adalah cara membuat dan memasang widget ini ke halaman blog.
1. Memasang Widget Contact Form di Blog
Kita harus menambahkan widget contact form kedalam halaman yang kita buat. Caranya, buka halaman layout > Add gadget > Contact Form. Letakkan di sembarang tempat.
2. Kemudian cari kode seperti dibawah ini dan hapus pada beberapa bagian dan sisakan seperti dibawah ini (tulisan "hapus bagian ini" itu dihapus juga yah ) semua ini letaknya ada di edit html dalam Template.
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
Hapus bagian ini
</b:includable>
</b:widget>
</b:section>
Nah sekarang simpan template anda. Memang kita harus memasang dulu widgetnya kemudian menghapusnya seperti cara di atas, kalau tidak contact formnya tidak akan berfungsi. Jika sudah, sekarang tinggal memasukan kode sesuai petunjuk di bawah ini ke halaman blog kamu.
3. Membuat Halaman Contact Us
Sekarang lanjutkan untuk membuat halaman "Contact us". Buat laman baru. Jika sudah siap, letakan kode dibawah ini dengan mode HTML ( sebelahnya compose ) ke dalam halaman anda.
<div class="seocips-contact-form">
<div class="form">
<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" onblur="if (this.value == "") {this.value = "Name";}" onfocus="if (this.value == "Name") {this.value = "";}" size="30" type="text" value="Name" />
<br />
<!-- Email ID Field -->
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == "") {this.value = "Email ID";}" onfocus="if (this.value == "Email ID") {this.value = "";}" size="30" type="text" value="Email ID" />
<br />
<!-- Message Field -->
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == "") {this.value = "Leave Your Message..";}" onfocus="if (this.value == "Leave Your Message..") {this.value = "";}" value="Leave Your Message.."></textarea>
<br />
<!-- 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" />
<br />
<!-- Validation -->
<br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</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/AVvXsEizHNw94VNp47VlZc-siXsZHb0TmRbp-Ppeqy1gpMmzrfqg9Jh916w2YBhxYKiyw_tmFdeTpaM29SKUppUmN3XSPQ_7a48lwuxjn6AAlkHWs7KztkGbtwHz_N9bngnKy3kmGssimR5lGRg/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/AVvXsEheyWgFEb48Ue0YyagRvZ3v-Xf8LAx7u5QbbQ8md5AYFK9NpkZnM081hNZ8IGvNvs-sysj2fqu6X8A7hyphenhyphenOYIMa8kKtjOOv56Yd5xpARx6SPbMAIaRxIjxTAs1xnGawdJac8vql5_vDMXIA/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/AVvXsEizHNw94VNp47VlZc-siXsZHb0TmRbp-Ppeqy1gpMmzrfqg9Jh916w2YBhxYKiyw_tmFdeTpaM29SKUppUmN3XSPQ_7a48lwuxjn6AAlkHWs7KztkGbtwHz_N9bngnKy3kmGssimR5lGRg/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>
Masih dalam mode HTML dan langsung saja pubilkasikan, jika kamu kembail dulu ke mode compose kemudian dipublikasikan contact form-nya bisa berantakan.
Memang widget di atas tampilannya simple dan sederhana, tapi cukuplah menurut saya. Anda dapat menguji cobanya dengan mengirimakan pesan menggunakan contact form ini dan periksa apakah pesannya muncul di gmail (email blogger) kamu.
Sebagai contoh saya sertakan link-nya
No comments:
Post a Comment