Membuat Contact Page Blogger

Contact Person merupakan bagian penting dari sebuah blog atau website, kita bisa saja menambahkan contact dari widget yang sudah disediakan oleh blogger namun ada sebagian yang kurang puas hanya dengan widget blogger, maka memutuskan untuk membuat contact person dalam sebuah page yang didalamnya kita bisa menambah sosial media sebagai contact yang dicantumkan. atau bahkan ada yang sudah mencoba manambah widget contact namun widget tersebut tidak berfungsi, tidak mau mengirimkan pesan dari sistem blogger pada email kita.

Kali ini mari kita buat dan belajar bersama-sama.
Pertama-tama pastikan <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2647409398-widgets.js"></script> ada saat blog kita diakses, itu merupakan script bawaan blogger yang tidak terlihat dalam template editor dan untuk melihatnya klik kanan pada blog lalu pilih View Page Source maka kurang lebih tampilannya seperti gambar berikut

Pastikan link script berwarna biru, jika lik script berwarna hijau berarti script tersebut tidak berjalan, hanya menjadi sebuah keterangan walaupun script itu ada.

Yang kedua, pasang script widget contact berikut pada markup yang menampung widget seperti sidebar atau footer, bisa juga dipasang melalui menambahkan widget pada halaman tata letak blogger pilih yang paling mudah.

 <b:section class='contactpop tl-contact-form' id='contactpop' maxwidgets='1'>
   <b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm' version='1'>
     <b:includable id='main'>
  <div class='contact-form-widget'>
    <span class='closecontact'>&#61453;</span>
    <div class='form'>
      <form name='contact-form'>
       
        <data:contactFormNameMsg/>
         <p>your name</p>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
         <p>Your Email</p>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>

<p>your message</p>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
   </b:widget>
 </b:section>

Yang ketiga buat halaman baru dan pasang script berikut pada html mode.

<div class="contact-us-form">
<form name="contact-form">
<div class="form-hint">
Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' />
<div class="form-hint">
Your Email: <em>*</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/>
<div class="form-hint">
Subject:</div>
<input class='contact-form-subject' id='ContactForm1_contact-form-email' name='subject' value="Subject"  size='30' type='text' onblur='if (this.value == "") {this.value = "Subject";}' onfocus='if (this.value == "Subject") {this.value = "";}'/>
<div class="form-hint">
Your Message: <em>*</em></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == "") {this.value = "Leave Your Message..";}" onfocus="if (this.value == "Leave Your Message..") {this.value = "";}" value="Leave Your Message.."></textarea> 
<input class='button red' type='reset' value='Clear'/> 
<input class="button green" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div style="max-width: 500px; text-align: center; width: 100%;">
<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>
</div>
</form>
</div>

Yang keempat percantik kolom dengan css berikut - sesuaikan warna dengan tema blog yang digunakan.

.contactpop{position:fixed;width:230px;top:50%;margin-top:-200px;z-index:101;left:50%;margin-left:-115px;background:$(content.bg);display:none;-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2);}
.contactpop .form{padding:15px}
.contact-form-widget{position:relative;}
.closecontact{position: absolute;display:inline-block;right:0;top:0;background:$(keycolor);color:#fff;width:30px;height:30px;cursor:pointer;text-align:Center;line-height:30px!important;font:400 15px 'fontawesome';}
.closecontact:hover{background:#222}
.contactpop .contact-form-name,.contactpop .contact-form-email,.contactpop .contact-form-email-message{padding:5px;background:$(body.meta.bg);width:200px;border:none;margin-bottom:5px;outline:none}
.contactpop p{font:italic 400 13px 'open sans',sans-serif;color:#bbb;margin:0 0 5px 0}
.contact-form-button{padding:5px 0;width:100%;background:$(keycolor);text-align:Center;border:none;height:40px;outline:none;}
.contact-form-button:hover{background:#222}
.tl-col-inner{padding:0 25px}
.tl-col-inner.contact-address ul{padding:0}
.tl-col-inner.custom-contact-form .button, input.button{border:none;outline:none;}
.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-subject,.contact-form-country{max-width:100%;width:100%}
.contact-us-form form{margin:0}
.contact-us-form .contact-form-name,.contact-us-form .contact-form-email,.contact-us-form .contact-form-subject,.contact-us-form .contact-form-email-message,.contact-form-email-message{display:inline-block;font-size:13px;height:30px;margin:0;padding:20px 15px 20px 10px;vertical-align:top;box-sizing:border-box;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
.contact-us-form .contact-form-name,.contact-us-form .contact-form-email,.contact-us-form .contact-form-subject,.contact-us-form .contact-form-email-message{background:#FFF;color:#a1b1bc;border:1px solid rgba(0,0,0,0.1)}
.contact-us-form .contact-form-email-message{padding-top:10px;margin-bottom:10px;vertical-align:top;height:120px}
.contact-form-name:hover,.contact-form-email:hover,.contact-form-subject:hover,.contact-form-email-message:hover{border:1px solid rgba(0,0,0,0.2);box-shadow:none}
.contact-form-name:focus,.contact-form-email:focus,.contact-form-subject:focus,.contact-form-email-message:focus{border:1px solid rgba(0,0,0,0.2);box-shadow:none;outline:none}
.form-hint{padding:10px 0;font-weight:bold;font-size:14px}
.form-hint em{color:red}
.button,input.button{position:relative;display:inline-block;margin-right:1em;margin-bottom:1.34em;padding:0.667em 2em;border-bottom:none;-webkit-border-radius:0.333em;-moz-border-radius:0.333em;border-radius:0.333em;background-color:rgba(84,87,102,1);color:#FFFFFF!important;text-decoration:none!important;text-transform:uppercase;font-size:0.778em!important;line-height:1.714em!important;cursor:pointer}
.button,input.button{-webkit-transition:background-color 0.3s linear,color 0.3s linear;-moz-transition:background-color 0.3s linear,color 0.3s linear;transition:background-color 0.3s linear,color 0.3s linear}
.button:hover,input.button:hover{border-bottom:none;background-color:rgba(84,87,102,0.9)}
.button:active,input.button:active{box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1)}
.button i{margin-right:0.667em;vertical-align:middle;line-height:1em!important}
.button.red,input.button.red{background-color:rgba(253,104,91,1)}
.button.red:hover,input.button.red:hover{background-color:rgba(253,104,91,0.9)}
#ss-form input:focus ~ label,#ss-form textarea:focus ~ label,#ss-form input:valid ~ label,#ss-form textarea:valid ~ label{font-size:0.75em;color:#1788e7;/* #8e44ad;*/
  top:-2.25rem;-webkit-transition:all 0.125s ease;transition:all 0.125s ease}
#ss-form .styled-input{width:33.3333%;margin:2rem 0 1rem;padding:0;position:relative}
#ss-form .styled-input-in{position:relative}
#ss-form .styled-input label{color:#999;padding:1rem;position:absolute;top:0;left:0;-webkit-transition:all 0.25s ease;transition:all 0.25s ease;pointer-events:none;line-height:1;font-family:"Helvetica","Arial",sans-serif}
#ss-form .styled-input.wide{width:100%}
#ss-form input,#ss-form textarea{padding:1rem 1rem;border:1px solid #ddd;width:100%;font-size:1rem;background:#fafafa;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Helvetica","Arial",sans-serif}
#ss-form input ~ .span1,#ss-form textarea ~ .span1{display:block;width:0;height:3px;background:linear-gradient(90deg,#ce0a46,#e98125);/* #8e44ad;*/
  position:absolute;left:50%;-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}
#ss-form input ~ .span2,#ss-form textarea ~ .span2{display:block;width:0;height:3px;background:linear-gradient(90deg,#ce0a46,#e98125);/* #8e44ad;*/
  position:absolute;right:50%;-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}
#ss-form input ~ span{bottom:0}
#ss-form input:focus,#ss-form textarea:focus{outline:0}
#ss-form input:focus ~ .span1,#ss-form textarea:focus ~ .span1,#ss-form input:focus ~ .span2,#ss-form textarea:focus ~ .span2{width:50%}
#ss-form textarea{width:100%;min-height:15em}
#ss-form .btn{font-family:"Helvetica","Arial",sans-serif;text-transform:uppercase;font-size:14px;font-weight:800;letter-spacing:1px;border-radius:0;padding:0 25px;height:51px;line-height:51px;color:#333;background-color:#fafafa;border:1px solid #ddd;cursor:pointer;margin:10px 0 0;background-image:none}
#ss-form .btn-default:hover,#ss-form .btn-default:focus{background-color:#2f303f;
  border:1px solid #000;
  color:white;outline:0}
#iframe_uexxnchh{display:none}
@media (max-width:600px){#ss-form .styled-input{width:100%}}

Demo