Cara Membuat Halaman Contact Us Pada Blogspot

Hallo selamat datang kembali di  sebuah blog yang membahas tentang Tutorial dan  Artikel Komputer Dan Blogspot, pada artikel sebelumnya saya sudah membahas Bagaimana Cara Setting Costum Domain Dengan Blogspot, dimana artikel tersebut dapat menjadikan alamat blogspot kamu menjadi alamat domain TLD dengan mudah. Dan pada kesempatan ini saya masih membahas tutorial seputar Blogspot yaitu Cara Membuat Halaman Contact Us Pada Blogspot, jika kamu terbilang baru mengenal blogspot kamu harus mengetahui beberapa faktor penting yang harus dilakukan untuk melengkapi blog terlebih jika kamu ingin mendaftarkan blog yang kamu kelola kepada Google Adsenses agar blog memiliki penghasilan dari google, namun sebelum melangkah tentunya kamu harus tau persyaratan dan kriteria dalam mendaftar Google Adsenses, Contact Us yang akan kita bahas kali ini juga termasuk dari bagian persyaratan untuk mendaftar pada Google Adsenses lho Sobat Mobile, untuk lebih jelasnya yuk disimak pembahasan dan cara-caranya.

Pengertian Dan Fungsi Halaman Contact Us

Halaman Contact Us Pada blogspot adalah sebuah halaman statistik yang dibuat dengan tujuan agar pengunjung dapat menghubungi atau mengirim pesan kepada admin melalui blog tersebut dengan mudah, Halaman statistik tidak ditampilkan dalam postingan atau artikel melainkan mempunyai navigasi khusus yang biasanya diletakkan dibagian atas atau bawah pada setiap template blogspot, sementara itu cara kerja Contact Us sangatlah sederhana, dengan bantuan Java Script yang di letakkan pada Halaman Statistik pada blogspot akan menjadi sebuah formulir yang dimana nantinya pengunjung dapat menulis pesan melalui halaman tersebut dan pesan tersebut akan disampaikan dalam bentuk email kepada Admin pengelola Blog.
Jika kamu penasaran seperti apa contact itu silahkan perhatikan gambar diatas itu adalah screenshot dari halaman contack us pada blog atau jika ingin tahu lebih kamu bisa melihatnya secara langsung pada bagian Contack Us pada menu navigasi diatas alau melalui Url ini . Jika dirasa sudah tau dan mengerti dari maksud dan tujuannya mari kita mulai tutorialnya.

Contact Us

Cara Membuat Halaman Contact Us Pada Blogspot

• Pertama hal yang harus kamu lakukan adalah login ke akun blogspot kamu
• Setelah login blogspot kamu pilih menu halaman
• Kemudian klik halaman baru atau buat halaman baru dan beri nama Contact Us
• Setelah masuk Editor beralihlan dari mode Compose ke mode HTML
• Copy dan paste Java Script dibawah ini ke bagian HTML

<div class="separator" style="clear: both; text-align: center;">

<a href="https://www.blogger.com/blogger.g?blogID=7542887174915884791#contact" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="sebuah blog yang membahas tentang Tutorial dan Cara Membuat Halaman Contact Us Pada Blogspot" border="0" data-original-height="600" data-original-width="800" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgHuFOrEKt9HuK-lzeWfmb5JvpahFEq4Eay8W4aw65FiDDEFrwVUsNcrBAK4WSw6ri-xaYaWLbV3hZIE58n8PQK3Woi3CMh48DFVYyJX2NGbZ-VMv29PHCLbE41jveHu83dARYMAicYooM/s640/short_mailbox.gif" title="Cara Membuat Halaman Contact Us Pada Blogspot" width="640" /></a></div>

<br />

Kami senang bisa membantu anda dengan memberikan artikel yang bermanfaat bagi anda semua, melalui Website Y Mobile4 ini semoga kehadiran kami diterima ditengah kalangan pengguna internet, Jika anda memiliki sebuah pertanyaan atau ingin berkomunikasi dengan kami silahkan kirimkan pesan anda melalui formulir dibawah, kami akan membalas semua pertanyaan anda ketika kami Online.

<br />

<div id="contact">

</div>

<form id="kontak" name="contact-form">

<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />

<br />

<div style="max-width: 100%; text-align: center; width: 100%;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

<br />

<br />

<ul>

<li>Jababeka - Cikarang 17550</li>

<li>+6289636570634</li>

<li>ekawijaya2020@gmail.com</li>

<li>www.ymobile4.com</li>

</ul>

<style scoped="" type="text/css">

#comments,.post_meta,#blog-pager{display:none}

form{color:#666}

form.payforpal{margin:auto;text-align:center}

#kontak{margin:auto;max-width:640px}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:48%;height:auto;background:#fff;margin:20px auto;padding:15px 12px;color:#000;border:1px solid rgba(0,0,0,0.2);float:left;transition:all 0.2s}

#ContactForm1_contact-form-email{float:right}

#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0 20px 0;padding:15px 12px;background:#fff;color:#000;border:1px solid rgba(0,0,0,0.2);resize:none;transition:all 0.3s}

#kontak br{display:none}

#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#000;border:1px solid rgba(0,0,0,0.2);}

#ContactForm1_contact-form-submit{float:left;background:#299BFA;color:#fff;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:15px;text-align:center;letter-spacing:.5px;border:0;width:100%;font-weight:500;transition:all .2s}

#ContactForm1_contact-form-submit:hover,#ContactForm1_contact-form-submit:focus{background:#207cc8;color:#fff;}

#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}

.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}

.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}

img.contact-form-cross{line-height:40px;margin-left:5px}

.post-body input{width:initial}

@media only screen and (max-width:640px){

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;float:none}}

</style>

<script type="text/javascript">

//<![CDATA[

if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');

//]]>

</script>

<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'] = '7542887174915884791';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7542887174915884791','//https://ymobile4.blogspot.com/','7542887174915884791');

_WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "<div class='contact_layout'>

<div class='contact_message'>

<b>Your message has been sent</b>.<br/>Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.</div>

</div>

<br/>", "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": "7542887174915884791", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));

//]]>

</script>

<br />

<div class="clear">

</div>

• Silahkan ganti blogID dan alamat blog yang sudah saya beri warna merah sesuai dengan blogID dan alamat blog milik kamu ( Untuk lebih jelasnya silahkan perhatikan Gambar nomor 1 diakhir tutorial )
• Simpan halaman tersebut kemudian publikasikan
• Sampai tahapan ini kamu sudah berhasil membuat Halaman Contact US, langkah selanjutnya adalah menyisipkan URL halaman tersebut pada Navigasi di template Blogspot kamu
• Jika kamu tidak tahu bagaimana caranya untuk menyisipkan url silahkan ambil url dari halaman contact us melalui menu Halaman pada blogspot
• Pada Halaman Contact Us yang telah kamu buat tadi sorot bagian bawah dari halaman tersebut kemudian pilih Lihat ( Silahkan lihat gambar pada nomor 2 dibawah )
• Setalah url Halaman Contact Us terbuka simpan url tersebut untuk nanti di letakkan pada template ( Silahkan lihat gambar pada nomor 3 dibawah )
• Kembali ke pengaturan pada blogspot dan Pilih tema lalu Edit HTML
• Dibagian ini kamu harus berhati-hati agar tidak merusak template yang kamu gunakan, jangan sampai ada bagian yang terhapus secara tidak sengaja.
• Cari dimana navigasi Contact us dalam template kamu berada, gunakan fitur pencarian dengan menggunakan shortcut pada keyboard Ctrl + F ( Silahkan lihat gambar pada nomor 4 dibawah )
• Jika sudah ditemukan letakkan url yang sudah di salin tadi ke dalam url navigasi Contact us yang sudah tersedia dari template yang kamu gunakan ( seperti pada gambar 4 dibawah ), setelah selesai kemudian simpan tema dan selesai.

Setelah membuat halaman navigasi Contact us dengan demikian kamu sudah menyediakan sebuah  media penghubung antara kamu dan pengunjung dimana nantinya jika seorang pengunjung ingin berinteraksi dengan kamu sebagai admin dari blog tersebut cukup dengan mengirim pesan melalui halaman tersebut, sobat mobiller demikian tutorial blogspot kita pada pertemuan kali ini semoga artikel sederhana dari saya ini bermanfaat dan dapat dijangkau oleh semua kalangan, saya admin Seven mengucapkan terimakasih banyak atas kunjungan dan perhatiannya.

Bagikan Artikel ini