Cara Membuat Halaman Kontak di Blogger - Formulir Kontak Admin Blog

Baca Juga

Cara Membuat Halaman Kontak di Blogger - Formulir Kontak Admin Blog

Berikut ini Cara Membuat Halaman Kontak di Blogger, yaitu halaman statis berisi formulir kontak admin blog. Pesan yang terkirim akan masuk ke email admin blog. (Lihat Demo).

Ada beberapa cara membuat formulir kontak di halaman statis blog. Desainnya juga beragam. Salah satunya seperti gambar di bawah ini.

Cara #1 Membat Halaman Kontak di Blog

1. Klik Tema > Edit HTML

2. Simpan kode berikut ini di atas kode ]]></b:skin>

#ContactForm1 {display:none}

3. Klik Page > New Page (Buat Halaman Baru)

4. Isi judul halaman dengan Kontak

5. Klik mode HTML dan copas kode berikut ini:

<form name="contact-form">
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
Alamat Email <span style="color: red; font-weight: bolder;">*</span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Isi Pesan <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<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>
<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}
</style>

6. Publish! Publikasikan

8. Klik Layout > Add a Gadget di sidebar

9. Pilih Contact Form

10. Pindahkan widget ke bagian sidebar paling bawah.

Cara #2 Membuat Halaman Kontak di Blogger 

1. Klik Laman (Pages) > Laman Baru (New Page)

2. Isu judul laman, misalnya Kontak, Contact Us, Contact Me, Hubungi Kami, Kontak Admin.

3. Klik mode HTML (sebelah Compose) di kanan atas

4. Copas kode di bawah ini sebagai isi Laman

<script>

var blogId = '12345678910';

var contactFormMessageSendingMsg ='Mengirim...';

var contactFormMessageSentMsg = 'Pesan sudah dikirim. Semoga Anda bahagia.';

var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Coba lagi nanti.';

var contactFormEmptyMessageMsg = 'Bidang pesan harus diisi.';

var contactFormInvalidEmailMsg = 'Alamat email harus valid.'

var widgetLoaded=false;

function sendEmailMsg() {

if(widgetLoaded== false) {

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

widgetLoaded=true;

document.getElementById('ContactForm1_contact-form-submit').click();

}

return true;

}

</script>

<div class="Form">

<form name="contact-form">

<p></p>

Nama

<br />

<input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<p></p>

Email

<span style="font-weight: bolder;">*</span><br />

<input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<p></p>

Pesan

<span style='font-weight: bolder;'>*</span>

<br />

<textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>

<p></p>

<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />

<p></p>

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

<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>

<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>

</div>

</form>

</div>

5. Ganti angka warna merah dengan blogID Anda yang ada di address bar.

6. Publikasikan!

Demikian Cara Pertama Membuat Halaman Kontak di Blogger - Formulir Kontak Admin Blog. Jika gagal masih ada cara lainnya di bawah ini.

Cara #3 Membuat Halaman Kontak di Blogger 

Berikut ini cara Halaman Kontak di Blogger dengan tampilan di atas. Khususnya untuk template blog bawaan blogger.

1. Tema > Edit HTML

2. Simpan kode berikut ini di atas kode ]]></b:skin>

#ContactForm1{display: none !important;}

3. Save! Simpan template Anda.

4. Klik Pages (Halaman) > Buat Halaman Baru (New Page)

5. Klik Mode HTML dan lakukan setting seperti gambar di bawah ini

6. Copas kode berikut ini di bagian konten:

<style type="text/css">

.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#444;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#444;display:block;outline:none;margin-bottom:20px;text-align:center;background:#E6E6E6;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}

</style>

<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="NAME" onblur='if (this.value == "") {this.value = "NAME";}' onfocus='if (this.value == "NAME") {this.value = "";}' /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="EMAIL" onblur='if (this.value == "") {this.value = "EMAIL";}' onfocus='if (this.value == "EMAIL") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="MESSAGE" onblur='if (this.value == "") {this.value = "MESSAGE";}' onfocus='if (this.value == "MESSAGE") {this.value = "";}'></textarea></div><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></form></div></div></div>

7. Klik Publish! Publikasikan.

8. Klik Layout > Add a Gadget > tambahkan Contact Form

Selesai! Tampilan form kontak lainnya bisa dilihat di sumber.

Cara #4 Membuat Halaman Kontak di Blogger 

Jika cara di atas tidak berhasil, coba cara kedua berikut ini, khususnya di template blogger yang sudah diutak-atik atau dihilangkan kode CSS bawaan bloggernya.

Cara Membuat Halaman Kontak

1. Layout > Add a Gadget > Pilih Contact Form

2. Pindahkan ke bawah widget Blog Post

Save!

3. Klik Tema/Template > Edit HTML

4. Copas kode berikut ini di atas kode ]]></b:skin>

.widget.ContactForm,.widget #ContactForm1{display: none !important;}

5. Save!

BUAT HALAMAN STATIS KONTAK

1. Page > New Page

2. Isi judul dengan Kontak

3. Klik mode HTML di kiri atas (sampung Compose)

4. Copas kode berikut ini:

<style>

/* Contact Form */

#comments,.post_meta,#blog-pager{display:none}form{color:#666}#kontak{margin:auto;width:100%;max-width:470px}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #2f303f;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 #2f303f;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:#2f303f;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#2f303f;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} @media only screen and (max-width:640px){#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%}}

</style>

<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" size="30" placeholder="Email *" 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"/>

<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" 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'] = 'blogID';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3dblogID','//www.contohblogih.blogspot.com/','blogID');

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

Ubah kode warna merah

blogID ada di address bar blog Anda saat menulis posting atau membuat halaman baru

Publish!

Beres.

Demikian Cara Membuat Halaman Kontak. Good Luck! (www.contohblog.com).*