Cara Buat Halaman Kontak Blogger

BisablogDEMO.blogspot.com - Belom afdol rasanya kalo bikin blog tanpa halaman kontak. Agar lebih mudah dihubungi, ikuti cara buat halaman kontak di Blogger berikut ini!

Meski sekarang sudah ada yang namanya akun sosial media, masih banyak yang  memakai email sebagai alat komunikasi andalan.

Sebagai contoh, di kantor saya komunikasi internal memang lebih banyak menggunakan WA (WhatsApp). Tapi kalo urusannya sudah semi-resmi ke atas biasanya tetap pakai email.

Nah, mirip-mirip sama blogger. Meski kita bisa berkomunikasi via PM/DM di sosmed, urusan yang semi-formal ke atas biasanya lebih enak dikirim via halaman kontak. Content placement misalnya!

Makanya penting banget punya halaman kontak sendiri agar kita lebih mudah dihubungi.

Blog saya baru, memang butuh halaman kontak juga?

Ya kan kita tidak tahu kapan rejeki akan datang. Lebih baik punya kan daripada kehilangan kesempatan gara-gara tidak ada kontak yang bisa dihubungi? Lagpula bikinnya mudah kok!

Cara buat halaman kontak Blogger (image: https://unsplash.com/photos/Ir0VrE74xKg)

Cara Buat Halaman Kontak di Blogger

Di Wordpress, halaman kontak lebih mudah dibuat. Tinggal pasang plugin, pakai template untuk halaman kontak, terus publish deh.

Untuk Blogger sendiri sebenarnya ada contact form-nya sendiri. Cuma bentuknya gadget/widget yang hanya bisa dipasang di sidebar atau footer.

Jadi kalau mau buat halaman khusus yang bisa ada contact form-nya, ada sedikit tweak yang harus kita lakukan.

PERTAMA, untuk membuat halaman kontak di Blogger kita harus memasang widget contact form dulu. Ini penting untuk 'memanggil' fungsi contact form supaya bisa kita tampilkan di halaman Blogger.

Buat yang belum tau caranya, masuk ke dasbor admin lalu pilih menu TATA LETAK / LAYOUT.

Pilih sidebar atau footer lalu tambah widget baru, pilih CONTACT FORM.

Nah, ini penting nih!

Berhubung kita ingin membuat halaman kontak, pasti kita tidak ingin dong widget Contact Form tersebut muncul di sidebar/footer kita.

Untuk 'menyembunyikan' widget form kontak ini, kita bisa pake kode CSS berikut ini.

#ContactForm1{display:none !important;}

Sudah tahu belum harus pasang di mana kode CSS-nya?

Masuk ke dabor admin lalu pilih menu THEME ► CUSTOMIZE ► ADVANCED ► ADD CSS.

KEDUA, Catat ID Blogger.

Caranya? masuk ke dasbor admin Blogger lalu lihat address bar browser. ID Blogger adalah deretan angka setelah blogID.

Misal, kalo di address bar browser ada tulisan seperti ini,

https://www.blogger.com/blogger.g?blogID=4998821600352037016#allposts

Berarti ID Blogger-nya, 4998821600352037016

KETIGA, buat laman / pages baru. Beri judul 'kontak' atu 'hubungi kami'.

Jangan lupa centang opsi JANGAN BOLEHKAN di opsi KOMENTAR PEMBACA supaya halaman kontak Blogger tidak sembarang bisa dikomentari orang lain.

KEEMPAT, ubah mode text jadi HTML lalu masukin kode di bawah ini.

Yang penting diubah cuma baris kedua di variabel blogID, ganti sama ID Blogger yang tadi dicatat di langkah kedua.

Terus kalau mau ganti pesan bisa juga!

Ubah saja tulisan di kode baris ke-4 sampe ke-8.

<script>
var blogId = 'nomor-ID-blog';//gunakan nomor ID Blogger
//Edit 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>

Sudah, selesai deh! Kalo mau liat hasil jadinya, coba buka halaman kontak blog ini aja.

Sebagai informasi tambahan, pesan baru akan secara otomatis dikirim ke email admin. Jadi kita tidak perlu mengatur email penerima.

Share this post