Cara Membuat Halaman untuk Contact Us di Blog

1. Masuk ke Blogger > Pilih menu Halaman >Kemuadian buat postingan di Halaman baru > Pilih Tab HTML ( di sudut kiri atas ) dan tambahkan kode di bawah ini :
<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.

Berikut hasil halaman yang kita buat :

Contact Us

Semoga Bermanfaat...

0 Response to "Cara Membuat Halaman untuk Contact Us di Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

advertisement