Membuat Halaman Contact Dengan Tampilan Material Design

Membuat Halaman Contact Dengan Tampilan Material Design

Halaman contact merupakan sebuah unsur yang cukup penting dalam sebuah blog, halaman contact sendiri berfungsi sebagai tempat dimana pengunjung atau client yang hendak menghubungi kita baik itu berupa kerja sama, laporan, dan lain sebagainya.

Nah, pada kesempatan ini anda akan belajar bagaimana membuat halaman contact dengan tampilan material design.

Seperti yang sudah kita ketahui bahwasannya Google sendiri pun sudah banyak mengembangkan Material design, dikarenakan banyak web designer sudah mulai mempelajari desain bawaan Google terbaru ini,selain itu material design ini memiliki sebuah tampilan yang elegan.

FYI panduan membuat halaman contact ini tidak menggunakan Javascript, jadi ini akan memaksimalkan loading halaman contact.

Membuat Halaman Contact Dengan Tampilan Material Design

  1. Login ke blogger.com menggunakan akun gmail kamu, kemudian pilih blog yang akan ditambahkan halaman contact.
  2. Selanjutnya masuk menu halaman, kamu bisa membuat halaman baru dengan judul "Contact" atau sebagainya sesuai dengan selera kamu sob.
  3. Jika sudah, sekarang kamu masuk ke opsi HTML halaman tersebut, bukan compose ya. Jadi perhatikan baik-baik text di pojok kiri atas.
  4. Selanjutnya kamu copy semua kode dibawah ini dan paste di halaman tadi.
  5. Catatan: ganti ID blog dengan ID blog milikmu.
    <style scoped="scoped">
    .blanterinput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.blanterinput input,.blanterinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.blanterinput input:focus,.blanterinput textarea:focus{outline:none}.blanterinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:14px;color:#07ACEC}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.blanterinput input:focus ~ .bar:before,.blanterinput input:focus ~ .bar:after,.blanterinput textarea:focus ~ .bar:before,.blanterinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.blanterinput input:focus ~ .highlight,.blanterinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}
    input#ContactForm1_contact-form-email-message{height:150px}
    input#ContactForm1_contact-form-submit{color:#fff!important;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
    input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
    #ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
    </style>
    <form name="contact-form">
    <div class="blanterinput">
    <input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Name</label>
    </div>
    <div class="blanterinput">
    <input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Email</label>
    </div>
    <div class="blanterinput">
    <textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Message</label>
    </div>
    <input id="ContactForm1_contact-form-submit" type="button" value="Send" />
    <div id="ContactForm1_contact-form-error-message">
    </div>
    <div id="ContactForm1_contact-form-success-message">
    </div>
    </form>
    <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '8866800899420715293';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8866800899420715293','//showdzgn.com/','8866800899420715293');
    _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '8866800899420715293', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
    //]]>
    </script>
  6. Langkah terakhir tinggal publikaskan halaman.

Banyak Keungulan dari halaman contact dengan tampilan material design ini diantaranya blog yang kita kelola akan terlihat profesional sehingga client yang akan menjalin kerja sama semakin yakin, selain itu pesan dari halaman contact akan langsung mengarah ke email blog yang sudah di tambahkan halaman contact.

Baiklah saya rasa sekian pembahasan kali ini dan semoga pembelajaran mengenai pembuatan halaman contact dapat anda petik manfaatnya.

0 Response to "Membuat Halaman Contact Dengan Tampilan Material Design"

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel