Contact us di blogger itu
sangat penting untuk menerima pesan dari para pemirsa blog kita. Jika tidak ada
contact blog akan sulit mereka untuk menghubungi kita walapun bisa dengan cara
commentar di blog. Tapi apakah kalian tahu contact us itu ada banyak sekali
pilian nya dari melalui web dan ada juga contact us yang langsung dari blogger
disini kita akan membahas Salah satunya saja karena cara yang seperti ini
paling banyak di gunakan dan mudah dalam pelaksanaanya.
Pertama buka fitur halaman pada halaman awal blog seperti gambar dibawah. Kemudia klik halaman baru untuk membuat halaman baru yaitu Contact us.
 |
| Fitur Halaman. [1] |
Jika sudah nanti akan muncul seperti kita mau buat postingan walaupun ada beberapa fitur yang tidak ada. Selanjutnya disitu ada button compose dan juga button html kita klik yang html karena membuat contact us memerlukan sintax javascript dan juga html.
 |
| Halaman di fitur halaman. [2] |
Kemudian kita copy kan code dibawah
ini ke html tersebut.
<form name="contact-form">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
</div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
</div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea>
</div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<div style="max-width: 100%; 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">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:50%;height:250px;padding:10px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgdd4irs2swOXeKJWhkstLDNewFyJeUNcNf-2DdCQ3olXP3B1qPbLp8IX8tinzxzM5Y1DDJeaEJWz5iNkiHHCvbI-5buHWxOkG74wHck-I1XSK8gGRs1J0QEY7a8rNS4vAwbSLgdBDSZgO/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>
<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'] = '8987xxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8987xxxxxxx','//https://tutorialteknologis.blogspot.com/','8987xxxxxxx');
_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': '8987xxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
</div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
</div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea>
</div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<div style="max-width: 100%; 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">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:50%;height:250px;padding:10px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgdd4irs2swOXeKJWhkstLDNewFyJeUNcNf-2DdCQ3olXP3B1qPbLp8IX8tinzxzM5Y1DDJeaEJWz5iNkiHHCvbI-5buHWxOkG74wHck-I1XSK8gGRs1J0QEY7a8rNS4vAwbSLgdBDSZgO/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>
<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'] = '8987xxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8987xxxxxxx','//https://tutorialteknologis.blogspot.com/','8987xxxxxxx');
_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': '8987xxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Seperti dibawah ini. Dan jangan lupa mengganti ID blognya yang diwarnai huruf dengan warna kuning ganti dengan id blog anda sendiri dan juga huruf yang warna hijau diganti dengan url blog anda.
 |
| Copykan code ke sini. [3] |
Atau kalau mau cara cepatnya tekan Ctrl + F di keyboard kemudian ketikan https://tutorialteknologis.blogspot.com/ dan ganti dengan nama url blog anda.
 |
| Tekan Ctrl + F secara bersamaan. [4] |
Dan satu lagi Id blog cara menemukan id blog yaitu anda tinggal pergi ke halaman utama blogger dan liat di url anda akan ada seperti ini.
 |
| Di url blog ada ID blog anda silahkan copy. [5] |
Jika sudah di copy id blog nya kemudian kalian ganti id blog ini 8987xxxxxxx dengan id blog anda cara nya sama seperti tadi tekan Ctrl + F secara bersamaan kemudian ganti id blognya.
 |
| Pastekan Id blog anda ke 4 id blog yang ada didalam code tersebut. [6] |
Jangan lupa pastekan id blog ke 4 id yang ada di codingan tersebut. Kemudian nanti hasil nya akan seperti dibawah ini.
 |
| Tampilan Contact Us saat sudah jadi. [7] |
Dan kita akan mengetes nya apakah
Contact Us nya berjalan lancar.
 |
| Ketikkan pesan untuk mengirim ke email yang ada di blog anda. [8] |
Kemudian kita cek di gmail kita
masing masing apakah masuk apa tidak ke gmail Kalau misal tidak masuk atau ada
yang bermasalah dengan code di atas bisa hubungi kami melalui contact us atau
bisa melalui kolom komentar atau bisa juga melalui fanspage. Tetap terus di
blog kami ya di TuTorNOlogi.
 |
| Sampai dengan cepat dan aman. [9] |