Cara Membuat Kontak Responsive Di Halaman Statik Blog

Kontak responsive adalah kotak khusus yang di sediakan untuk menghubungi admin web atau blog yang akan di kirim langsung ke e-mail dengan tampilan yang bisa menyesuaikan diri dengan layar pengguna baik dari sisi desktop dan mobile.

Gambar di bawah ini adalah tampilan kontak responsive yang di gunakan oleh langsungkeblog dan gambar kedua adalah tampilan mobile.

Cara membuat kontak di halaman statik blog :

1. Buka blogger dan login
2. Pilih menu Pages dan klik tombol New Page
3. Selanjutnya pilih mode HTML dan paste-kan kode yang telah anda copy 
4. Publish

Copy kode ini dan pastekan di halaman page statik anda

<style scoped="scoped">
  .enterblogger-logo{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: #546de5;
    padding: 10px;
    background: #dde3ff;
    border-radius: 100px;}

.enterblogger-input{float:none;position:relative;margin-bottom:45px;margin-right:10px}.enterblogger-input input,.enterblogger-input textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.enterblogger-input input:focus,.enterblogger-input textarea:focus{outline:none}.enterblogger-input label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:14px;color:#546de5}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#546de5;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.enterblogger-input input:focus ~ .bar:before,.enterblogger-input input:focus ~ .bar:after,.enterblogger-input textarea:focus ~ .bar:before,.enterblogger-input textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.enterblogger-input input:focus ~ .highlight,.enterblogger-input textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:13px;color:#546de5}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#333333;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>
<form name="contact-form">
<div class="enterblogger-input">
<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="enterblogger-input">
<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">
contact_mail
</i> Email</label>
</div>

<div class="enterblogger-input">
<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">
message
</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'] = '4787299133103148973';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4787299133103148973','//langsungkeblog.blogspot.com/','4787299133103148973');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar3', 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': '4787299133103148973', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Catatan :
yang perlu di perhatikan adalah mengganti BlogID 4787299133103148973 dengan id blog anda.

kotak subscribe

Subscribe to receive free email updates: