 |
| Tib2016-Cara Membuat Contact Blog Responsif Keren 2018 |
Cara Membuat Contact Responsif Keren Ala Tib2016:
1.Langkah pertama yaitu anda harus login terlebih dahulu pada Dasbhoard blog agan.2.Jika teman teman semua udah login pada Dasbhoared blog agan selanjutnya pilih Halaman.
3.Ketika anda sudah klik Halaman pilih Halam Baru.
4.Maka anda akan berada di tampilan seperti membuat artikel akan tetapi Compose anda ubah ke HTML.
5.Jika sudah agan ganti dengan HTML copy script di bawah ini.
<form name="contact-form">
<i class="fa fa-pencil-square-o"></i> Name <br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<br />
<i class="fa fa-envelope-o"></i> Email Address <br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<br />
<i class="fa fa-keyboard-o"></i> Content<br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div style="max-width: 222px; 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">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
6. Maka selanjutnya agan pastekan di HTML tersebut.
7.Sebelum anda mempublikasikan beri judul Contact dan selanjutnya Publikaskan.
Nah muda kan teman teman semua bagaimana cara membuat contact keren responsive keren ala tib2016, Langkah langkah di atas sama dengan pembuatan sitemap akan tetapi hanya beda script saja.Semoga artikel di atas bisa membantu dan bermanfaat untuk teman teman semua. Tolong share dan Tinggalkan jejak dengan berkomentar di bawah ini mengenai artikel cara membuat Contact pada blog. jika pada artikel ini ada kesalahan penulisan maupun kata kata yang tidak pantas saya atas nama admin minta maaf yang sebesar-besarnya.