Membuat Halaman Contact Form di blog itu adalah keharusan, mengingat pentingnya layanan ini untuk para pengunjung website sobat.
Dengan adanya Halaman kontak,
pengunjung akan lebih mudah menghubungi sang pemilik atau pengelola situs Blog jika ada hal yang penting ingin di tanyakan selain menggunakan kolom komentar.
Biasanya Conatct us di gunakan sebagai sarana berkomunikasi seputar masalah pribadi untuk di tanyakan kepada si admin blog,
Bahkan mungkin pengunjung ingin menjalin silaturrahim saja kepada penulis dari artikel yang telah mereka baca yaitu kepada sobat.
Cara Membuat Contact us
Halaman Contact Us ini biasanya oleh para blogger di tempatkan berdampingan dengan halaman statis yang lain seperti Disclaimer, Term of Service (TOS), Privacy Policy dan About us.
Ataupun juga mereka biasanya menempatkan dan di pasang pada widget.
Sobat bisa lihat demo halaman contact us nya dibawah:
Formulir Kontak
Mari Kita langsung ke Cara Membuat Contact us di Blogger...
Langkah-Langkah:
1. Pertama, sobat login dulu ke Blogger.
2. Habis itu masuk ke menu Layout atau Tata Letak, lalu Klik Tambahkan Gadget atau Add Gadget.
Maka akan muncul banyak pilihan widget, sobat pilih saja widget formulir kontak >> Simpan Setelan.
3. Sekarang coba klik lihat blog dan lihat bahwa widget Contact Form sudah terpasang.
Karena kita akan membuat contact form HTML untuk di jadikan sebuah halaman,
maka selanjutnya kita akan menghapus widget Contact Form tersebut.
4. Caranya masuk ke menu Tema >> edit HTML >> Salin kode berikut lalu tempelkan di atas kode </head> pada template sobat.
#ContactForm1{display: none !important;}
Jangan lupa klik Simpan Template, dengan begitu gadget yang tadi sobat pasang maka akan hilang dari tampilan blog sobat.
5. Sekarang masuk ke menu Halaman >> buat laman baru.
6. Beri judul halaman tersebut Contact us.
7. Lalu Copy semua kode berikut
<style type="text/css">
.widget.ContactForm{z-index:1}.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px 0;background:#EBEBE3;-webkit-border-radius:2%;-moz-border-radius:2%;border-radius:2%}.contact-form-widget .form{width:91%;margin:0 auto}.ribbon{font:16px Arial;text-transform:capitalize;text-shadow:0 1px 2px rgba(0,0,0,0.25);position:relative;background:#006666;color:#fff;text-align:center;padding:1em 2em;margin:0 -16px}.ribbon:before,.ribbon:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #584C40;z-index:-1}.ribbon:before{left:-1.7em;border-right-width:1.2em;border-left-color:transparent}.ribbon:after{right:-1.7em;border-left-width:1.2em;border-right-color:transparent}.ribbon .ribbon-content:before,.ribbon .ribbon-content:after{content:"";position:absolute;display:block;border-style:solid;border-color:#42362A transparent transparent;bottom:-1em}.ribbon .ribbon-content:before{left:0;border-width:1em 0 0 1em}.ribbon .ribbon-content:after{right:0;border-width:1em 1em 0 0}.contactf-name,.contactf-email,.contactf-message{text-align:left;margin-top:25px;color:#a1937b;font-size:13px}.contactf-name,.contactf-email{float:left;width:100%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:10px 0 0;padding:10px;font-size:12px;color:#aaa;border-color:#DBD6D1;border-width:1px;box-shadow:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.contact-form-name,.contact-form-email{height:35px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:37px;font:normal 12px Arial;outline:none;letter-spacing:1px;color:#fff;text-align:center;cursor:pointer;text-shadow:1px 1px 0 #ffe8b2;color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#fed970) to(#febd4b));background:-webkit-linear-gradient(#fed970,#febd4b);background:-moz-linear-gradient(#fed970,#febd4b);background:-ms-linear-gradient(#fed970,#febd4b);background:-o-linear-gradient(#fed970,#febd4b);background:linear-gradient(#fed970,#febd4b);-pie-background:linear-gradient(#fed970,#febd4b)}.contact-form-button-submit:active{color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#febd4b) to(#fed970));background:-webkit-linear-gradient(#febd4b,#fed970);background:-moz-linear-gradient(#febd4b,#fed970);background:-ms-linear-gradient(#febd4b,#fed970);background:-o-linear-gradient(#febd4b,#fed970);background:linear-gradient(#febd4b,#fed970);-pie-background:linear-gradient(#febd4b,#fed970)}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}
</style>
<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><h2 class="ribbon"><strong class="ribbon-content">Shoot Me an Email</strong></h2><div class="form"><form name="contact-form"><div class="contactf-name">Your name:<input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' /></div><div class="contactf-email">E-mail address *:<input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message">Message *:<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." rows="5" value="" placeholder="Type your message here..." value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND MESSAGE" /><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></div>
Paste kan di lembar kerja HTML. INGAT! jangan mode
8. Terakhir, sobat bisa langsung mempublishkan nya.
Bila sobat paham dengan HTML dan CSS, bisa mencoba kreasikan sendiri formulir kontak tersebut.
Sangat mudah bukan Cara membuat Contact us di Blogspot.
Mungkin hanya itu saja yang bisa saya bagikan, bila ada yang belum paham bisa tanyakan saja di kolom komentar.
See you next time, Semoga Bermanfaat.
