ZDIRY-TUFWT-EBONM-EYJ00-IDBLANTER.COM
ZDIRY-TUFWT-EBONM-EYJ00
BLANTERWISDOM105

Cara membuat material Design Contact Form di Blog

Tuesday, May 7, 2019
Nesiasite - Tutorial & Berita Teknologi - Cara membuat material Design Contact Form di Blog - Hallo teman-teman blogger indonesia, apa kabar kalian semua ? Pada kesempatan kali ini saya akan membagikansedikit tentang bagaimana cara kita membuat Desaign Form Contact Form di Blog. Dimana seperti yang teman-teman ketahui Contact us atau dalam bahasa indonesia Kontak kami. Biasanya Contact Us di letakan sejajar dengan About, Disclaimer, Privacy Policy dll. Fungsi Contact Us sendiri di sediakan agar Pengunjung situs tersebut dapat menghubungi admin blog atau situs secara privasi
Fungsinya seperti yang saya tulis di atas dan juga sebagai sarana bagi pengunjung blog untuk menghubungi admin blog, baik untuk menayaka seputar artikel yang di posting oleh admin blog atau memberikan kritik dan saran secara pribadi.
Meskipun sudah ada kolom komentar yang sudah di sedikan sebagai sarana untuk berkomentar atau tanya jawab. Contact Us tetap menjadi yang terpenting sebagai sarana di dalam Blog atau situ untuk bertanya secara Privasi atau Pribadi dengan Admin Situs atau Blog.
Oleh karena itu sekarang saya akan berbagi sedikit tutorialnya buat teman-teman semua pengunjung setia blog saya.


  Bagaimana, kalian tertarik untuk membuatnya ?

Masuk ke Blogger > Halaman >Halaman baru >Pada Navbar Pilih "HTML" bukan Compose
Jika sudah mempunya halaman contact teman-teman hanya perlu mengedit halaman yang sudah ada
masukan kode di bawah ini pada kolom halaman Contact Form tetapi pada mode HTML

<style scoped="scoped">.blanterinput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.blanterinput input,.blanterinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.blanterinput input:focus,.blanterinput textarea:focus{outline:none}.blanterinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:14px;color:#07ACEC}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.blanterinput input:focus ~ .bar:before,.blanterinput input:focus ~ .bar:after,.blanterinput textarea:focus ~ .bar:before,.blanterinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.blanterinput input:focus ~ .highlight,.blanterinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#07ACEC;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="pemulabro">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="blanterinput">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
Ganti kode //pemulabro.blogspot.com/ dengan URL blog kalian
Ganti Kode 886680089942071520715293

Untuk merubah warna dasar silahkan ubah #07ACEC dengan kode warna yang kalian inginkan

Kemudian Simpan. :)
loading...
Baca Juga
Share This :

0 Comments

loading...
Notification
Donasi yang kamu berikan akan saya gunakan untuk mengembangkan blog ini menjadi lebih baik.

Donate
 BANK BRI : 777201000999534 a/n Juan Karly Matheus.
 Paypal       : paypal.me/juanmatheus37
  PULSA       : 0823-9958-5050 (Telkomsel)
Done