Cara membuat halaman kontak pada blogger

Cara membuat halaman kontak us pada blogger - Halaman kontak merupakan sarana penghubung antara pengunjung dan pemilik blog agar memudahkan terkirimnya kritik atau saran secara langsung melalui email maupun dari fitur bawaan blog tersebut. Halaman kontak ini pun bisa di fungsikan sebagai halaman yang di alihkan, Jadi jika pengunjung tidak menemukan postingan yang hilang maka dapat teredirect langsung pada halaman kontak ini, Mungkin pada postingan lain saya akan memberikan tutorial cara membuat redirect page not found ke halaman lain.




Kembali lagi kepada pokok pembahasan, mungkin ada beberapa blogger yang kurang tahu bahwa memasang halaman kontak merupakan salah satu syarat dasar yang ditetapkan oleh google adsense, Bila anda ingin menjadi publisher adsense maka wajib menerapkannya di halaman statis pada blog anda dan juga menerapkan halaman sitemap, privacy policy, disclaimer serta about seperti contoh pada blog saya ini.

Di pencarian google sebenarnya banyak beraneka ragam script yang bisa anda gunakan dari bawaan blogspot maupun yang online, Tetapi dari beberapa script yang di berikan belum tentu masih aktif dan dan dapat di gunakan terlebih lagi google memperbarui sistemnya. 

Tenang, Saya akan berikan beberapa script halaman kontak yang sering dipakai oleh para blogger senior dan pastinya dapat anda gunakan dengan baik.


Cara membuat halaman kontak us,kontak form, contact me, pada blogger


  • Login ke blogger.com anda pilih menu  halaman dan ke Halaman baru.
  • Anda pilih HTML kemudian anda masukan kode di bawah ini, Lalu anda publikasikan.
Berikut beberapa kode yang bisa anda gunakan pada blog anda, Anda bisa memilih kode satu persatu.



Kode halaman kontak us arlina design

<form id="kontak-arlina" name="contact-form">
Name 
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
Email Address <span style="border:1px solid;color:#f14b4b;display:inline-block;font-size:x-small;font-weight:300;line-height:normal;margin:0 0 0 10px;padding:2px 6px;border-radius:2px;vertical-align:middle;">required</span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Content <span style="border:1px solid;color:#f14b4b;display:inline-block;font-size:x-small;font-weight:300;line-height:normal;margin:0 0 0 10px;padding:2px 6px;border-radius:2px;vertical-align:middle;">required</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="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>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
form {color:#666;}
#kontak-arlina{margin:auto;max-width:640px}
#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);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);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:rgba(0,0,0,.24);}
#ContactForm1_contact-form-submit{float:left;background:#222;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:#f14b4b;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%;}}
</style>
Kode halaman kontak us bakuloreg
<script>
var blogId = '7869872655554xxxxxx';
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>
Catatan : pada tulisan yang tercetak tebal 7869872655554xxxxxx ganti dengan id blog anda. 


Halaman kontak us informasiajaib

<div dir="ltr" style="text-align: left;" trbidi="on"><b>Contact Us</b>
<script>var blogId = 'xxxxxxxxxxxxxxxxxxx';var contactFormMessageSendingMsg ='Sending...';var contactFormMessageSentMsg = 'Your message has been sent.';var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';var contactFormEmptyMessageMsg ='Message field cannot be empty.';var contactFormInvalidEmailMsg = 'A valid email is required.'
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><br /><form name="contact-form"><div>Your Name : </div><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<br /><div>Your Email: <em>(required)</em></div><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<br /><div>Your Message: <em>(required)</em></div><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Send" />
<br /><br /><div style="max-width: 450px; text-align: center; width: 100%;"><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></div></form></div>
Catatan : pada tulisan yang tercetak tebal xxxxxxxxxxxxxxxx ganti dengan id blog anda. 

Jika anda ingin mengetahui id blog, anda bisa masuk ke blogger.com dan kemudian cek pada bagian andress bar browser anda. pastikan semua angka telah di salin dengan benar agar tidak terjadi kesalahan.


Sekian cara membuat halaman kontak us pada blogger, Semoga artikel ini dapat bermanfaat bagi kita semua.


No comments:

Post a Comment