Cara Membuat Laman Kontak pada Blogger

Tidak seperti menambahkan gadget/widget contact form, laman kontak blogger tidak bisa dibuat secara langsung. Dan tidak seperti plugin pada WordPress, butuh trik khusus untuk bisa membuat laman kontak pada Blogger.

Laman kontak adalah sarana agar pengunjung dapat dengan mudah berhubungan dan berinteraksi langsung dengan pemilik blog. Selain itu, laman kontak juga menyediakan privasi tersendiri bagi blogger karena kamu tidak perlu memberikan alamat email kamu secara langsung.

Untuk membuat form kontak, kamu bisa menggunakan widget/gadget khusus yang dibuat oleh Blogger. Namun layaknya widget, form tersebut hanya bisa diletakan di sidebar atau footer saja. Padahal banyak blogger yang menginginkan laman sendiri untuk form kontak.

Memiliki laman kontak yang bagus tentu akan sangat menyenangkan, apalagi kalau melihat tampilan form bawaan Blogger yang sangat standar.

Di internet banyak bertebaran tutorial cara membuat laman kontak kamu sendiri, tapi menurut saya ini adalah cara paling mudah, apalagi untuk kamu yang awam terhadap koding.

Untuk membuatnya, ikuti langkah-langkah berikut:

Buka dashboard blog kamu dan lihat pada address bar browser yang kamu gunakan. Kamu akan melihat tulisan blogID yang diikuti oleh beberapa deret angka acak. Catat nomor tersebut dan simpan karena kita akan memerlukannya untuk membuat laman kontak.

lihat-blog-id-pada-url-bar-browser
Lihat ID Blogger (blogID) pada address bar browser yang kamu gunakan

Sekarang masuk ke menu LAMAN » LAMAN BARU. Isi nama laman sebagai Kontak atau Hubungi Kami sesuai selera kamu. Pilih juga tab HTML pada text editor karena kita akan memasukan kode untuk membuat laman kontak.

Pada setelan laman, kamu bisa mencentang opsi Jangan bolehkan pada pilihan Komentar pembaca agar laman yang kamu buat tidak dikomentari orang lain.

buat-laman-kontak-baru-pada-blogger
Cara buat laman kontak pada Blogger (blogspot).

Setelah selesai, kopi kode di bawah ini ke dalam laman baru yang kamu buat.

<script>
var blogId = 'nomor-ID-blog';//gunakan nomor ID blog kamu
//Kamu juga bisa mengedit pesan di bawah ini, jangan lupa tanda kutipnya
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan sudah terkirim.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat terkirim, coba beberapa saat lagi.';
var contactFormEmptyMessageMsg ='Harap isi kotak pesan.';
var contactFormInvalidEmailMsg = 'Harap isi alamat email yang valid.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>

<div class="contact-form">
<form name="contact-form">
<div class="contactf-name">
Nama : <br/>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Nama..."/></div>

<div class="contactf-email">
Email: <em>(harap diisi)</em><br/>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="Email..."/></div>
  
<div style="clear:both"></div>

<div class="contactf-message">
Pesan: <em>(harap diisi)</em><br/>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="7" style="height: 149px; margin: 0px;" placeholder="Pesan..."></textarea></div>

<br />
    
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />

<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

KETERANGAN:

  • Pada baris kedua, masukan nomor ID blog (blogID) yang sudah kamu catat sebelumnya.
  • Pada baris ke-4 s.d ke-8, ada pengaturan pesan-pesan yang akan muncul pada laman kontak yang kamu buat. Kamu bisa mengubahnya sesuai keinginan kamu.

Setelah selesai, maka tampilan laman kontak kamu akan sama seperti demo di bawah ini:

Kalau kamu lihat, tampilan laman kontak yang kamu buat mirip dengan gadget kontak pada sidebar. Untuk mempercantik tampilannya, kita bisa menggunakan kode CSS. Masukan kode berikut sebelum kode yang kamu masukan tadi.

<style type="text/css">
.contact-form {
  width: 600px;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  padding: 0;
  color: #000;
}
.contactf-name {
  float: left;
  width: 45%;
}
.contactf-email {
  float: right;
  width: 45%;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
  width: 100%;
  max-width: 100%;
  padding: 20px 15px;
  margin: 20px 0 30px 0;
}
.contact-form-button, .contact-form-button-submit {
  width: 20%;
  max-width: 20%;
  height: 40px;
  color: #fff;
  background: #097b84;
  font-size: 0.875em;
  border-radius: 5px;
}
.contact-form-button-submit {
  -webkit-transition: background-color 100ms ease-out 100ms;
  -moz-transition: background-color 100ms ease-out 100ms;
  -o-transition: background-color 100ms ease-out 100ms;
  transition: background-color 100ms ease-out 100ms;
}
.contact-form-button-submit:hover {
  background: #076269;
}
</style>

Ini adalah tampilan baru laman kontak yang kita buat dengan sedikit CSS, sedikit lebih baik bukan?

Contoh laman kontak yang sudah dipercantik tampilannya dengan CSS.

Penutup

Selesai sudah tutorial kali ini, mudah-mudahan tulisan ini bisa mambantu kamu membuat laman kontak Blogger.

Satu hal yang perlu kamu perhatikan, secara default pesan yang dikirim lewat laman ini akan masuk ke dalam inbox tempat kamu membuat akun BloggerKamu bisa mengubah alamat email ini lewat settingan admin melalui dasbor Blogger.

Apakah kamu berhasil membuat laman kontak pada Blogger? Tulis pertanyaan dan saran pada kolom komentar di bawah ini yah!
Pos Terkait:

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.