Membuat Halaman Kontak
Laman kontak adalah sarana agar pengunjung dapat dengan mudah berhubungan dan berinteraksi langsung dengan pemilik blog. Selain itu, laman kontak juga menyediakan privasi tersendiri bagi blogger karena kamu tidak perlu memberikan alamat email kamu secara langsung.
Untuk membuat form kontak, kamu bisa menggunakan widget/gadget khusus yang dibuat oleh Blogger. Namun layaknya widget, form tersebut hanya bisa diletakan di sidebar atau footer saja. Padahal banyak blogger yang menginginkan laman sendiri untuk form kontak.
Memiliki laman kontak yang bagus tentu akan sangat menyenangkan, apalagi kalau melihat tampilan form bawaan Blogger yang sangat standar.
Di internet banyak bertebaran tutorial cara membuat laman kontak kamu sendiri, tapi menurut saya ini adalah cara paling mudah, apalagi untuk kamu yang awam terhadap koding.
Cara Buat Laman Kontak Terpisah di Blog Blogger
CATATAN: Dari beberapa komentar yang masuk, nampaknya widget Blogger sedang bermasalah saat ini, kecuali kamu memakai custom domain. Jika kamu memasang widget contact form silahkan dicoba dulu apakah kamu bisa menerima pesan yang masuk atau tidak?)
Keterangan lebih lengkap bisa kamu lihat di thread berikut ini: https://support.google.com/blogger/thread/17262264?hl=en
Sebagai alternatif, kamu bisa membuat halaman kontak dengan aplikasi pihak ketiga seperti Google Form atau JotForm terlebih dahulu sampai masalah ini teratasi.
Untuk membuatnya, ikuti langkah-langkah berikut:
Pertama, tambahkan widget contact form di sidebar Blogger. Caranya, masuk ke menu TATA LETAK lalu tambahkan widget baru di sidebar, pilih CONTACT FORM lalu simpan.
Karena kita akan membuat laman kontak yang terpisah, tentu kita tidak ingin agar widget contact form di sidebar ini terlihat kan?
Membuat Halaman Kontak
Pada tampilan Blogger yang baru, kamu bisa mencentang opsi Show Contact Form untuk menyembunyikan gadget Contact Form. Namun jangan lakukan hal ini karena saat saya mencobanya, kode yang kita pakai tidak akan bekerja!
Centang opsi 'Show Contact Form' untuk menyembunyikan widget Contact Form di Blogger
Jangan centang opsi ‘Show Contact Form’ pada tutorial ini!
Untuk menyembunyikan gadget Contact Form kita bisa menggunakan kode CSS. Caranya? Masuk ke menu TEMA » SESUAIKAN » LANJUTAN » TAMBAHKAN CSS, lalu salin kode berikut ini.
#ContactForm1{display:none !important;}
Sekarang masuk ke menu LAMAN » LAMAN BARU. Isi nama laman sebagai Kontak atau Hubungi Kami sesuai selera kamu. Pilih juga tab HTML pada text editor karena kita akan memasukan kode untuk membuat laman kontak.
Pada setelan laman, kamu bisa mencentang opsi Jangan bolehkan pada pilihan Komentar pembaca agar laman yang kamu buat tidak dikomentari orang lain.
buat-laman-kontak-baru-pada-blogger
Cara buat laman kontak pada Blogger (blogspot).
Setelah selesai, kopi kode di bawah ini ke dalam laman baru yang kamu buat.
 |
| Membuat Halaman Kontak |
Membuat Halaman Kontak
Untuk membuat form kontak, kamu bisa menggunakan widget/gadget khusus yang dibuat oleh Blogger. Namun layaknya widget, form tersebut hanya bisa diletakan di sidebar atau footer saja. Padahal banyak blogger yang menginginkan laman sendiri untuk form kontak.
Memiliki laman kontak yang bagus tentu akan sangat menyenangkan, apalagi kalau melihat tampilan form bawaan Blogger yang sangat standar.
Di internet banyak bertebaran tutorial cara membuat laman kontak kamu sendiri, tapi menurut saya ini adalah cara paling mudah, apalagi untuk kamu yang awam terhadap koding.
Cara Buat Laman Kontak Terpisah di Blog Blogger
CATATAN: Dari beberapa komentar yang masuk, nampaknya widget Blogger sedang bermasalah saat ini, kecuali kamu memakai custom domain. Jika kamu memasang widget contact form silahkan dicoba dulu apakah kamu bisa menerima pesan yang masuk atau tidak?)
Keterangan lebih lengkap bisa kamu lihat di thread berikut ini: https://support.google.com/blogger/thread/17262264?hl=en
Sebagai alternatif, kamu bisa membuat halaman kontak dengan aplikasi pihak ketiga seperti Google Form atau JotForm terlebih dahulu sampai masalah ini teratasi.
Untuk membuatnya, ikuti langkah-langkah berikut:
Pertama, tambahkan widget contact form di sidebar Blogger. Caranya, masuk ke menu TATA LETAK lalu tambahkan widget baru di sidebar, pilih CONTACT FORM lalu simpan.
Karena kita akan membuat laman kontak yang terpisah, tentu kita tidak ingin agar widget contact form di sidebar ini terlihat kan?
Membuat Halaman Kontak
Pada tampilan Blogger yang baru, kamu bisa mencentang opsi Show Contact Form untuk menyembunyikan gadget Contact Form. Namun jangan lakukan hal ini karena saat saya mencobanya, kode yang kita pakai tidak akan bekerja!
Centang opsi 'Show Contact Form' untuk menyembunyikan widget Contact Form di Blogger
Jangan centang opsi ‘Show Contact Form’ pada tutorial ini!
Untuk menyembunyikan gadget Contact Form kita bisa menggunakan kode CSS. Caranya? Masuk ke menu TEMA » SESUAIKAN » LANJUTAN » TAMBAHKAN CSS, lalu salin kode berikut ini.
#ContactForm1{display:none !important;}
Sekarang masuk ke menu LAMAN » LAMAN BARU. Isi nama laman sebagai Kontak atau Hubungi Kami sesuai selera kamu. Pilih juga tab HTML pada text editor karena kita akan memasukan kode untuk membuat laman kontak.
Pada setelan laman, kamu bisa mencentang opsi Jangan bolehkan pada pilihan Komentar pembaca agar laman yang kamu buat tidak dikomentari orang lain.
buat-laman-kontak-baru-pada-blogger
Cara buat laman kontak pada Blogger (blogspot).
Setelah selesai, kopi kode di bawah ini ke dalam laman baru yang kamu buat.
<form id="kontak-arlina" name="contact-form">Ganti kode warna hijau dengan ID blog dan warna merah url blog
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" 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="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<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">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
form.payforpal{margin:auto;text-align:center}
#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);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 rgba(0,0,0,.14);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:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
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>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<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'] = '2529257739510241695';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2529257739510241695','//https://romansaabuabu.blogspot.com/','2529257739510241695');
_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': '2529257739510241695, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
bila kurang jelas bisa ditanyakan
sumber https://bisablog.com/laman-kontak-blogger/