Cara Mudah Membuat Halaman Contact Us ala MedianUI di Blogger

Posting Komentar
Fernn.id - Pada kesempatan kali ini admin ingin sedikit berbagi tutorial seputar blogging yaitu Cara Termudah Membuat Halaman Contact us di Blogger, tidak sedikit blogger yang belum mengetahui pentingnya halaman ini didalam sebuah situs atau website.

Sebenarnya artikel seperti ini mudah sekali di temukan di pencarian google dengan berbagai macam style dan metode membuatnya. Namun kali ini tentunya berbeda dari kebanyakan style Halaman Kontak pada umumnya yang bertebaran di google, yang admin bagikan kali ini memiliki tampilan yang simpel dan responsive.

Perlu diketahui bahwa scriptnya kami ambil dari theme Median UI dengan cara Inspect Element sehingga bisa dipastikan tampilannya akan sama persis dengan yang aslinya, untuk lebih jelasnya silahkan bisa cek halaman Contact Us pada blog ini.

Pembahasan

Pasti kalian sudah pernah kan melihat halaman kontak sebelumnya? hampir semua situs pasti memiliki laman seperti ini. Kegunaannya sendiri untuk mempermudah pengunjung dalam menghubungi pemilik blog / situs.

Semua situs pastinya membutuhkan halaman ini tidak terkecuali niche apapun, apalagi jika situs kalian adalah online shop, sangat disarankan untuk membuat laman ini agar pengunjung lebih mudah menghubungi kalian.

Pada umumnya pengunjung akan menghubungi admin jika ada yang harus disampaikan secara tertutup, misal bertanya seputar produk, melaporkan bug di situs, dan ingin menjalin kerjasama antara pemilik blog.

Cara Membuat Halaman Kontak

Sebenarnya jika kalian paham dengan coding, pastinya untuk membuat halaman seperti ini tidaklah sulit untuk dilakukan karena hanya membutuhkan kode CSS dan HTML saja.

Penasaran dengan desain yang akan dihasilkan? kalian bisa melihatnya dengan klik tombol dibawah ini.
Hubungi kami
Suka dengan desainnya? yuk simak dan langsung ikuti langkah-langkah pembuatannya berikut ini.

Menambahkan Kode CSS

  1. Pastikan sudah login ke Blogger.com
  2. Pada halaman dashboard, silahkan pilih menu Template > Edit HTML
  3. Lalu cari kode ]]></b:skin>
  4. Salin kode CSS dibawah ini dan letakkan tepat sebelum kode (langkah no.3)
    /* Widget Contact Form */
    .ContactForm{font-size:14px;margin-top:30px;max-width:480px}
    .ContactForm form > *:not(:last-child){margin-bottom:15px}
    .ContactForm label{display:inline-block;margin-bottom:8px}
    .ContactForm div p{display:flex;align-items:center;margin-bottom:0}
  5. Save Template.

Menambahkan Kode HTML

  1. Pada halaman dashboard, silahkan pilih menu Halaman > dan buat Halaman Baru
  2. Ubah metode penulisan ke HTML bukan Compose
  3. Salin kode HTML berikut ini, dan letakkan pada teks area yang tersedia.
    <div class="ContactForm" id="ContactForm1">
    <form name="contact-form">
    <div class="input-area">
    <label for="ContactForm1_contact-form-name">Nama Lengkap</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 *</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 *</label><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message"></textarea></div>
    <div class="box blue">
    Jika halaman ini tidak berkerja dengan semestinya, hubungi kami melalui email <a href="mailto:admin@fernn.id">admin@fernn.id</a></div>
    <div class="input-area">
    <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan" /></div>
    <div class="notif-area">
    <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>
    <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'] = '3166517810242764205';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3166517810242764205','//fernn.id/','3166517810242764205');
    _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Mengirim...', 'contactFormMessageSentMsg': 'Pesan anda telah terkirim.', 'contactFormMessageNotSentMsg': 'Pesan anda tidak dapat terkirim, silahkan coba lagi.', 'contactFormInvalidEmailMsg': 'Masukkan alamat email yang benar.', 'contactFormEmptyMessageMsg': 'Kolom pesan tidak boleh kosong.', 'title': 'Contact Form', 'blogId': '3166517810242764205', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
    //]]></script>
  4. Publikasikan.

Penutup

Sampai disini kalian sudah berhasil membuat halaman kontak di blogger, jika belum mengerti silahkan untuk bertanya melalui kolom komentar yang ada dibawah artikel ini. Dengan senang hati akan di jawab jika tidak ada kesibukan diluar kegiatan blogging.

Mungkin sekian dulu artikel dari Cara Mudah Membuat Halaman Contact Us ala Median UI di Blogger, semoga berkah dan selalu bermanfaat.
Terimakasih
Fernand
Fernand
Hanya seorang blogger yang hobinya coding

Related Posts

Posting Komentar

Dapatkan artikel terbaru!