Skip to main content
YUUARI

follow us

Cara Membuat Halaman Kontak di Blogger Pada Halaman Statis

Halaman kontak sangat penting bagi blog. Karena memudahkan pengujung blog untuk menghubungi pemilik blog tersebut, entah pengunjung ingin bertanya secara pribadi, ingin memasang iklan, sampai kerja sama content placement.

Membuat form kontak sangatlah mudah dan bahkan blogger pun sudah mendiakan-nya dengan menggunakan wiget formulir kontak (contact form), anda juga bisa membuat-nya di halaman statis (static page), lalu anda bisa menembatkan link halaman kontak di navigasi menu atau di bagian footer blog. Berikut langkah-langkah membuat halaman kontak di blogger.

Membuat Halaman Kontak di statis Blog

Kode yang akan saya berikan ini, saya mendapatkanya di template nubie fast style 2 dengan cara view source (melihat sumber kode) pada blog. Jadi formulir kontak-nya akan sama tampilannya dengan formulir kontak pada template nubie fast style 2. Oke langsung saja cek kode-nya di bawah ini:

1. Buka akun Blogger anda.
2. Pada dasbor blogger pilih menu Halaman > buat Halaman baru.
3. Untuk judul silakan tulis Contact Us atau sesuka anda.
4. Salin kode di bawah ini pada mode penulisan HTML.

<form name="contact-form">Nama<br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  <br />
Alamat Email <br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  <br />
Isi Pesan<br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br />
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />  <br />
<div style="max-width: 100%; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><br />
<style scoped="" type="text/css">#ContactForm1,#comments{display:none}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:50%;height:auto;margin:10px auto;padding:10px;background:#f5f5f5;color:#666;border:1px solid transparent} #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:10px auto;padding:10px;background:#f5f5f5;color:#666;border:1px solid transparent} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border:1px solid rgba(0,0,0,0.2)} #ContactForm1_contact-form-submit{font-size:16px;width:161px;height:45px;float:left;color:#fff;padding:0;margin:10px 0 3px 0;cursor:pointer;background:#2f3542;border:none;border-radius:2px;transition:background 0.4s linear} #ContactForm1_contact-form-submit:hover{background:#ff2424} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}form {color:#888} @media only screen and (max-width:768px){#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:100%}} </style><br />
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br />
<script type="text/javascript">//<![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4347478359983012345';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\4347478359983012345','//domain.blogspot.com/','4347478359983012345'); _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': '4347478359983012345', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>
5. Ganti Id blog 4347478359983012345 dengan id blog anda, dan ganti alamat blog domain.blogspot.com dengan alamat domain blog anda.
6. Setelah itu klik Terbitkan (publikasikan)

Silkan cek halaman kontak yang anda buat tadi, apakah sudah berfungsi atau belum? Bila belum berfungsi dengan baik tambahkan wiget formulir kontak di tata letak pada bagian sidebar atau footer blog.

Saya juga membuatkan video-nya untuk mencontoh cara membuat Contact Us di halaman statis blog, silakan di tonton.


Bila anda ada kendala? jangan malu untuk bertanya ke saya di kolom komentar. Demikian artikel kali ini tentang cara membuat halaman kontak di blog. Terimakasih

You Might Also Like:

Comment Policy: Tinggalkan jejak tuliskan anda di komentar yang sesuai dengan topik postingan halaman ini. Komentar yang terdapat link tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar