Cara membuat halaman Contact Us di blog

Minggu, 05 Maret 2017 : Maret 05, 2017

0 comments

hay sobat, seperti yang saya janjikan kemarin saya akan melanjutkan tutorial membuat halaman Contact, Sitemap, Disclaimer, Privacy Policy dan Terms of Service (TOS) dan kali ini saya akan membuat halaman Contact / Contact Us .
 seperti yang saya janjikan kemarin saya akan melanjutkan tutorial membuat halaman Cara membuat halaman Contact Us di blog
Saya juga bilang kemarin bahwa halaman About, Contact, Sitemap, Disclaimer, Privacy Policy dan Terms of Service (TOS) sangatlah penting. karena halaman ini adalah syarat wajib yang harus di penuhi jika sobat mau mendaftarkan blog ke google adsense
Baca juga :
Cara membuat sitemap di blog
Cara membuat halaman About di blog
Contact ini berfungsi untu mengontact / menghubungi langsung admin blog. jadi jika pengunjung akan berkonsultasi dengan admin menjadi lebih mudah, karena blog kita terdapat halaman Contact.
Cara memberi halaman Contact ini sangat lah mudah. ikuti langkah-langkah di bawah ini ya sobat.


  • Yang pertama kamu masuk ke Blogger.com (Dashboard Blogger)
  • Salin script di bawah ini 
<script>
var blogId = '2550037457453799641';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
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>
<form name='contact-form'>
<div><span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-weight: 700;"><i class="fa fa-user"></i> Name </span></div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div><span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">(Required)</span></span></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div><span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">(Required)</span></span></div>
<textarea class='contact-form-email-message' 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' type='button' value='Send' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 450px; 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>

  • kemudian buka laman dan buat laman baru 
     seperti yang saya janjikan kemarin saya akan melanjutkan tutorial membuat halaman Cara membuat halaman Contact Us di blog
  • Ubah ke mode HTML dan Tempelkan script yang sudah kamu salin tadi 
     seperti yang saya janjikan kemarin saya akan melanjutkan tutorial membuat halaman Cara membuat halaman Contact Us di blog
  • Ganti blog id dengan blog id kamu. Blog id terdapat pada link blogger kamu. jika sudah publikasikan 
     seperti yang saya janjikan kemarin saya akan melanjutkan tutorial membuat halaman Cara membuat halaman Contact Us di blog
  • Setelah itu Salin link alamat dan masukkan ke link navigasi Contact
     seperti yang saya janjikan kemarin saya akan melanjutkan tutorial membuat halaman Cara membuat halaman Contact Us di blog
maka akan tampil seperti berikut
 seperti yang saya janjikan kemarin saya akan melanjutkan tutorial membuat halaman Cara membuat halaman Contact Us di blog

















Jika kamu tidak mau ribet saya anjurkan tidak memodifikasinya lagi script yang saya berikan tadi tapi jika kamu ingin memodifnya lagi ubahlah script tadi sesuai dengan keinginanmu. 

halaman Contact tersebut sudah saya uji dan hasilnya sangta memuaskan. email dapat terkirim dengan sempurna ke email saya. 
ini adalah buktinya sobat ^_^ 
 seperti yang saya janjikan kemarin saya akan melanjutkan tutorial membuat halaman Cara membuat halaman Contact Us di blog
nah mudah kan ?. jika kamu masih bingung bisa ditanyakan di kolom komentar atau bisa juga di contact langsung sobat ^_^. tutorial selanjutnya saya akan buat halaman Disclaimer, Privacy Policy dan Terms of Service (TOS). 


kenapa saya beda-bedakan tutorialnya ?

karena tutorial membuat halaman About, Contact, Sitemap, Disclaimer, Privacy Policy, dan Terms of Service (TOS) sangatlah panjang dan banyak memakan waktu. dan juga saya hanya memakai laptop pinjaman saudara saya.
jadi kalau lama-lama pinjamnya ya tak enak sama saudara kan ^_^

sekian tutorial kali ini. semoga bermanfaat ya ^_^
Share this Article
< Previous Article
Next Article >
Copyright © 2019 Xomlic - All Rights Reserved
Design by Ginastel.com