BLOG webstory

Beranda
Blogger

Cara membuat Forum contact email pada blogger

www.webstory.eu.org
Tutorial cara membuat contact forum email pada blogger

Cara Membuat Form Email di Blogger Menurut saya pribadi, adanya form chat email di blogger itu sangat berguna sekali.

Mengapa? Karena form chat email akan sangat membantu pembaca untuk bertanya sesuatu atau memberikan saran kepada kita.

Ya, walaupun di blogger sudah ada fitur komentar untuk pembaca, dirasa menurut saya kurang cukup. Karena saya yakin, ada beberapa pembaca yang ingin bertanya sesuatu kepada kita secara pribadi.

Dengan menerima dan menjawab pertanyaan dari pembaca, kita akan mendapatkan nilai plus dari mereka berupa kepercayaan.

Mereka akan kembali dan terus kembali berkunjung ke blog kita. Bukankah itu sangat menguntungkan? Iya, tentu saja itu sangat menguntungkan.!

Saya sama sekali tidak memaksa kalian untuk memasang form chat email di blog. Jika kalian tidak mau, ya terserah itu hak kalian. Akan tetapi, jika diantara kalian ada yang tertarik untuk memasang from chat email di blog, kalian boleh mengikuti tutorial nya di bawah ini.

Saya ingatkan kepada kalian, kalau membaca tutorial itu harus baca dengan teliti agar tidak terjadi kesalahan. Bukan hanya untuk membaca tutorial saja tapi berlaku juga untuk membaca artikel lain.

Cara Membuat Form Email di Blogger

Masuk ke dashboard blogger pergi ke menu tema / theme. Tekan tombol sesuaikan, pilih edit HTML. Tambahkan kode berikut tepat di atasnya kode </head>

<b:if cond='data:view.isPage'>
<style>
  /* Contact Form */
  #comments,.post_meta,#blog-pager{display:none}form{color:#666} #kontak{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}#ContactForm1_contact-form-submit{float:left;background:#008c5f;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}#ContactForm1_contact-form-submit:hover{background:#1d2129;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#1d2129;border:none;box-shadow:none;color:#fff;padding:5px 0}.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}img.contact-form-cross{line-height:40px;margin-left:5px}.post-body input{width:initial}
</style>
</b:if>

Lalu simpan. Sekarang salin kode berikut ke notepad.

<form id="kontak" name="contact-form">
  <input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
  <input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email" type="text" value="" />
  <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Isi pesan" rows="5"></textarea>
  <input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan"/>
  <div style="max-width: 222px; text-align: center; width: 100%;">
    <div id="ContactForm1_contact-form-error-message"></div>
    <div id="ContactForm1_contact-form-success-message"></div>
  </div>
</form>

<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'] = '6600000000000000066';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6600000000000000066','//www.namadomain.com/','6600000000000000066');
_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': '6600000000000000066', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

Silahkan kalian ganti beberapa Id yang telah di tandai dengan Id blog milik kalian.

kurang lebih contoh nya seperti ini 6600000000000000066 ID blog kalian.

www.namadomain.com merupakan alamat / url blog kalian.

Untuk mendapatkan id blog, kalian hanya perlu klik url pada dashboard akun blogger kalian, kemudian salin url tersebut.

Setelah mengganti beberapa yang telah saya tandai, sekarang kalian tinggal memasang form chat email tersebut.

Silahkan kalian pergi ke menu halaman, lalu tambah halaman baru. Kemudian silahkan pilih beralih ke mode HTML lalu salin semua kode yang telah di edit di notepad dan paste kan ke halaman baru tadi. Sekarang klik publikasikan.

From chat email sudah berhasil di buat dan dipasang di blogger kalian. Untuk mengeceknya akses url halaman yang telah dipublikasikan tadi.