Halaman kontak atau contact form memang sangat penting untuk dipasang pada setiap website atau blog biar pengunjung situs lebih gampang untuk menghubungi Anda.
Apapun jenis website yang Anda kelola halaman kontak wajib ada, baik itu berisi alamat daerah tinggal atau alamat toko / perusahaan, dapat juga nomor hp / telepon, atau bahkan formulir kontak.
Membuat halaman hubungi kami atau contact us di blogspot memang sangat mudah, kita dapat membuatnya dengan memakai fitur yang sudah disediakan dari platform blogger.
Anda dapat menambahkan widget contact form melalui Tata Letak > Tambahkan Gadget > Gadget Lainnya > Formulir Kontak.
Cara di atas dapat Anda gunakan kalau ingin menampilkan widget formulir kontak di bab tertentu, dengan tampilan atau desain yang masih sederhana tergantung dari template blog Anda yang dipakai dikala ini.
Setiap template blog yang dipakai tentu mempunyai desain yang berbeda, beberapa orang juga membagikan arahan script untuk menciptakan form kontak ini dengan desain yang berbeda-beda.
Pada kesempatan kali ini saya akan membagikan tutorial cara menciptakan formulir kontak di halaman statis blogger dengan desain yang keren dan tampilan yang lebih profesional.
Ada tiga jenis arahan script untuk menciptakan form kontak di blog ialah arahan HTML untuk kerangkanya, arahan CSS untuk mempercantik tamapilannya, dan arahan JavaScript untuk menjalankan perintah atau fungsinya biar kalau ada yang memakai formulir ini akan secara otomatis masuk ke email Gmail yang Anda gunakan.
Nah, bagi Anda yang tertarik untuk menciptakan form kontak di blog khusus untuk halaman statis (static page) silahkan ikuti langkah-langkahnya di bawah ini.
2. Klik Halaman > Halaman baru
3. Kemudian beri judul "Contact" atau "Kontak" atau sesuai keingnan Anda
4. Lalu pada editor konten pilih HTML bukancompose, kemudian masukkan arahan di bawah ini:
Apapun jenis website yang Anda kelola halaman kontak wajib ada, baik itu berisi alamat daerah tinggal atau alamat toko / perusahaan, dapat juga nomor hp / telepon, atau bahkan formulir kontak.
Membuat halaman hubungi kami atau contact us di blogspot memang sangat mudah, kita dapat membuatnya dengan memakai fitur yang sudah disediakan dari platform blogger.
Anda dapat menambahkan widget contact form melalui Tata Letak > Tambahkan Gadget > Gadget Lainnya > Formulir Kontak.
Cara di atas dapat Anda gunakan kalau ingin menampilkan widget formulir kontak di bab tertentu, dengan tampilan atau desain yang masih sederhana tergantung dari template blog Anda yang dipakai dikala ini.
Setiap template blog yang dipakai tentu mempunyai desain yang berbeda, beberapa orang juga membagikan arahan script untuk menciptakan form kontak ini dengan desain yang berbeda-beda.
Pada kesempatan kali ini saya akan membagikan tutorial cara menciptakan formulir kontak di halaman statis blogger dengan desain yang keren dan tampilan yang lebih profesional.
Ada tiga jenis arahan script untuk menciptakan form kontak di blog ialah arahan HTML untuk kerangkanya, arahan CSS untuk mempercantik tamapilannya, dan arahan JavaScript untuk menjalankan perintah atau fungsinya biar kalau ada yang memakai formulir ini akan secara otomatis masuk ke email Gmail yang Anda gunakan.
Nah, bagi Anda yang tertarik untuk menciptakan form kontak di blog khusus untuk halaman statis (static page) silahkan ikuti langkah-langkahnya di bawah ini.
Cara Memasang Form Kontak di Halaman Statis Blogger
1. Masuk ke Blogger.com2. Klik Halaman > Halaman baru
3. Kemudian beri judul "Contact" atau "Kontak" atau sesuai keingnan Anda
4. Lalu pada editor konten pilih HTML bukan
<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<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'] = '6515396942964738584';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6515396942964738584','//www.caramanual.com/','6515396942964738584'); _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': '6515396942964738584', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>5. Lakukan beberapa pengeditan pada ID dan URL blog yang saya tandai dengan abjad tebal (bold).
6. Kemudian klik Publikasikan.
- Ganti ID blog:
6515396942964738584 (total ada 4 kode) dengan ID blog milik Anda. Caranya lihat di bab URL dikala Anda membuka blogger.com- Ganti URL blog:
www.caramanual.com dengan URL blog AndaItulah artikel cara menciptakan formulir kontak di halaman statis blogger, kalau Anda mengalami problem dikala mencobanya silahkan hubungi kami melalui halaman kontak blog ini. Selamat mencoba dan semoga bermanfaat.
Sumber https://www.caramanual.com/
Related Posts
- Cara Mengatasi Error 0X000006d9 Ketika Sharing Printer Di Windows 7 Sharing printer dalam sebuah jaringan LAN sangat memudahkan semua orang untuk menccetak (print) dokumen tanpa harus copy paste ke flashd ...
- Cara Penulisan Abjad Besar Atau Kecil Pada Judul Artikel Yang Benar Dalam penulisan sebuah judul kita harus memperhatikan penulisan aksara besar (kapital) dan aksara kecil, jangan hingga Anda salah menentukan apala ...
- Artikel Agan Ke 100 Blog Terbaik Artikel Agan Ke 100 Blog Terbaik Assallamualikum sahabat perkenalkan nama aku Egi Supiyudin admin di artikel agan usia aku 24 tahun, asal bandung ...
- Cara Menciptakan Blog Yang Ringan, Valid Html5, Dan Seo Friendly Blog yang baik itu blog yang menyerupai apa sih? Sobat Blogger, salah satu cara yang cukup efektif untuk mendatangkan pengunjung ke blog kita yaitu ...
- Cara Menciptakan Iklan Parallax Pada Blog Non Amp Iklan Parallax Cara Membuat Iklan Parallax Pada Blog Non AMP - Sahabat Pasti tahu Kan iklan parallax scrolling itu , parallax ini mungkin sanggup ...
- Cara Memasang Lib Dan Host Ke System Pubg Anti Banned Root Only All Device Tutorial pasang file lib mod - Hallo sahabat berjumpa lagi dengan aku admin infoandrocodax yang akan membagikan tutorial, tips, trik dan juga ...
