Cara Membuat Halaman Kontak ( Contact Form ) di Blog Yang Benar
Halo Sobat blogging semua,dalam ulasan kali ini admin akan memberikan Tutorial Blogger tentang bagimana cara membuat halaman kontak atau sering di sebut Contact Form pada blogger,dan untuk fungsi utama Contact Form yakni berfungsi untuk mengirimkan pesan kepada pemilik situs utama.
Dalam dunia blogging Contact Form merupakan hal terpenting yang harus dimiliki oleh pemilik situs,dimana agar mempermudah para pengunjung menghubungi pemilik situs apabila ada hal hal penting yang ingin di sampaikan,selain dari pada ini,Contact Form juga berguna untuk mengumpulkan contact email,yang nantinya bisa kita buat untuk promosi produk.
Dan Halaman Kontak juga bisa berfungsi untuk membantu kita memperbaiki situs dari kekurangan - kekurangan yang kita sajikan,dengan cara mendapat masukan atau pemberitahuan oleh para pengunjung,seperti contoh,apa bila situs kita ada url yang mati alias tidak berfungsi,maka kita akan mengetahui dari masukan oleh pengunjung.
Mungkin untuk membuat Contact Form sudah banyak yang mengetahui,dimana yang sering saya lihat bayak yang membuat Contact Form dengan mengunakan fasilitas dari situs geratisan seperti www.123formbuilder.com,namun Tutorial Membuat Contact Form kali ini sedikit berbeda,dan untuk kelebihan script ini untuk pengiriman pesan sangat cepat.
Mungkin anda sudah penasaran bagaimana cara membuat halaman kontak pada blogger,yuk langsung saja kita simak tutorial dibawah ini :
Langkah Kedua : Silahkan Kembali kemenu Dasbor Blogger,dan klik pada menu Tema,lalu klik Edit HTML
Langkah Tiga : Silahkan salin kode dibawah ini dan letakan kode ini sebelum kode </head>
Langkah Empat : Kembali ke Dasbor Blogger,dan pilih menu Halaman,Lalu Buat Halaman Baru
Langkah Lima : Silahkan pada halaman pilih mode HTML Bukan Compose yang nantinya akan di isi kode script dibawah ini,silahkan copy kode ini dan masukan pada halaman yang sudah anda buat di mode HTML nya,pastekan di mode HTML
Langkah Ke Enam : Silahkan setelah anda pastekan kode diatas tadi,lalu klik Publikasikan dan lihat hasilnya.
Baik Mungkin cara ini sedikit berbeda dengan pembuatan Contact Form lainya,dimana cara yang admin berikan lebih mudah,dan keunggulan script ini,sangat bagus dan tertata rapi,dan dengan kecepatan pengeriman pesan ke pengguna situs yang optimal,semoga bermanfaat dan semoga berhasi,silahkan ikuti tutorial ini step by step agar hasil optimal,salam sukses dari seoblogger.id
Dalam dunia blogging Contact Form merupakan hal terpenting yang harus dimiliki oleh pemilik situs,dimana agar mempermudah para pengunjung menghubungi pemilik situs apabila ada hal hal penting yang ingin di sampaikan,selain dari pada ini,Contact Form juga berguna untuk mengumpulkan contact email,yang nantinya bisa kita buat untuk promosi produk.
Dan Halaman Kontak juga bisa berfungsi untuk membantu kita memperbaiki situs dari kekurangan - kekurangan yang kita sajikan,dengan cara mendapat masukan atau pemberitahuan oleh para pengunjung,seperti contoh,apa bila situs kita ada url yang mati alias tidak berfungsi,maka kita akan mengetahui dari masukan oleh pengunjung.
Mungkin untuk membuat Contact Form sudah banyak yang mengetahui,dimana yang sering saya lihat bayak yang membuat Contact Form dengan mengunakan fasilitas dari situs geratisan seperti www.123formbuilder.com,namun Tutorial Membuat Contact Form kali ini sedikit berbeda,dan untuk kelebihan script ini untuk pengiriman pesan sangat cepat.
Mungkin anda sudah penasaran bagaimana cara membuat halaman kontak pada blogger,yuk langsung saja kita simak tutorial dibawah ini :
Cara Membuat Halaman Kontak di Blog
Langkah Pertama : Silahkan anda buka Blogger,dan silahkan pilih menu Tata Letak,Kemudian buat gadget folmulir kontak.Langkah Kedua : Silahkan Kembali kemenu Dasbor Blogger,dan klik pada menu Tema,lalu klik Edit HTML
Langkah Tiga : Silahkan salin kode dibawah ini dan letakan kode ini sebelum kode </head>
<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>
#ContactForm1,#ContactForm1 br{display:none}
</style>
Langkah Empat : Kembali ke Dasbor Blogger,dan pilih menu Halaman,Lalu Buat Halaman Baru
Langkah Lima : Silahkan pada halaman pilih mode HTML Bukan Compose yang nantinya akan di isi kode script dibawah ini,silahkan copy kode ini dan masukan pada halaman yang sudah anda buat di mode HTML nya,pastekan di mode HTML
<form name="contact-form">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br /></div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /></div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea><br /></div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /><br /></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>
<br />
<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:100%;height:250px;margin:10px auto;padding:14px;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/AVvXsEgefF6zBdL7M1leFU8ppmsCuEs0K3D4pQHH9LaPm1vtIqpt-FYOD-gEsT_DYC8YwAtY5PBXCADK10W9aP93XhZMfOXa7vzBumP3j7n_NmMIf7qOZkX0dkCy0UmGpG0nSVs-TFHLwuilKowJ/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}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style><br />
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br />
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7342017194742683056';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7342017194742683056','//www.arlinadzgn.com/','7342017194742683056');
_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': '7342017194742683056', '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="" /><br /></div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /></div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea><br /></div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /><br /></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>
<br />
<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:100%;height:250px;margin:10px auto;padding:14px;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/AVvXsEgefF6zBdL7M1leFU8ppmsCuEs0K3D4pQHH9LaPm1vtIqpt-FYOD-gEsT_DYC8YwAtY5PBXCADK10W9aP93XhZMfOXa7vzBumP3j7n_NmMIf7qOZkX0dkCy0UmGpG0nSVs-TFHLwuilKowJ/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}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style><br />
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br />
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7342017194742683056';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7342017194742683056','//www.arlinadzgn.com/','7342017194742683056');
_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': '7342017194742683056', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Langkah Ke Enam : Silahkan setelah anda pastekan kode diatas tadi,lalu klik Publikasikan dan lihat hasilnya.
Baik Mungkin cara ini sedikit berbeda dengan pembuatan Contact Form lainya,dimana cara yang admin berikan lebih mudah,dan keunggulan script ini,sangat bagus dan tertata rapi,dan dengan kecepatan pengeriman pesan ke pengguna situs yang optimal,semoga bermanfaat dan semoga berhasi,silahkan ikuti tutorial ini step by step agar hasil optimal,salam sukses dari seoblogger.id
Posting Komentar