Home
Blogging

Cara Membuat Halaman Kontak Blogger Sederhana, Paling Mudah!

Cara Membuat Halaman Kontak Blogger

Cara Membuat Halaman Kontak Blogger – Halaman kontak adalah menu navigasi dasar yang wajib dibuat ketika kita mulai ngeblog.

Seperti yang sudah saya sampaikan di artikel sebelumnya, semua menu navigasi sama pentingnya untuk perkembangan sebuah blog.

Nah, mungkin bagi Bloger (menurut KBBI, yang benar Bloger, bukan Blogger) yang sudah berpengalaman, membuat halaman kontak tak perlu effort yang berlebih.

Tapi bagi Bloger pemula mungkin tak tahu cara membuat halaman kontak Blogger.

Sebenarnya jika kita melihat di bagian tata letak, pihak Blogger sendiri sudah menyediakan form contact yang fungsinya sama.

Hanya saja jika memasang form contact dalam bentuk widget, menurut saya tampilan blog terlihat ramai dan juga bisa mempengaruhi kecepatan loading.

Beda dengan halaman kontak yang bisa kita selipkan di bagian footer navigasi.

Cara Membuat Halaman Kontak Blogger Sederhana

Saya sendiri menggunakan form contact dalam bentuk navigasi (bukan widget) untuk semua blog yang saya kelola. Asalannya karena sederhana dan ringan.

Karena saya lebih suka tampilan blog yang sederhana dan hanya menggunakan widget label dan postingan populer saja.

Artikel ini dibuat karena kemarin setelah artikel Rahasia Penempatan Keyword Artikel SEO saya bagikan di grup, ada yang bertanya bagaimana cara membuat halaman kontak Blogger seperti punya Bengertikon?

Kalau Anda juga memiliki pertanyaan yang sama atau ingin membuat form contact sederhana, berikut langkah-langkahnya:

  • Setelah masuk ke Blogger, klik menu Halaman
  • Selanjutnya buat Halaman Baru
  • Isi judulnya terlebih dahulu, terserah Anda mau buat Contact Us atau Kontak
  • Ganti mode Compose menjadi HTML
  • Setelah itu, copy script kontak Blogger berikut dan pastekan ke Halaman Kontak yang sedang Anda buat

<div class="Form">
<form name="contact-form">
<p></p>
Name
<br />
<input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Message
<span style='font-weight: bolder;'>*</span>
<br />
<textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Send" />
<p></p>
<div style="max-width: 400px; text-align: center; width: 100%;">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>

<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'] = 'xxxxxxxxxxxxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dxxxxxxxxxxxxxxxxx','//bengertikon.blogspot.com/','xxxxxxxxxxxxxxxxx');
_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': 'xxxxxxxxxxxxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

 Penting!
  • Ganti URL blog bengertikon.blogspot.com dengan URL blog Anda
  • Ganti xxxxxxxxxxxxxxxxx dengan ID blog Anda sendiri, ada 4 yang harus diganti
  • ID blog bisa dilihat pada bagian URL, kalau kurang jelas, lihat gambar di bawah
  • Selanjutnya jangan buru-buru di-publish, matikan kolom komentar pada setelan entri
  • Agar hasilnya tidak berantakan, pastikan tetap di mode HTML
  • Jika semua sudah beres, terakhir klik Publikasikan
Sekarang halaman kontak blog Anda sudah jadi, untuk mengetahui apakah halaman kontak tersebut bekerja dengan baik, coba tes dengan mengisi pesan pada contact form yang Anda buat.

Jika pesan tersebut masuk ke email, artinya Anda sukses mengikuti cara membuat halaman kontak Blogger sederhana pada artikel ini. Baca juga artikel lainnya hanya di Cleardg.com!

Post a Comment