Cara Praktis membuat contact Us Pada halaman statis Blog

Kalau di bilang mudah ya mudah cara membuat contact us pada halaman statis di blog, yang jadi maslah adalah apakah bisa berjalan sesuai dengan apa yang kita harap kan, secara umum ada 2 cara yang berbeda dalam membuat contact us, saat ini kita membahas yang manual ya, bukan yang menggunakan bantuan pihak ke 3, nanti itu akan di bahas belakangan. Ada juga cara untuk mengetahui blog anda sehat , jadi silahkan anda periksakan kekurangan nya. Apa perlu kita membuat contact us, padahal sudah ada sarana yang lain untuk berbicara atau mengontak kita, seperti pada kolom komentar, alamat email pada privacy ada juga pada disclaimer, kalau bicara serperti itu maka sudah cukup kira nya sarana untuk berkomunikasi dengan kita sebagai admin blog, kalimat seperti itu benar adanya, akan tetapi kurang sempurna saat kita membangun sebuah blog, maka harus ada halaman khusus buat contact us agar pengunjung dapat langsung mengontak kita pada halaman tersebut, entah itu isi nya apa dan apa , yang penting kita menyediakan entah itu ada yang menggunakan atau tidak yang penting sudah ada halaman khusus tersebut, ibaratkata itu seperti standart untuk sebuah blog yang bagus. Apa kelebihan dan kekurangan dengan ada nya halamn contact us,, Kelebihan nya...

• kita bisa langsung berinteraksi dengan sang pengujung blog.
• kita dapat lebih memperhatikan pesan pengujung dengan layanan ini.
• kali aja ada yang mau pasang iklan jadi kita bisa cepet balas.

Kekurangan nya....

• kita bisa sering kena surat kaleng.

Cara yang pertama Kita masuk ke blogger, kemudian pada menu dashboard, pilih halaman / pages, kemudian anda pilih mode editor HTML. kemudian anda copy scrypt di bawah ini, dan pastekan pada halamn yang anda sediakan tadi.
Script 1

<script>
var blogId = '134777113111111111';
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>

Dan untuk script 1,
itu hanya ganti nama blog ID dengan ID blog anda.
Untuk script yang di bawah atau yang ke 2,

 ganti url blog di atas dengan nama blog anda dan ganti ID blog di atas dengan ID blog anda blog ID yang harus di ganti ada 4 buah silahkan di coba...

  Script ke 2.

<form id="kontak-seo" name="contact-form" style="

    padding-right: 25px;

"><br>

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

<br>

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

<br>

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

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

<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 scoped="" type="text/css">

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

form{color:#666}

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

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);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 rgba(0,0,0,.14);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:#34495e;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:#3498db;color:#fff;}

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

.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;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%;}}

.contact_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.8);z-index:99999}

.contact_message{width:50%;background:#fff;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:30%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

.contact_message:before{content:"f164";font-family:FontAwesome;font-weight:500;font-size:30px;display:block;margin-bottom:10px}

@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}}

</style><br>

<script type="text/javascript">

//<![CDATA[

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

//]]>

</script><br>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br>

<script type="text/javascript">

//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '58891862532827193632';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID58891862532827193632','//blogtes6.blogspot.com/','58891862532827193632');

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

//]]>

</script>

<div class="clear"></div>

BACA : Cara ampuh melihat blog sehat

cara yang ke dua langsung saja masuk ke blogger, masuk pada bagian tata letak pilih add gadget kemudian pilih pada form kontak, bisa di letakan pada side bar, bisa juga pada footer. <div class="clear"></div>