Cara Simpel Membuat Contact Us Untuk Blogger

cara membuat contact us

Membuat Contact Us- Di dunia perbloggeran memang sangat berperan penting apa itu namanya Contact Us atau Kontak.

Fitur Kontak ini sering di gunakan seorang blogger dengan tujuan untuk berintraksi langsung antar pengunjung dengan penulis/admin blog.

Selain utuk berintraksi antara visitor dengan admin contact us juga sangat berperan penting di mata Google, karena barang siapa tidak memberikan layanan/fitur Contact us ini bisa jadi saat mendaftarkan blognya ke Google Adsense bisa di tolak.

Baca juga Trik Daftar Adsense Agar Full Approve

Oleh karena itu sangat di sarankan untuk membuat contak us di blogger/blogspot.

Namun tidak sedikit para blogger pemula merasa bingung untuk menyertakan kolom kontak/hubungi saya di halaman statis blogger.

Tp bagi kawan yang ingin membuat Contact us di blogger kini tak perlu bingung lagi karena masmient akan emberikan tutorial sederhana membuat contact us.

Untuk kalian  yang ingin membuat Contact us silahkan simak dan praktekan dengan setulus hati, namun sebelumnya silahkan lihat contoh contact us yang akan saya bagikan di bawah ini.

Contoh Membuat Contact Us
Contoh Contact Us Masmient


Langkah Membuat Kolom Layanan Contact Us/Kontak

1. Masuk ke blogger.com

2. Pilih menu Halaman

3. Buat Halaman Baru
Cara membuat contact us
Langkah Membuat halaman contact us

4.Ber Judul Halaman Contact Us

4. Pilih Mode HTML, lalu

Cara membuat contact us


5. Copy dan Paste kode di bawah ini tepat di kolom HTML
<div dir="ltr" style="text-align: left;" trbidi="on">
<form name="contact-form">
Nama<br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
<br />
Email Address <span class="wajib">*</span><br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
<br />
Pesan <span class="wajib">*</span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<div class="formb">
<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" 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'] = '3265514337768207251';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3265514337768207251','//masmient.com/','3265514337768207251');
_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': '3265514337768207251', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
<style type="text/css">
#ContactForm1{display:none}a.showcontent{display:none}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{
width:300px;height:auto;margin:5px auto;padding:10px;background:#fff;color:#666;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px 0;padding:10px;background:#fff;color:#666;font-family:'Droid Sans',sans-serif;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none; border-color: rgba(81,203,238,1);box-shadow: 0 0 5px rgba(81,203,238,0.7)!important;color:#444;background:#fff;}
#ContactForm1_contact-form-submit {font-family:Open Sans Condensed, sans-serif;float:left;border-radius:3px;
background:#07ACEC;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;
padding:5px 10px!important;font-weight:700;font-size:15px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.4s ease-out;}
#ContactForm1_contact-form-submit:hover {background:#444;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:450px;margin-top:35px;}.formb{max-width:22px;text-align:center;width:100%}.wajib{color:red;font-weight:bold}
</style></div>

6. Lalu Publish

7. Selesai

Ket:
Ganti yang berwarna biru dengan URL Blog sampean
Ganti yang berwarna Merah dengan ID Blog sampean
Cara melihat ID blog kita ada di bawah

Cara Melihat ID Blog

1. Coba buat artikel baru, dan

2, Lihat di bagian Addres bar atas, contoh gambar di bawah ini
membuat contact us
Contoh Melihat Id blog

3. Lihat yang di tandai panah merah, setelah ID= itu adalah Id blog sampean.

4. Selesai

5. Terimakasih

Nah dengan demikian sampean sudah bisa membuat contact us sederhana di blog dengan mudah, dan semoga berhasil karena cranya tidak rumit.

TAMBAHAN
Untuk pemasangan halaman contact us di template blog sangat mudah, hanya copas url halaman contact us yang sudah di buat tadi di menu mana yang akan di beri contact us(caranya seperti membuat menu di header,

Baca Juga: Cara Membuat Menu Navigasi Header sederhana di Blog

Cukup sekian semoga artikel ini dapat membantu sampean yang membutuhkan, jika ada pertanyaan silahkan tinggalkan komentar di  bawah ini.

Komentar

Postingan populer dari blog ini

Cara Menulis Artikel di Blogspot dengan Benar dan Baik

Cara Pasang Tols Keywords Everywhere Untuk Riset Kata Kunci

Tips Blogger Untuk Pemula Dan Apa Saja Persiapannya