Cara Membuat Halaman untuk Contact Us di Blog
23.40
Add Comment
<style scoped="scoped">.post-outer { background: #fff}.post-footer { display: none}#contactForm .floating-label-form-group { font-size: 14px; position: relative; margin-bottom: 0; padding-bottom: 20px; border-bottom: 1px solid #ddd;}#contactForm .floating-label-form-group.floating-label-form-group-with-focus { position: relative;}#contactForm .floating-label-form-group:before { display: block; position: absolute; right: 50%; bottom: -1px; width: 0; height: 2px; background-color: #0400bf; content: ""; transition: width 0.4s ease-in-out;}#contactForm .floating-label-form-group:after { display: block; position: absolute; left: 50%; bottom: -1px; width: 0; height: 2px; background-color: #0400bf; content: ""; transition: width 0.4s ease-in-out;}#contactForm .floating-label-form-group.floating-label-form-group-with-focus:before,#contactForm .floating-label-form-group.floating-label-form-group-with-focus:after { width: 50%;}#contactForm .floating-label-form-group input,#contactForm .floating-label-form-group textarea { z-index: 1; position: relative; padding-right: 0; padding-left: 0; border: none; border-radius: 0; font-size: 18px; font-family: "Helvetica", "Arial", sans-serif; font-weight: lighter; background: none; box-shadow: none !important; resize: none;}#contactForm .floating-label-form-group label { display: block; z-index: 0; position: relative; top: 2em; margin: 0; font-size: 12px; font-family: "Helvetica", "Arial", sans-serif; font-weight: lighter; line-height: 1.764705882em; vertical-align: middle; vertical-align: baseline; opacity: 0; -webkit-transition: top 0.3s ease, opacity 0.3s ease; -moz-transition: top 0.3s ease, opacity 0.3s ease; -ms-transition: top 0.3s ease, opacity 0.3s ease; transition: top 0.3s ease, opacity 0.3s ease;}#contactForm .floating-label-form-group::not(:first-child) { padding-left: 14px; border-left: 1px solid #eeeeee;}#contactForm .floating-label-form-group-with-value label { top: 0; opacity: 1;}#contactForm .floating-label-form-group-with-focus label { color: #0400bf;}#contactForm { border-top: 1px solid #ddd;}#contactForm textarea.form-control { height: auto;}#contactForm .form-control { display: block; width: 100%; color: #555;}#contactForm input:focus,#contactForm input:active,#contactForm textarea:focus,#contactForm textarea:active { outline: none;}#contactForm .btn,#contactForm .contact-form-button-submit { font-family: "Helvetica", "Arial", sans-serif; text-transform: uppercase; font-size: 14px; font-weight: 800; letter-spacing: 1px; border-radius: 0; padding: 0 25px; height: 51px; line-height: 51px; color: #333; background-color: #fff; border: 1px solid #ccc; cursor: pointer; margin: 20px 0 0; background-image: none;}#contactForm .contact-form-button { height: 51px; line-height: 51px;}#contactForm .btn-default:hover,#contactForm .btn-default:focus,#contactForm .contact-form-button-submit:hover,#contactForm .contact-form-button-submit:focus { background-color: #0400bf; border: 1px solid #0400bf; color: white;}.contact-form-error-message-with-border,.contact-form-success-message-with-border { background: #fff; border: 1px solid #ddd; bottom: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); color: #666; font-size: 16px; font-weight: normal; line-height: 30px; margin-left: 0; opacity: 1; position: static; text-align: center; margin: 20px 0 0;}.contact-form-cross { height: 11px; margin: 0 5px; vertical-align: 0!important; width: 11px; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -goog-ms-box-shadow: none!important; box-shadow: none!important;}</style><br /><form id="contactForm" name="contact-form"><div class="floating-label-form-group"><label>Name</label> <input class="form-control" id="ContactForm1_contact-form-name" name="name" placeholder="Name" type="text" value="" /> </div><div class="floating-label-form-group"><label>Email Address</label> <input class="form-control" id="ContactForm1_contact-form-email" name="email" placeholder="Email Address" type="text" value="" /> </div><div class="floating-label-form-group"><label>Message</label> <textarea class="form-control" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea> </div><input class="btn btn-default" id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> <br /><div class="clear"></div><div style="max-width: 100%; text-align: left; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><script src="//code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script><script>$(function() { $("body").on("input propertychange", ".floating-label-form-group", function(e) { $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val()); }).on("focus", ".floating-label-form-group", function() { $(this).addClass("floating-label-form-group-with-focus"); }).on("blur", ".floating-label-form-group", function() { $(this).removeClass("floating-label-form-group-with-focus"); });});</script><script type="text/javascript">//<![CDATA[if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');//]]></script><script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '5626111372043899819';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5626111372043899819','//info-baruku.blogspot.com//','5626111372043899819');_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': '5626111372043899819', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));//]]></script>2. Ganti tulisan yang berwarna merah di atas dengan blogID dan URL blog anda.
3. Publikasikan post dan selesai.
0 Response to "Cara Membuat Halaman untuk Contact Us di Blog"
Posting Komentar