السلام عليكم متابعي وزوار مدونة إتقان ويب، الإضافة اليوم رائعة وهي إضافة اتصل بنا باللغة ماتيريال ديزاين هذه الإضافة يمكن تركبيها في صفحة جديدة في القائمة العلوية ، فهي الإضافة مميزة خاصة للمصممين القوالب والإضافات ، وعلي ما يبدو أصبحت جوجل ناجحة في تطوير للغة ماتيريال ديزاين هذا العام ، فالكثير من مصممي المواقع أصبحوا يعتمدون علي هذه اللغة في التصميم ليس فقط في تصميم المواقع بل والتطبيقات وغير ذلك.
شرح تركيب الإضافة :
- من لوحة تحكم بلوجر ثم إلي قسم الصفحات.
- قم بإنشاء صفحة جديدة.
- وإذهب إلي تبويب HTML.
- وقم باللصق الكود التالي فيها.
<div dir="rtl" style="text-align: right;" trbidi="on">
<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;RIGHT:5px;top:1px;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="blanterinput">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>الاسم</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>البريد الالكتروني</label>
</div>
<div class="blanterinput">
<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>الرسالة</label>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />
<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'] = '74937551861928285';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d74937551861928285','//itqanwebs.blogspot.com/','74937551861928285');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">إرسال...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">الرسالة تم إرسالها.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">الرسالة لم ترسل . حاول مرة ثانية</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': '74937551861928285', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script></div>
- بعد للصق الكود قم بالتعديل علي ما هو باللون الأحمر كما يأتي.
- كود اللون هذا قم بالتغيره كما تراه مناسب #07ACEC إذا كنت تريد الألوان فلات فقم بالدخول علي هذا ألوان فلات
- قم بالتغير هذا العنوان 74937551861928285 إلي عنوان مدونتك يوجد في رابط لوحة تحكم بلوجر بعد هذه الجملة blogID=
ملاحظة : لا تنسي الانضمام إلي أعضاء المدونة والإعجاب بصفحتنا علي الفيس بوك والاشتراك في قناتنا علي اليوتيوب.