Cara Memasang Material Design Contact Form Di Blogger

Kamis, 28 Juli 2016

Bagikan :

Tweet

Contact Form adalah sebuah elemen penting di dalam blog , dari sinilah pengunjung bisa menanyakan ataupun mengeluhkan sesuatu terkait dengan blog anda . jadi anda harus membuatnya dan meletakkannya di blog anda , dan jika anda rasa itu tidak perlu maka jadikanlah contact form itu menarik dan enak dilihat sehingga ini menjadi sebuah elemen menarik yang sangat penting .

Namun bagaimana cara membuatnya menjadi menarik dan enak dipandang ? caranya sangat mudah sobat hanya tinggal meletakkan sedikit script dan merubah beberapa bagian . Disini saya akan mengajari sedikit bagaimana cara memasang material design contact form di blog. 

Untuk itu ikuti langkah-langkahnya .

1.Buka Blogger.com 
2.Klik Laman lalu Laman Baru 
3.Pilih Mode HTML bukan mode Compose
4.Masukkan html berikut

<style scoped="scoped">
.meganewsinput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.meganewsinput input,.meganewsinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.meganewsinput input:focus,.meganewsinput textarea:focus{outline:none}.meganewsinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.meganewsinput input:focus ~ label,.meganewsinput input:valid ~ label,.meganewsinput textarea:focus ~ label,.meganewsinput 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%}.meganewsinput input:focus ~ .bar:before,.meganewsinput input:focus ~ .bar:after,.meganewsinput textarea:focus ~ .bar:before,.meganewsinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.meganewsinput input:focus ~ .highlight,.meganewsinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.meganewsinput input:focus ~ label,.meganewsinput input:valid ~ label,.meganewsinput textarea:focus ~ label,.meganewsinput 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="meganewsinput">
<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="meganewsinput">
<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>
</div>
<div class="meganewsinput">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label>Message</label>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '8866800899420715293';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8866800899420715293','//meganews.com/','8866800899420715293');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '8866800899420715293', 'contactFormNameMsg': 'Nama', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Pesan', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

5.Ganti  tulisan //Meganews.com/  dengan url blog sobat
6.Ganti angka 8866800899420715293 dengan blog id sobat yang terdapat pada url blogger.com ( bisa dilihat di url dasbor blog sobat ).

setelah itu silahkan klik publikasikan dan lihat halaman sobat 

Tag : Tutorial Blog