Cara Membuat Halaman Contact Us di Blogger

cara membuat contact us di blogger
Cara Membuat Halaman Contact Us di Blogger

Cara Membuat Halaman Kontak (Contact Us) Pada Halaman Statis di Blogger - Dalam blog kurang lengkap rasanya jika kalian tidak memiliki sebuah halaman kontak pada bagian navigasinya. Memang ini juga tidaklah begitu wajib bagi kalian yang ingin memasang form kontak di blog, tetapi form kontak ini akan memudahkan para pengunjung blog kalian untuk sekedar berkomunikasi dengan kita selaku pengelola blog tersebut.

Halaman kontak (contact us) dibuat  sebagai pendukung kelengkapan pada navigasi sebuah blog yang biasanya letaknya disejajarkan atau bersebelahan dengan halaman about, disclaimer, privasi, tos dan juga partner, untuk partner ini opsional kadang ada yang memakai dan kadang juga ada yang tidak memakainya.

Halaman kontak (contact) ini memang hadir dengan fungsi utama yang dimana gunanya yaitu sebagai alat komunikasi antara pengelola dan pengunjung blog tersebut. Laman kontak yang dibuat di dalam blog biasanya sudah otomatis akan terhubung atau dikaitkan langsung dengan email pengelola blog tersebut.

Jadi misalnya ada pengunjung blog kalian yang ingin berkomunikasi dengan kalian bisa langsung menuju pada laman kontak tersebut lalu pengunjung blog kalian hanya tinggal mengisi form yang biasanya tediri antara lain nama, pesan dan email, lau klik button untuk kirim pesan. Selanjutnya nantinya pengelola blog akan menerima pesan dari pengunjung tadi via email pribadinya secara langsung.

Manfaat Mempunyai Halaman Kontak di Blog

Beberapa manfaat ini yang telah dirangkum, dimana nantinya manfaat yang didapatkan untuk pengunjung blog kalian, jika para pengunjung blog kalian mengirim pesan melalui laman kontak yang telah kalian pasang di blog yang kalian sedang kelola

Privasi

Dalam mengirim pesan melalui laman kontak diklaim sebagai cara yang lebih aman untuk menjaga kerahasiaan terkait identitas diri kita sebagai pengelola blog, dibandingkan dengan mengirim pesan melalui laman komentar. Jika kita diumpamakan sebagai pengunjung blog mengirimkan suatu pesan melalui laman kontak di blog.

Maka publik tidak akan mengetahui apa isi pesan yang telah dikirimkan kecuali pengujung blog dan pemilik blog tersebut. Hal ini juga berbeda jika kalian mengirimkan pesan lewat komentar tentu identitas diri kalian dapat dilacak dengan mudah.

Menghemat Waktu

Istilah yang sering kita dengan yaitu Waktu adalah uang yang menjadi slogan populer untuk para orang yang memiliki mobilitas tinggi dalam sektor hidupnya. Lalu kaitannya apa dengan laman kontak yang akan kalian buat?

Begini dalam mengirimkan pesan via laman kontak di blog memiliki suatu peluang yang dibalas lebih tinggi oleh pengelola blog dibanding dengan kalian berikirim pesan lewat sebuah komentar.

Bersifat Lebih Personal

Sebagian dari para pengunjung blog atau web terbiasa basa-basi didalam berkomentar di sebuah blog atau web. Bahkan juga dari kebanyakan komentar cenderung disalah gunakan untuk ajang bercandaan saja.

Sebenarnya ada juga sih untuk para pengunjung yang berkomentar berbobot sesuai dengan isi dan topik yang disajikan kalian dalam membuat artikel. Namun biasanya para pengunjung yang berkarakter seperti itu persentasenya sangatlah sedikit dan jarang juga untuk kita temui.

Cara Membuat Halaman Kontak (Contact US) Pada Halaman Statis di Blogger

  1. Silahkan login ke akun blogger,
  2. Pilih Laman >> Laman Baru
  3. Buat Judul dengan Contact Us
  4. Copy kode HTML contact form dibawah ini.
  5. Paste pada Mode HTML bukan Compose
<style>
  /*<![CDATA[*/
  
  .contact-form-box {
    width: 100%;
    margin: 20px auto;
    padding: 0
  }
  
  #contactForm .floating-label-form-group {
    font-size: 16px;
    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: #C51162;
    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: 16px;
    font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",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-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: #C51162
  }
  
  #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:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",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: #C51162;
    border: 1px solid #be403a;
    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;
  }
  .fa.fa-pull-left,.fa.pull-left{margin-right:.3em}.fa,.fa-stack{display:inline-block}.fa-fw,.fa-li{text-align:center}@font-face{font-family:FontAwesome;src:url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.eot?v=4.6.0);src:url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.eot?#iefix&v=4.6.0) format('embedded-opentype'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.woff2?v=4.6.0) format('woff2'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.woff?v=4.6.0) format('woff'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.ttf?v=4.6.0) format('truetype'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.svg?v=4.6.0#fontawesomeregular) format('svg');font-weight:400;font-style:normal}.fa{font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa.fa-pull-right,.fa.pull-right{margin-left:.3em}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right,.pull-right{float:right}.pull-left{float:left}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{filter:none}.fa-stack{position:relative;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}
  .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>

<div class="contact-form-box">
<div>
Silahkan isi form di bawah ini untuk menghubungi admin blog. </div>
<br />
<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'] = '8651244672288910445';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8651244672288910445','//www.ruangcoder.com/','8651244672288910445');
_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": "8651244672288910445", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>
Perhatian!
Silahkan ganti ID Blog : 8651244672288910445 dengan ID Blog lihat URL kalian
Kemudian Ganti URL Blog ruangcoder.com dengan url kalian

Penutup

Nah mungkin tutorial Cara Membuat Halaman Kontak (Contact US) Pada Halaman Statis di Blogger nya sampai sini saja, sangat mudah bukan, itu nanti otomatis masuk ke gmail kalian, tentunya gmail yang nyangkut buat login ke Blogger kalian ya, langsung di cek saja, jadi sekian dulu tutorialnya , semoga bermanfaat ya, jangan lupa di share tutorial nya, jika bermanfaat Terimakasih.