Cara Membuat Halaman Contact Us Sederhana di Blogger

Cara Membuat Halaman Contact Us Sederhana di Blogger - Halaman Contact Us atau Contact Me adalah halaman statis yang dibuat untuk memudahkan pengunjung sebuah blog untuk menghubungi pemilik atau pengelola blog. Seperti pada postingan sebelumnya, Halaman yang Wajib Ada pada sebuah Blog Serta untuk Google Adsense. bahwa halaman Contact penting bagi sebuah blog. Cara membuat halaman contact cukup mudah apalagi bagi pengguna platform Blogger, sudah ada widget Formulir Kontak. Tapi, ada cara membuat halaman contact di halaman statis, jadi form kontak tidak selalu muncul di semua halaman blog.

Cara Membuat Halaman Contact Us Sederhana di Blogger

Masuk ke dashboard Blogger.
Pilih menu Halaman.

Buat Halaman Baru

Isikan data sebagai berikut:

1. Isikan judul halamanya, misal Cntact Us.
2. Pilih Mode Pengeditan HTML dulu {lupa kelewatan belum di edit gambarnya (-: }. Lalu pastekan kode berikut:


<style type="text/css">#comments,.post_meta,#blog-pager{display:none}form{color:#666} #kontak{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}#ContactForm1_contact-form-submit{float:left;background:#204ecf;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}#ContactForm1_contact-form-submit:hover{background:#1d2129;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#1d2129;border:none;box-shadow:none;color:#fff;padding:5px 0}.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}img.contact-form-cross{line-height:40px;margin-left:5px}.post-body input{width:initial}</style>

<form id="kontak" name="contact-form">
  <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
  <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
  <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
  <input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan" />
  <div style="max-width: 222px; text-align: center; width: 100%;">
    <div id="ContactForm1_contact-form-error-message"></div>
    <div id="ContactForm1_contact-form-success-message"></div>
  </div>
</form>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6253852936442592765';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d6253852936442592765','//6253852936442592765/','www.noorkhafidzin.com');
_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': '6253852936442592765', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

3. Kemudian ganti:

6253852936442592765 dengan Blog ID Anda

www.noorkhafidzin.com dengan Url blog Anda