Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Halaman Kontak di Template Median UI

Dalam posting ini sebelumnya saya telah membuat artikel bagaimana cara untuk membuat halaman kontak responsive keren dan tampilan nya sudah modern. Maka kali ini saya akan sedikit memberi tips kepada kalian bagaimana langkah demi langkah untuk membuat halaman kontak di template Median UI semua versi.

Jadi, silahkan kalian ikuti langkah-langkah mudah dibawah ini untuk membuat halaman kontak pada template Median UI khususnya, ini bisa digunakan di semua template Median UI versi berapa pun. 

Cara Membuat Halaman Kontak di Template Median UI


Persiapan Membuat Kontak di Template Median UI

Hal pertama yang harus kalian lakukan adalah dengan  mencari tahu terlebih dahulu kode ID blog kalian, caranya sangat mudah yaitu di halaman blogger silahkan kalian lihat di address bar maka Anda akan menemukan contoh tautan seperti di bawah ini. Jadi ID Blog ini adalah salah satu elemen penting agar halaman kontak blog pada template ini berjalan sebagaimana mestinya.

https://www.blogger.com/blog/themes/000000000000000000

Bagian yang saya tandai warna tersebut adalah kode id blog kalian, silakan salin karena kode ini karna kode ini akan diperlukan saat membuat halaman kontak di template Median UI.

Tutorial Membuat Halaman Kontak di Template Median UI

1. Yang pertama sekali yang harus kalian lakukan adalalah dengan membuat Halaman Baru, jangan lupa untuk membuat judul halaman serta mengisi deskripsi pencarian di halaman baru kalian.

2. Selanjutnya silahkan kalian beralih ke mode HTML lalu salin dan tempel kode di bawah ini ke halaman yang tersedia.

<!-- Median Ui v1.6 Contact Page Codes by syahrulramadhan.my.id--> 

<div class='ContactForm s-2' 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>
      <span class='h'>Empty messages not accepted</span>
    </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'] = '0000000000000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\0000000000000000000','//www.your_blog.com/','0000000000000000000');
_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': '0000000000000000000', '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>

3. Kalian dapat mengubah kode-kode dibawah ini.

  • [00000000000000000000]: id blog kalian, ada 4 kali penulisan kode di atas, silahkan kalian ganti sebanyak 4 kali.
  • [www.your_blog.com]: Alamat blog kalian (tanpa http/https).

4. Selesai! Publikasikan halaman kalian dan silakan uji apakah halaman kontak berhasil atau tidak, jika tidak silahkan coba sekali lagi.

Terimakasih telah membaca artikel bagaimana cara untuk membuat halaman kontak di template Median UI dengan tampilan yang keren. 

www.syahrulramadhan.my.id

000000000000000

Syahrul Ramadhan
Syahrul Ramadhan Everyone thinks of changing the world, but no one thinks of changing himself.

Posting Komentar untuk "Cara Membuat Halaman Kontak di Template Median UI"