Cara Membuat Hubungi Kami Atau Contact Us DI Halaman Blogger Dengan Mudah
Sebenarnya manfaat dari memasang form kontak itu sangatlah banyak sekali seperti jika ada user yang melaporkan bug di blog kita dan jika ada user yang mau kerjasama dengan kita. Untuk membuat form kontak ini sangatlah mudah sekali, kalian tidak perlu mengedit template kalian. Cukup melalui halaman statis saja, untuk lebih jelasnya silahkan kalian simak tutorialnya di bawah ini.
Cara Membuat Hubungi Kami Atau Contact Us DI Halaman Blogger Dengan Mudah
1. Buka Blog kalian.
2. Pilih Halaman lalu buatlah halaman baru ( New entry ).
3. Buatlah judulnya contoh : Hubungi Kami atau Contact Us.
4. Masuk ko Mode HTML.
5. Salin kode di bawah ini dan pastekan tepat di dalam Mode HTML pada halaman statis kalian.
<style>
/* Contact Form */
#comments,.post_meta,#blog-pager{display:none}form{color:#666} #kontak{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 #1d2129;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 #1d2129;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:#008c5f;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:#1d2129;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#1d2129;border:none;box-shadow:none;color:#fff;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}
</style>
<form id="kontak" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Isi pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan"/>
<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>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '9999000000000000009';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d9999000000000000009','//www.URLBLOGSOBAT.com/','9999000000000000009');
_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': '9999000000000000009', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>
Keterangan :6. Publish halaman kalian dan selesai.
9999000000000000009 Ganti dengan ID blog kalian.
www.URLBLOGSOBAT.com Ganti dengan Url blog kalian tanpa menggunakan Http maupun Https.
7. Setelah di publish silahkan Copy Url Link halaman Contact Us kalian lalu pastekan pada template kalian.
Mungkin itu saja yang bisa saya sampaikan tentang Cara Membuat Hubungi Kami Atau Contact Us DI Halaman Blogger Dengan Mudah, form saya desain sesimpel dan sedinamis mungkin supaya mempunyai tampilan yang sederhana dan menarik.
Jika kalian mempunyai pertanyaan seputar postingan di atas atau tentang blogger silahkan kalian bertanya melalui kolom komentar yang ada di bawah ini atau bisa juga melalui Contact Us. Terimakasih sudah berkunjung dan semoga bermanfaat buat kalian semua.
