Cara Membuat Halaman Contact Us Pada Blogspot Dengan Mudah - WebTekno

Cara Membuat Halaman Contact Us Pada Blogspot Dengan Mudah - WebTekno - Halo sobat blogger, kali ini saya masih membahas seputar dunia blogger yaitu cara membuat halaman contact us pada halaman blog dimana banyak dari para blogger yang tidak  begitu memperdulikan yang satu ini. Padahal ini adalah bagian dasar saat pertama kali kita akan menggarap blog atau website yang dibuat, kebanyakan blogger hanya memperhatikan atau hanya mengudate artikel untuk mengisi postingan-postingan blog mereka, namun tahukah kamu bahwa hal kecil ini sangat berpengaruh besar apalagi jika kamu yang ingin mendaftarkan blogmu ke google adsense, ini menjadi faktor penting untuk memenuhi syarat-syarat dan ketentuan yang dibuat oleh pihak google sendiri, oleh karena itu maka saya akan sedikit mengulas tentang fungsi dari halaman Contact Us, simak baik-baik ulasan yang akan saya paparkan dibawah ini.

Pengertian serta Fungsi dari Halaman Contact Us pada Blog

Contact Us halaman pada blogspot ialah sebuah halaman yang dibuat untuk tujuan supaya pengunjung bisa atau dapat mengirim pesan atau menghubungi kepada admin melalui blog tersebut dengan mudah, halaman ini bersifat static dimana halaman tidak menampilkan dalam bentuk artikel tetapi halaman ini mempunyai navigasi khusus yang biasanya di letakkan pada bagian header ataupun bagian bawah pada setiap template blog. Lalu bagaimana cara kerja Contact Us ? cara kerjanya sangat sederhana, yaitu dengan bantuan Java Script yang diletakkan di halaman static blogspot yang akan menjadi sebuah form formulir yang dimana untuk digunakan pengunjung menghubungi atau mengirim pesan kepada admin blog tersebut.

Nah jika kamu sudah penasaran dengan tampilan Contact Us lihat punya saya melalui navigasi Contact Us yang ada pada bagian atas atau kamu bisa lihat disini. Lalu bagaimana cara membuat halaman Contact Us pada blog? yuk kita simak tutorial yang akan saya bagikan dibawah ini.

Cara Membuat Halaman Contact Us Pada Blog

• Pertama kamu harus login ke akun blogger kamu
• Kemudian klik menu halaman
• Lalu Klik Halaman baru untuk membuat halaman dan berinama Contact Us
• Setelah masuk pada halaman editor maka beralihlah ke mode HTML
• Kemudian copy dan paste java script ini pada bagian HTML

<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.blogger.com/blogger.g?blogID=7713257366916559447#contact"
imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Contact Us"
border="0" data-original-height="600" data-original-width="800" height="480"
src="https://2.bp.blogspot.com/-oVqE0yqwJG0/WZH6c-
H5YfI/AAAAAAAAC5w/B4TVYESsUCcmDz68MsPo7gRChDbIouzRwCLcBGAs/s640/shor
t_mailbox.gif" title="Contact Us" width="640" /></a></div>
<br />
Kami senang bisa membantu anda dengan memberikan artikel yang bermanfaat bagi
anda semua, melalui Website webtekno 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="emailmessage"
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>Kuningan - Ciawigebang 45591</li>
<li>+6283824861573</li>
<li>squarepantsocoy026@gmail.com</li>
<li>www.webtekno.tech</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:inlineblock;
width:48%;height:auto;background:#fff;margin:20px auto;padding:15px
12px;color:#000;border:1px solid rgba(0,0,0,0.2);􀂢oat:left;transition:all 0.2s}
#ContactForm1_contact-form-email{􀂢oat: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-formemail:
focus,#ContactForm1_contact-form-emailmessage:
focus{outline:none;background:#fff;color:#000;border:1px solid rgba(0,0,0,0.2);}
#ContactForm1_contact-formsubmit{
􀂢oat:left;background:#299BFA;color:#fff;margin:auto;verticalalign:
middle;cursor:pointer;padding:16px 20px;font-size:15px;text-align:center;letterspacing:.
5px;border:0;width:100%;font-weight:500;transition:all .2s}
#ContactForm1_contact-form-submit:hover,#ContactForm1_contact-formsubmit:
focus{background:#207cc8;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-successmessage{
width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f47669;border:0;boxshadow:
none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;boxshadow:
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-formemail,#
ContactForm1_contact-form-submit{width:100%;􀂢oat: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) != 'unde􀂡ned' && BLOG_attachCsiOnload != null) {
window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] =
'7713257366916559447';BLOG_attachCsiOnload('');
}_WidgetManager._Init('//www.blogger.com/rearrange?
blogID\x3d7713257366916559447','//https://www.webtekno.tech/','7713257366916559447');
_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 􀂡eld cannot be empty.", "title": "Contact
Form", "blogId": "7542887174915884791", "contactFormNameMsg": "Name",
"contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message",
"contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contactform.
do"}, "displayModeFull"));
//]]>
</script>
<br />
<div class="clear">
</div>

• Silahkan kamu ganti tulisan merah yang sudah saya tandai dengan blogID dan alamat blog kamu
• Simpan halaman tersebut, kemudian edit pada bagian Pilihan kamu pilih "jangan bolehkan, sembunnyikan yang ada"

• Silahkan kamu Publikasikan halaman Contact Us
• Sampai tahap ini kamu sudah berhasil membuat Halaman Contact Us, dan langkah selanjutnya adalah kamu harus mengaitkan URL halaman Contact Us pada navigasi template blog kamu
• Apabila kamu belum mengetahui cara mengaitkan URL silahkan kamu ambil URL halaman tersebut dengan mengklik lihat

• Setelah halaman Contact Us terbuka silahkan kamu lihat dan copy url nya

• Kembali ke pengaturan pada blogspot dan pilih Tema lalu Edit HTML.
• Pada tahap ini kamu harus sangat berhati-hati agar tidak merusak template yang sedang kamu gunakan, jangan ada satu karakter pun yang terhapus jika tidak mau error.
• Silahkan kamu cari navigasi Contact Us dalam template kamu, untuk mempermudah dalam pencarian silahkan gunakan fitur Ctrl+F pada keyboard.
• Jika sudah ketemu silahkan letakkan URL halaman Contact Us yang tadi kamu copy kedalam url navigasi Contact Us yang tersedia pada template kamu setelah itu simpan tema dan selesai.

Nah bagaimana mudah bukan cara membuat halaman Contact Us pada blog, dengan membuat halaman navigasi contact us dengan demikian kamu sudah menyediakan sebuah media penghubung antara pengunjung dan admin blog dimana nantinya jika ada seorang pengunjung yang ingin berinteraksi dengan admin blog tersebut cukup dengan mengirim pesan melalui halaman tersebut, nah demikian lah tutorial cara membuat halaman contact us pada blog, semoga artikel ini memberikan manfaat bagi kita semua. Terimakasih

Share this post