√ Cara Membuat Halaman Kontak Kami Seperti di Fletro Pro

Cara Membuat Halaman Kontak Kami Seperti di Fletro Pro

Coretancode.com - Pada kesempatan kali ini admin berbagi sedikit seputar tutorial dunia blogging yang dimana selalu berguna jika anda ingin membangun sebuah blog atau website pada platform apapun.

Desain halaman kontak ini saya dapatkan dari cara mengambil langsung dari templatenya yaitu Fletro Pro buatan mas Muhammad Maki. Jadi tidak heran jika tampilan halaman kontak berikut ini akan sama persis dengan yang ada di template Fletro Pro.

Halaman seperti ini harus wajib ada pada navigasi di setiap blog atau sebuah website kenapa? Karena dengan adanya halaman "Contact Us" pengunjung dapat menghubungi anda secara personal dengan mudah tanpa harus mencari-cari informasi data si pemilik website itu sendiri.

Daftar Isi

Kegunaan
Cara Pemasangan

Memasang Widget CSS Kontak
Menerapkan di Halaman Statis

Penutup

Menurut kalian, apakah penting adanya halaman ini pada sebuah website? Jika iya, tentu kalian semua sudah memasangnya. Namun jika design halaman kontak yang anda miliki kurang menarik, anda bisa ikuti tutorial yang akan saya berikan kali ini.

Sebelum melanjutkan ke tutorial ada baiknya kalian mengetahui kegunaan utama halaman kontak itu sendiri yang akan admin jelaskan dibawah ini

Kegunaan

Halaman ini biasanya digunakan agar pengunjung dapat menghubungi admin secara personal perihal seperti berikut ini,

Menjalin kerjasama
Melaporkan bug yang terdapat pada website
Memberikan kritik dan saran
Dan lain-lain.

Kita sebagai pemilik website tentu tidak akan bisa menilai dan menyadari kekurangan dari blog yang kita kelola dengan mudah, oleh karena itu halaman ini banyak digunakan supaya mempermudah kerja pemilik blog untuk membangun situsnya.

Tutorial Pemasangan

Membuat halaman kontak cukuplah mudah, kalian hanya perlu menambahkan kode CSS di template dan HTML nya di halaman baru. Ingin tau seperti apa lebih jelasnya? simak langkah-langkah pemasangannya berikut ini.

Memasang CSS Widget Kontak

Pastikan telah login ke Blogger.com
Pada dashboard, silahkan pilih menu Template > kemudian pilih Edit HTML
Lalu cari kode ]]></b:skin>
Untuk mempermudah pencarian, gunakan tombol pintasan CTRL+F di keyboard.

Salin dan letakkan kode CSS berikut ini tepat diatas kode (langkah no.3)

/* Widget Contact by Coretancode.com */
.ContactForm{font-family:$(heading.font);font-size:15px;max-width:768px}
.ContactForm input[type=text], .ContactForm textarea{display:block;padding:14px 20px;width:100%;outline:0;border:0;border-radius:8px;font-size:14px;background-color:rgba(255,255,255,.7);box-shadow:0 4px 12px 0 rgba(9,32,76,.045)}
.ContactForm [type=button]{display:inline-flex;flex-wrap:wrap;align-items:center;margin:15px 0 0;padding:10px 40px;border:0;outline:0;border-radius:20px;font-size:.8rem;line-height:1.3rem;background-color:$(link.bg.colors);color:#fff}
.ContactForm label{display:inline-block;margin-bottom:8px}
.ContactForm label span{color:#989b9f}
.ContactForm .input-area{margin-bottom:15px}
.ContactForm .notif-area p{margin:0;display:flex;align-items:center;font-size:14px}
.ContactForm .notif-area p img{margin-left:15px}

Save Template.

Menerapkan di Halaman Statis

Pada dashboard, silahkan pilih menu Halaman > lalu pilih Halaman Baru
Ubah metode penulisan ke HTML bukan ~~Compose~~

Kemudian salin dan letakkan kode berikut ini pada text area yang sudah tersedia.

<div class='ContactForm'>
  <form name='contact-form'>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-name'>Nama Anda</label><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email'>Email<span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email-message'>Pesan<span>*</span></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea></div>
    <div class='input-area'>
      <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Kirim' /></div>
    <div class='notif-area'>
      <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'></script><script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1234567890000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1234567890000000000','//www.namablog.com/','1234567890000000000');
_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': '1234567890000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>

Keterangan:
Ubah tulisan yang ditandai dengan ID Blog anda masing-masing.

Publikasikan.

Note:
Anda bebas untuk redesign tampilan Halaman Kontak semenarik mungkin.

Demo Halaman Kontak

Penutup

Jika ada pertanyaan seputar tutorial diatas, kalian bisa tanyakan melalui kolom komentar yang sudah tersedia dibawah postingan ini, dengan senang hati admin akan membantu permasalahan yang terjadi.

Jangan lupa bagikan halaman artikel ini jika dirasa bermanfaat. Mungkin sekian dulu artikel dari Cara Membuat Halaman Kontak Kami Seperti di Fletro Pro, semoga selalu bermanfaat dan
Terima kasih

Ridwan Faris

Cara Membuat Halaman Kontak Kami Seperti di Fletro Pro