Panduan Cara Membuat Halaman Kontak di Blogger

Membuat halaman kontak di blogger sudah menjadi kewajiban sebuah blog. Rasanya blog tanpa halaman kontak menjadi hal yang aneh.

Sangat banyak kerugian jika kamu tidak memasang halaman contact us di blog kamu misalnya..

kamu akan kehilangan pelanggan karena tidak dapat menghubungi mu, atau pengunjung ingin melakukan paid konten namun di blogmu tidak ada halaman kontak,,, tentu sangat disayangkan bukan

Jadi tunggu apalagi mari kita ketahapan cara membuat halaman kontak di blogger.com
 

Table Of Contents

1. Cara Membuat Halaman Kontak
   1. Tampilan Halaman Kontak
   2. Cara Kerja Halaman Kontak
   3. Keuntungan Membuat Halaman Kontak

1 Cara Membuat Halaman Kontak

Berikut ini adalah tahapan cara membuat halaman kontak html di blog.  Pada panduan ini saya mempunyai dua kode yang wajib kalian pasang.

1. Buka blogger.com dan masuk kehalaman dashboard kamu
2. Masuk ke Tab halaman dan Buat halaman baru
3. Isi Judul halaman kamu sesuai selera atau isikan saja " Halaman Kontak "



4. Masukkan kode dibawah ini kedalam halaman yang kamu buat tadi.

<div class='ContactForm' id='ContactForm1'>
  <form name='cForm'>
    <div class='cArea'>
      <label>
        <input class='cInpt cName' id='ContactForm1_contact-form-name' name='name' type='text'/>
        <span class='n'>Name</span>
      </label>
    </div>
    <div class='cArea'>
      <label>
        <input class='cInpt cMail' id='ContactForm1_contact-form-email' name='email' type='email'/>
        <span class='n req'>Email</span>
      </label>
      <span class='h'>Valid email required</span>
    </div>
    <div class='cArea'>
      <label>
        <textarea class='cInpt cMsg' id='ContactForm1_contact-form-email-message' name='message' rows='3'></textarea>
        <span class='n req'>Message</span>
      </label>
    </div>
    <div class='cArea'>
      <input class='cBtn' id='ContactForm1_contact-form-submit' type='button' value='Submit' />
    </div>
    <div class='cArea nArea'>
      <p class='cNtf' id='ContactForm1_contact-form-error-message'></p>
      <p class='cNtf' id='ContactForm1_contact-form-success-message'></p>
    </div>
  </form>
</div>

<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>/*<![CDATA[*/ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '000000000000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\000000000000000000','//khairpedia.blogspot.com/','000000000000000000');
_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': '000000000000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); var inputs = document.querySelectorAll('.widget input[type=text], .widget input[type=email], .widget textarea'); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.addEventListener('input', function() {var bg = this.value ? 'fl' : 'nfl'; this.setAttribute('data-text',bg);}); } /*]]>*/</script>

5. Lalu ganti semua kode " 000000000000000000 " dengan ID blog kamu seperti gambar dibawah ini



6. Setelah itu cari kode </b:skin> dan tempelkan kode css dibawah ini diatas kode </b:skin>

/* Widget ContactForm */
.ContactForm {
	max-width: 500px;
	font-family: var(--fontB);
	font-size: 14px
}

.cArea input[type=text],
.cArea input[type=email],
.cArea textarea {
	padding: 25px 16px 8px 16px
}

.cArea:not(:last-child) {
	margin-bottom: 25px
}

.cArea label {
	display: block;
	position: relative
}

.cArea label .n {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	color: rgba(8, 16, 43, .4);
	line-height: 1.6em;
	padding: 15px 16px 0;
	border-radius: 4px 4px 0 0;
	transition: var(--trans-1)
}

.cArea label .n.req::after {
	content: '
	*'
	;
	font-size: 85%
}

.cArea textarea {
	height: 100px
}

.cArea textarea:focus,
.cArea textarea[data-text=fl] {
	height: 200px
}

.cArea input:focus~.n,
.cArea textarea:focus~.n,
.cArea input[data-text=fl]~.n,
.cArea textarea[data-text=fl]~.n {
	padding-top: 5px;
	color: rgba(8, 16, 43, .7);
	font-size: 90%;
	background: #ececec
}

.cArea .h {
	display: block;
	font-size: 90%;
	padding: 5px 16px 0;
	opacity: .7;
	line-height: normal
}

.nArea .contact-form-error-message-with-border {
	color: #d32f2f
}

.nArea .contact-form-success-message-with-border {
	color: #2e7b32
}

7. Jika semua kode sudah dipasang dengan benar silahkan kamu publikasikan halaman tersebut.

2.1 Cara Kerjanya

Cara kerja dari halaman kontak ini tergolong sangat mudah karena langsung terkoneksi dengan alamat gmail si pemilik blog ( email yang kalian pakai dalam membuat blog ).

Misalnya, disini saya sudah mengisikan format pada halaman kontak. Setelah saya tekan tombol submit maka pesan tersebut akan terkirim ke email si pemilik blog.

Seperti pada gambar diatas kalian bisa melihat tampilan pesan yang dikirim melalui halaman kontak blogger yang tadi kita buat.

2.2 Keuntungan Membuat Halaman Kontak

Keuntungan utama dalam membuat halaman kontak adalah untuk mempermudah pengunjung blog melakukan kontak secara personal melalui halaman kontak yang sudah disediakan.

Hal tersebut akan lebih mudah dan lebih privasi dibandingkan harus melakukan kontak melalui kolom komentar yang sifatnya publik.

2.3 Tampilan Halaman Kontak

Tampilannya bisa kamu lihat seperti diatas, sederhana tapi tetap berfungsi dengan baik. Jika kamu penasaran ingin mencoba dan melihat halaman kontak secara langsung kamu bisa klik disini