Membuat Halaman Kontak Form Keren Ala B.JU
Membuat Halaman Kontak Form Keren Ala B.JU - Apahan ini kontak form ala B.JU 😄 bingung kan? sobat tidak usah bingung B.JU merupakan singkatan dari nama situs ini blog jejak unik sebab jika saya tulis lengkap judulnya akan kepanjangan.
Apapun itu tidaklah penting sebab di sini kita akan membuat sebuah halaman kontak form yang tentunya sangat berguna sekali untuk kita sebagai admin agar bisa berkomunikasi dengan pembaca blog kita semua.
Cara Membuat Kontak Form di Blog ini sangat mudah dan hasilnya tetap elegant kok, sebab saya sendiri menggunakannya. Tanpa panjang lebar dan tebar pesona lagi lebih baik kita masuk ke langkah pemasanganya sbb:
Baca juga: Cara Pasang Border Pelangi Agar Tampilan Blog Lebih Indah
Pertama..
Lihat pada tab sebelah kiri Dasbor. Lalu klik Halaman > Buat Halaman Baru > Mode HTML (Bukan Compose).
Selanjutnya copy semua kode di bawah ini
<style type="text/css">.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%}.contactf-email,.contactf-name{float:left;width:50%}.contact-form-email,.contact-form-email-message,.contact-form-email-message:focus,.contact-form-email-message:hover,.contact-form-email:focus,.contact-form-email:hover,.contact-form-name,.contact-form-name:focus,.contact-form-name:hover{width:100%;max-width:100%;margin:0 0 15px;padding:10px;font-size:14px;color:#777;background:#E2DEDB;border:1px solid #CBC7C4;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-email,.contact-form-name{height:33px}.contact-form-email-message{height:130px}.contactf-message{position:relative}.contactf-message:after,.contactf-message:before{border-bottom:50px solid transparent;border-left:80px solid #E2DEDB;bottom:-32px;content:'';position:absolute;right:50%;margin-right:-100px}.contactf-message:before{border-left:80px solid #CBC7C4;bottom:-34px;right:50.3%;margin-right:-101px}.cbluebutton{margin-top:25px;width:30%;height:35px;float:right;font-size:15px;color:#fff;display:inline-block;text-align:center;background:linear-gradient(to bottom,#339ad9 0,#224bbc 100%);box-shadow:0 1px 1px rgba(34,75,188,.5);border:0;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.cbluebutton span .contact-form-button-submit{background:linear-gradient(to bottom,#52b1e2 0,#397fd0 100%);font:700 16px "Helvetica Neue",sans-serif;height:35px;width:100%;color:#FFF;text-shadow:0 1px 1px #224BBC;display:inline-block;box-shadow:0 1px 1px rgba(255,255,255,.3) inset;cursor:pointer;outline:0;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-button-submit:active{top:1px;outline:0;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:none!important;box-shadow:none!important;padding:0!important;width:11px!important;height:11px!important}</style><div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><div class="form"><form name="contact-form"><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Message" rows="5" value="Message" onblur='if (this.value == "") {this.value = "Message";}' onfocus='if (this.value == "Message") {this.value = "";}'></textarea></div> <div class="cbluebutton"><span><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></span></div> <div class="contactf-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"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="E-mail" onblur='if (this.value == "") {this.value = "E-mail";}' onfocus='if (this.value == "E-mail") {this.value = "";}' /></div> <div style="clear:both"></div> <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> </form></div> </div></div><script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><script type="text/javascript">if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7641991269666152124';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7641991269666152124','//www.blog.jejakunik.com/','7641991269666152124');WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "Your message has been sent.", "contactFormMessageNotSentMsg": "Message could not be sent. Please try again later.", "contactFormInvalidEmailMsg": "A valid email address is required.", "contactFormEmptyMessageMsg": "Message field cannot be empty.", "title": "Contact Form", "blogId": "7641991269666152124", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));</script>Kalian hanya perlu mengganti kode yang saya blok kuning dengan ID BLOG dan Url blog kalian. Lalu PUBLIKASIKAN dan lihat hasilnya
Untuk mendapatkan ID BLOG cukup mudah kalian hanya perlu melihat halaman utama dasbor blogger anda seperti gambar ini (klik untuk perbesar gambar)
Selamat Mencoba!
Jejak Unik
Kumpulan Informasi Unik Menarik Dari Berbagai Belahan Dunia. www.jejakunik.com