Membuat Kontak di Blog | Terbaru

Membuat Kontak di Blog | Terbaru - Kali ini saya akan membuat Tutorial bagaimana caranya membuat sebuah Form Kontak di blog. Form kontak ini nantinya akan di integrasikan dengan email dan blog kita, jadi ketika ada yang mengirimkan pesan melalui Form yang kita buat ini maka akan secara otomatis terkirim ke email kita.

Cara Membuat Kontak di Blog | Terbaru 2019 Lengkap


Dibawah ini adalah Hasil dari script yang akan kita buat.

Membuat Kontak Blog | Terbaru


Cara Membuat Kontak di Blog | Terbaru 2019 Lengkap

Dibawah ini cara bagaimana membuat form kontak di blog dengan benar dan mudah

1. Login ke blogger 
2. Buatlah sebuah halaman . ini digunakan untuk menempelkan script form kontak yang kita buat

Cara Membuat Kontak di Blog | Terbaru 2019 Lengkap


3. Copy script dibawah ini ke halaman yang kita buat. Masuk ke halaman => pilih HTML (jangan yang Compose ). Lalu paste



  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<style type="text/css">
.contact-form-widget {
}
.contact-form-success-message, .contact-form-error-message {
    background: #f9edbe;
    border: 0 solid #f0c36d;
    font-size: 14px;
    text-align: center;
    max-width: 500px;
    border-radius: 3px;
}
.contact-form-success-message-with-border, .contact-form-error-message-with-border {
    background: #f9edbe;
    border: 1px solid #f0c36d;
    font-size: 14px;
    text-align: center;
    max-width: 600px;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 5px 10px;
}
.contact-form-cross {
    height: 11px;
    margin: 0 5px;
    vertical-align: -8.5%;
    width: 11px;
}
.contact-form-email, .contact-form-name {
    color: inherit;
    height: 40px;
    margin-top: 5px;
    max-width: 300px;
    width: 100%;
    padding: 0 15px;
    border-radius: 3px;
    border: 1px solid #cacaca;
    box-sizing: border-box;
}
.contact-form-email-message {
    color: inherit;
    margin-top: 5px;
    vertical-align: top;
    max-width: 600px;
    width: 100%;
    border-radius: 3px;
    border: 1px solid #cacaca;
    padding: 15px;
}
.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
    outline: none;
    border: 1px solid #4381ce;
}
.contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {
    outline: none;
    border: 1px solid #4381ce;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
    background: #f8f8f8;
}
.contact-form-button {
    display: block;
    font-size: 14px;
    line-height: 24px;
    padding: 0 20px;
    margin: 30px 0;
    text-align: center;
    border: none;
    background: #4381ce;
    color: #fff;
    border-radius: 3px;
    font-weight: 500;
}
.contact-form-button:hover, .contact-form-button.hover {
    cursor: pointer;
    outline: none;
    opacity: .85;
}
.contact-form-button.focus, .contact-form-button.right.focus, .contact-form-button.mid.focus, .contact-form-button.left.focus {
    outline: none;
}
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
    outline: none;
    opacity: .85;
}
.swajib {
    font-weight: bold;
    color: #e85e5e;
}
.ctitles {
    font-weight: 500;
    display: block;
    margin: 30px 0 0;
}
</style>

<div class="contact-form-widget">
<form name="contact-form">
<span class="ctitles">Nama <span class="swajib">*</span> :</span>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" value="" />
<span class="ctitles">Alamat Email <span class="swajib">*</span> :</span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" value="" />
<span class="ctitles">Isi Pesan <span class="swajib">*</span> :</span>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="10"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<br />
<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>
<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'] = '1111111111111111111111';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1111111111111111111111','//www.rajaromans.com/','1111111111111111111111');_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': '1111111111111111111111', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));//]]>
</script>


4. Rubah Koe ID BLOG ( 1111111111111111111111
    Rubah dengan menggunakan ID BLOG kita ( ada sekitar 4 yang harus kita rubah di bagian paling bawah. )

Cara Membuat Kontak di Blog | Terbaru 2019 Lengkap



5. Rubah URL www.rajaromans.com dengan URL situs baru,

6. Langsung publikasikan

7. Masuk ke Tata letak => buat sebuah widget => Pilih widget halaman => pilih halaman contact yang sudah kita buat tadi  => Simpan widget


Cara Membuat Kontak di Blog | Terbaru 2019 Lengkap



8. Coba lah kontak yang sudah kita buat tersebut

9. Cek email di kontak masuk dan spam. Maka ini adalah hasil dari script kontak di blog yang kita buat . Pesan bisa di terima pemilik blog.



Membuat Kontak di Blog | Terbaru tahun 2019 - Semoga tutorial ini bisa bermanfaat.