Membuat Halaman Kontak di Blogspot | Menambahkan halaman kontak di blogspot yang kita miliki memang tidak wajib hukumnya.
Akan tetapi untuk beberapa keadaan semisal jika ada pihak yang ingin menghubungi kita karena mereka ingin bekerjasama dengan kita, tentunya kita perlu menempatkan informasi mengenai kontak kita. Seperti, email, nomor hp, id line, dan lain sebagiannya.
Setiap blogger memiliki caranya masing-masing dalam membuat format halaman kontaknya. Ada yang menempatkan kolom kontak di widget, ada yang di footer, dan yang paling banyak dilakukan dibuat pada satu halaman khusus.
Pada kesempatan kali ini, kita akan membahas mengenai cara membuat halaman kontak di blogspot menggunakan widget bawaan blogger, menggunakan HTML dan CSS, dan melalui pihak ketiga
Namun sebelum lanjut ke tutorialnya, buat kamu yang menyukai pembahasan mengenai linux, silahkan baca di sini
3 Cara Membuat Halaman Kontak Responsive di Blogspot
Cara Pertama – Membuat Halaman Kontak di Blogspot menggunakan Widget bawaan Blogger
Mengapa selayaknya kamu membuat formulir kontak menggunakan format resmi dari blogger?
dilansir dari masterblogging.com ada 4 keunggulan membuat formulir contact menggunakan widget bawaan blogger
- Kita akan menerima pesan begitu orang mengirimnya. Dan, hasil pengirimannya juga aman serta tidak mengalami perubahan.
- Tampilan yang sederhana sehingga memudahkan pengunjung untuk menghubungi kita.
- Dalam pembuatannya kita tidak perlu menggunakan bahasa program seperti HTML dan CSS, sehingga untuk proses pembuatannya tidak terlalu ribet.
- Seluruh halaman tidak akan dimuat ulang untuk mengirim pesan.
Membuat Formulir Kontak di blogspot menggunakan widget bawaan
Langkah 1: Kunjungi blogger.com dan masuk ke akun kamu. Jika kamu memiliki banyak blog, kamu harus memilih blog yang ingin dibuat halaman contactnya
Langkah 2: Jika sudah masuk ke blog yang dituju, Klik Tata Letak dari bilah sisi kiri agar kita bisa menambahkan gadget baru.
Langkah 3: Kemudian klik “Add a Gadget” untuk menambahkan gadget baru.
Langkah 4: Lalu, pilih more gadget yang ada di sisi kiri. Sekarang, kamu akan melihat Formulir Kontak. Klik “contact form” untuk menambahkannya
Selesai.
Bagaimana? mudah bukan cara membuat formulir kontak di blogspot menggunakan widget bawaan blogger?
Lanjut ke cara yang lainnya
Cara Kedua – Membuat Halaman Kontak di Blogspot menggunakan Bahasa Program
Pada cara yang kedua ini, kita akan menambahkan satu halaman khusus untuk membuat formulir contact di blogspot.
Untuk souce code nya saya dapatkan dari blog keren yaitu analisyuki.com
Pada bagian ini, saya akan membagikan beberapa versi formulir kontak dengan tampilan yang berbeda-beda.
Nantinya kamu tinggal pilih tampilan mana yang kamu anggap cocok dengan tampilan blogmu
Cara membuat contact form responsive di blogger
Langkah 1 : Masuk ke akun blog kamu yang akan ditambahkan formulir kontaknya
Langkah 2 : Setelah masuk, pilih menu halaman dan klik Tambahkan halaman baru
Langkah 3 : Jika sudah tampil halaman editnya, ubah dari compose ke html
Langkah 4 : Lalu, tempelkan kode formulir kontak responsive untuk blogger sesuai versi yang kamu inginkan
Formulir Kontak Blogspot – Versi 1
<style scoped="" type="text/css">
/*<![CDATA[*/
.contact-form-box {width: 100%;margin: 20px auto;padding: 0}
#contactForm .floating-label-form-group {font-size: 14px;position: relative;margin-bottom: 0;padding-bottom: 20px;border-bottom: 1px solid #ddd}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus {position: relative}
#contactForm .floating-label-form-group:after,
#contactForm .floating-label-form-group:before {position: absolute;bottom: -1px;width: 0;height: 2px;background-color: #36d7b7;content: "";transition: width .4s ease-in-out;display: block}
#contactForm .floating-label-form-group:before {right: 50%}
#contactForm .floating-label-form-group:after {left: 50%}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:after,
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:before {width: 50%}
#contactForm .floating-label-form-group input,
#contactForm .floating-label-form-group textarea {z-index: 1;position: relative;padding-right: 0;padding-left: 0;border: none;border-radius: 0;font-size: 14px;font-family: Roboto, Arial, sans-serif;font-weight: 400;background: 0 0;box-shadow: none!important;resize: none}
#contactForm .floating-label-form-group label {display: block;z-index: 0;position: relative;top: 2em;margin: 0;font-size: 12px;font-family: Roboto, Arial, sans-serif;font-weight: 300;line-height: 1.764705882em;vertical-align: middle;vertical-align: baseline;opacity: 0;
-webkit-transition: top .3s ease, opacity .3s ease;
-moz-transition: top .3s ease, opacity .3s ease;
-ms-transition: top .3s ease, opacity .3s ease;
transition: top .3s ease, opacity .3s ease
}
#contactForm .floating-label-form-group::not(:first-child) {padding-left: 14px;border-left: 1px solid #eee}
#contactForm .floating-label-form-group-with-value label {top: 0;
opacity: 1}
#contactForm .floating-label-form-group-with-focus label {color: #36d7b7}
#contactForm {border-top: 1px solid #ddd}
#contactForm textarea.form-control {height: auto}
#contactForm .form-control {display: block;width: 100%;color: #555}
#contactForm input:active,
#contactForm input:focus,
#contactForm textarea:active,
#contactForm textarea:focus {
outline: 0
}
#contactForm .btn,
#contactForm .contact-form-button-submit {font-family: Roboto, Arial, sans-serif;font-weight: 700;text-transform: uppercase;font-size: 18px;letter-spacing: 1px;border-radius: 0;padding: 0 25px;height: 51px;line-height: 51px;color: #333;background-color: #fff;border: 1px solid #ccc;cursor: pointer;margin: 20px 0 0;background-image: none}
#contactForm .contact-form-button {height: 51px;line-height: 51px}
#contactForm .btn-default:focus,
#contactForm .btn-default:hover,
#contactForm .contact-form-button-submit:focus,
#contactForm .contact-form-button-submit:hover {background-color: #36d7b7;border: 1px solid #36d7b7;color: #fff}
.contact-form-error-message-with-border,
.contact-form-success-message-with-border {background: #fff;border: 1px solid #ddd;bottom: 0;box-shadow: 0 2px 4px rgba(0, 0, 0, .2);color: #666;font-size: 16px;font-weight: 400;line-height: 30px;opacity: 1;position: static;text-align: center;margin: 20px 0 0}
.contact-form-cross {height: 11px;margin: 0 5px;vertical-align: 0!important;width: 11px;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-goog-ms-box-shadow: none!important;
box-shadow: none!important}
.contact_layout {text-align: center;position: fixed;top: 0;left: 0;bottom: 0;right: 0;background:rgba(0, 0, 0, .8);z-index: 99999}
.contact_message {width: 50%;background: #fff;border-radius: 5px;padding: 20px;border: 1px solid transparent;text-align: center;color: #333;position: absolute;top: 10%;left: 50%;margin-left: -25%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;box-sizing: border-box;}
.contact_message:before {content: "\f164";font-family: FontAwesome;font-weight: 500;font-size: 30px;display: block;margin-bottom: 10px;}
@media screen and (max-width:768px) {
.contact_message {width: 90%!important;margin-left: -45%!important;}
.contact-form-box {width: 100%;}
}
/*]]>*/
</style>
<br />
<div class="contact-form-box">
<div>
Jika ada sesuatu yang ingin ditanyakan secara probadi, anda bisa mengirimkan email melalui form di bawah ini.<br />
<b><br /></b></div>
<form id="contactForm" name="contact-form">
<div class="floating-label-form-group">
<label>Name</label>
<input class="form-control" id="ContactForm1_contact-form-name" name="name" placeholder="Name" type="text" value="" /> </div>
<div class="floating-label-form-group">
<label>Email Address</label>
<input class="form-control" id="ContactForm1_contact-form-email" name="email" placeholder="Email Address" type="text" value="" /> </div>
<div class="floating-label-form-group">
<label>Message</label>
<textarea class="form-control" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
</div>
<input class="btn btn-default" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<br />
<div class="clear">
</div>
<div style="max-width: 100%; text-align: left; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script>
$(function() {
$("body").on("input propertychange", ".floating-label-form-group", function(e) {
$(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
}).on("focus", ".floating-label-form-group", function() {
$(this).addClass("floating-label-form-group-with-focus");
}).on("blur", ".floating-label-form-group", function() {
$(this).removeClass("floating-label-form-group-with-focus");
});
});
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'id blog anda';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1877745665889604279','url blog anda','id blog anda');
_WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "<div class='contact_layout'>
<div class='contact_message'>
<b>Your message has been sent</b>.<br/>Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.</div>
</div>
<br/>", "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": "id blog anda", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>Formulir Kontak Blogspot – Versi 2
<div class="analisyuki-icon">
<i class="material-icons md-48">contact_mail</i>
</div>
<br />
Jika ada sesuatu yang ingin ditanyakan secara pribadi, anda bisa mengirimkan email melalui form di bawah ini. Admin akan langsung merespon pesan yang anda kirim, terimkasih.<style scoped="scoped">
.analisyuki-icon{text-align:center;}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: inherit;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
vertical-align:middle;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
.md-48{font-size: 100px;
color: #1E8BC3;
padding: 10px;
background: #dde3ff;
border-radius: 100px;}
.analisyuki-code{float:none;position:relative;margin-bottom:45px;margin-right:10px}.analisyuki-code input,.analisyuki-code textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.analisyuki-code input:focus,.analisyuki-code textarea:focus{outline:none}.analisyuki-code label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.analisyuki-code input:focus ~ label,.analisyuki-code input:valid ~ label,.analisyuki-code textarea:focus ~ label,.analisyuki-code textarea:valid ~ label{top:-20px;font-size:14px;color:#f14062}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#f14062;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.analisyuki-code input:focus ~ .bar:before,.analisyuki-code input:focus ~ .bar:after,.analisyuki-code textarea:focus ~ .bar:before,.analisyuki-code textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.analisyuki-code input:focus ~ .highlight,.analisyuki-code textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.analisyuki-code input:focus ~ label,.analisyuki-code input:valid ~ label,.analisyuki-code textarea:focus ~ label,.analisyuki-code textarea:valid ~ label{top:-20px;font-size:13px;color:#f14062}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#000000;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style>
<br />
<form name="contact-form">
<div class="analisyuki-code">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
account_circle
</i> Name</label>
</div>
<div class="analisyuki-code">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
email
</i> Email</label>
</div>
<div class="analisyuki-code">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
mode_comment
</i> Message</label>
</div>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" rel="stylesheet"></link>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
<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'] = '6154920600666252113';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d6154920600666252113','//analisyuki.com/','6154920600666252113');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '6154920600666252113', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>Nah, jika kamu sudah memilih dan menentukan versi mana yang akan kamu pakai untuk halaman kontak responsive di blogger, kamu tinggal klik publishkan.
Cara Ketiga – Membuat Halaman Kontak di Blogspot menggunakan 123FormBuilder
Jika kamu suka akan sesuatu yang simpel dan tidak ribet maka membuat halaman kontak responsive di blogger menggunakan pihak ketiga 123formbuilder adalah jawabannya.
Kita hanya perlu melakukan registrasi, mengatur form, mendapatkan kode, dan menempelkannya di blog kita. Mudah sekali bukan?
Cara membuat contact form responsive di blogger menggunakan 123form builder
Langkah 1 – Pergi ke 123FormBuilder dan Buat Akun Baru
Langkah 2 – Jika kamu sudah membuat akunnya, Masuk ke Dasbor Anda dan Klik Panah Di sebelah Tombol Buat Formulir Baru. Klik pada formulir kontak & opsi Timbal formulir.
Form Kontak Akan Muncul Di Halaman Kedua Yang Siap Digunakan. Kamu dapat menambahkan bidang tambahan apa saja yang kamu inginkan dengan mengklik tombol bidang.
Klik tombol save dan publikasikan.
Langkah 3 – Kita akan mendapatkan kode, Salin kode tersebut.
Langkah 4 – Pergi ke dashboard aku Blogger kamu dan klik tambahkan halaman baru. Beri nama halaman ini “Hubungi Kami”.
Langkah 5 – Klik tombol editor format HTML dan tempel kode di sini (Tekan CTRL + V untuk menempel) dan klik publish.
Selesai.
Nah, dari 3 cara membuat halaman kontak untuk blogspot di atas, mana yang kamu pilih? dan apa alasannya? Tulis jawabanmu di komentar ya
Sekian untuk artikel Cara Membuat Halaman Kontak Responsive di Blogspot
Semoga bermanfaat dan jangan lupa sholawat
Would you be interested in submitting a guest post on georgemartjr.com or possibly allowing us to submit a post to bingungonline.com ? Maybe you know by now that links are essential
to building a brand online? If you are interested in submitting a post and obtaining a link to bingungonline.com , let me know and we will get it published in a speedy manner to our blog.
Hope to hear from you soon
George
You can contact me on email
Tampilan kontak sangat bagus dan yang paling penting sudah responsive. Terimakasih