السلام عليكم متابعي وزوار مدونة إتقان ويب، الإضافة اليوم رائعة وهي إضافة اتصل بنا باللغة ماتيريال ديزاين هذه الإضافة يمكن تركبيها في صفحة جديدة في القائمة العلوية ، فهي الإضافة مميزة خاصة للمصممين القوالب والإضافات ، وعلي ما يبدو أصبحت جوجل ناجحة في تطوير للغة ماتيريال ديزاين هذا العام ، فالكثير من مصممي المواقع أصبحوا يعتمدون علي هذه اللغة في التصميم ليس فقط في تصميم المواقع بل والتطبيقات وغير ذلك.
شرح تركيب الإضافة :

  1. من لوحة تحكم بلوجر ثم إلي قسم الصفحات.
  2. قم بإنشاء صفحة جديدة.
  3. وإذهب إلي تبويب HTML.
  4. وقم باللصق الكود التالي فيها.

<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>

  1. بعد للصق الكود قم بالتعديل علي ما هو باللون الأحمر كما يأتي.
  2.  كود اللون هذا قم بالتغيره كما تراه مناسب #07ACEC  إذا كنت تريد الألوان فلات فقم بالدخول علي هذا ألوان فلات
  3. قم بالتغير هذا العنوان 74937551861928285  إلي عنوان مدونتك يوجد في رابط لوحة تحكم بلوجر بعد هذه الجملة blogID=
ملاحظة : لا تنسي الانضمام إلي أعضاء المدونة والإعجاب بصفحتنا علي الفيس بوك والاشتراك في قناتنا علي اليوتيوب.
By