Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Contact Blog Responsif 2018

Tib2016-Hallo apa kabar semua, Setelah kemarin saya update tentang bagaimana cara membuat navigasi sitemap selanjutnya saya akan membagikan tutorial masi seputar dunia blogging dan juga masi berhubungan dengan Navigasi yakni Bagaimana cara Membuat Contact Responsif dan Keren ala Tib2016.Contact ini adalah sebuah navigasi yang bertujuan untuk bisa memberi laporan atau berlangganan pada blog. Jadi dengan adanya Contact ini para pengunjung dapat memberikan saran atau kritikan terhadap blog dan juga dapat bercontact langsung dengan si pembuat Blog. Cara nya anda cukup ngisi nama, alamat email dan pesan anda kemudian tinggal send maka akan sampai di email si pembuat blog tersebut.

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.