Berbagi Info

Beranda
Tutorial Blogger

Update Cara membuat contact us di Blogger


Pertama kita masuk ke Dashboard Blogger 
- Pilih Tata Letak
- Tambahkan Gatget
- Pilih folmulir kontak
- dan Simpan
- Lalu kita  pilih Tema dan Edit Html
- Tambahkan kode css di bawah ini di atas kode </head>
<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>

-  dan Simpan

Untuk selanjutnya kita Buat Halaman Baru dan beri judul Contact Us atau di sesuaikan dengan keingan dan isi dengan kode di bawah ini 
<form name="contact-form">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
</div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
</div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="7"></textarea>
</div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</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>

<style scoped="" type="text/css">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{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:-15px 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/AVvXsEgWW7x6u1K3ooDb9kG13T82BOy7dg21DPJ9bp6LqAHWwtnLE-dL6FKgFGJfwe18dXqvZC8H6Iyp3kEFgEqX3HIm5A_dQNjwmGYo5NsnE3xKA5zU20S1taBwiNv0v4_IBbKWcbmw3FHJFvSQ/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:-25px}
#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:20px}
form{color:#888}
.formcolumn1,.formcolumn2{margin:0 15px 0 0;padding:0 15px 0 0}
</style>
jangan lupa di Opsi kita pilih Jangan izinkan, sembunyikan yang telah ada lalu Publikasikan.

Untuk demo nya bisa di lihar di sini .

Dan lihatlah hasil nya. Semoga berhasil dan semoga positingan ini bermanfaat.