Cara Membuat Halaman Form Kontak Di Blogger Beserta Cara pemasangan Pada Menu Navigasi

Cara Membuat Halaman Form Kontak Di Blogger Beserta Cara pemasangan Pada Menu Navigasi


omiska.com - Seperti yang diketahui, halaman kontak berperan sangat penting dalam sebuah blog. Pasalnya ketika orang mengalami kesulitan untuk memahami isi blog dan ingin menanyakan kepada pemilik blog maka halaman kontak ini sangat membantu mereka untuk dapat terhubung dengan pemilik blog. Sisi lainnya halaman kontak sangat berperan penting untuk kelengkapan navigasi blog yang akan memungkinkan diterima oleh Google Adsense, pasalnya dengan adanya menu navigasi blog seperti halaman Kontak, About atau tentang, Disclaimer Privasi Policy maka pihak Google Adsense akan menilai blog yang kamu miliki terkesan dapat dipercayai dan terkesan profesional, nah itulah peran kontak dalam sebuah blog sangat penting bukan?

Memilki halaman kontak yang menarik memang suatu hal yang menjadi nilai tambah pada sebuah blog, sebenarnya form kontak ini dapat di buat pada widget/gadget, jadi kamu tinggal cari kode untuk membuat halaman kontak melalui widget/gadget. Namun pada artikel kali ini saya akan memberikan tutorial bagaimana caranya membuat halaman form kontak untuk blog adan disini saya juga akan memberika tutorial bagaimana cara memasang halaman Form Kontak pada menu navigasi.


1. Buka dashboard blogger kamu dan klik Halaman dan klik Halaman baru.


2. Isi judul halaman dengan nama Kontak atau Contact, klik HTML.


Lalu copy kode dibawah ini dan paste pada kolom yang disediakan (lihat gambar diatas)

<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>
<script>
var blogId = 'nomor-ID-blog';//Isi nomor ID blog kamu
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 : 

  • Tulisan warna merah dapat diisi dengan nomor blogID kamu, jika kamu tidak mengetahui blogID mu, kamu dapat melihatnya pada link dashboard blogger. Contohnya seperti dibawah ini :


  • Tulisan warna biru kamu dapat mengcustomnya sesuai dengan keinginan.


Nah, nantinya tampilan form kontak blogger kamu seperti dibawah ini :


Mudah sekali bukan? nah dengan begitu kamu sudah memiliki halaman Form Kontak yang dapat kamu pasang pada template blog.

Baca juga : Ciri-Ciri Template Blog Yang Diterima Oleh Google Adsense Yang Jarang Diperhatikan Oleh Calon Publisher

Cara memasang halaman Form Kontak pada template blogger

Pertama, kamu harus mendatkan link halaman Form Kontak dengan cara membuka dashboard blogger dan klik Halaman dan tulisan pada kontak klik Lihat 


Maka kamu akan diarahkan ke halaman Form Kontak, lalu copy link form kontak.




Kedua, kamu harus memastikan nama navigasi "kontak" yang tersedia pada tampilan blog, bisa saja namanya Contact ataupun Kontak. Misalnya seperti dibawah ini :


Lalu kembali ke dashboard blogger kamu dan klik Tema dan klik Edit HTML

Lalu tekan CTRL + F , jika sudah muncul kotak pencarian, tulis Contact sesuai dengan tulisan pada tampilan blog kamu. Maka akan muncul tampilan seperti ini : 


Keterangan : 

Dalam kotak merah merupakan link halaman Form Kontak blog yang kamu buat tadi.

Jik a sudah selesai lalu klik Simpan Tema.

Nah, dengan begitu blog kamu blog kamu sudah dilengkapi dengan halaman Form Kontak yang dipasang di navigasi pada tampilan blog. Jika kamu kebingungan kamu dapat menghubungi saya lewat pesan Whatsapp saya yaa (Lihat contact saya).






Anda mungkin menyukai postingan ini