إضافة أداة إتصل بنا بشكل رائع جدا

أكتوبر 24, 2017 omer mohamed

مرحبا بكم أعزائي متابعي محبي مدرسة المدون

اليوم معنا درس من قسم بلوجر إضافات بلوجر نقدم لكم إضافة رااائعة جدا و خرافية هي صفحةة إتصل بنا  التي لا تخلوا منها أي مدونة سواء عربية او اجنبية لانها أداة وصل بين الكاتب و الزائر و  نحن عادة نستعمل النموذج القديم و الممل و اليوم أتيت لكم بنموذج جميل  جدا بتقنية الماتيريال ديزاين و الان لنبدأ

صورة مصغرة:

معاينة الاضافة:

يمكنك معاينة الاضافة من هنا

طريقة التركيب:

الاضافة تعمل في القائمة الجانبية و لكن الافضل انشاء صفحة.

لتركيب الاضافة عليك اولا نسخ هذا الكود:

<style scoped="scoped">
.blanterinput{float:none;position:relative;margin-bottom:45px;margin-left: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: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:#007eff}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#007eff;transition:.2s ease all}.bar:before{right:50%}.bar:after{left: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%;right: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:#007eff}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{font-family: mahdi-font;color:#fff!important;background:#007eff;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:right;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:left;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:left;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style>
<br />
<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="إرسال" />
<br />
<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'] = '3016169896369434226072466681';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3016169896369434226072466681','//https://slblooger.blogspot.com//','3016169896369434226072466681');
_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;color:#fff">Message could not be sent. ;color:#fffPlease try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">البريد الإلكتروني غير صحيح.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px;color:#fff">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '3016169896369434226072466681', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

عليك تغيير بعض الاشياء:

استبدل المعرف id الخاص بمدونتي بمعرف مدونتك:

6369434226072466681

استبدل أيضا  رابط مدونتي برابط مدونتك:

https://slblooger.blogspot.com/

 و الان اذهب الى لوحة التحكم
اذهب الى الصفحات
انشئ صفحة جديدة
اذهب الى HTML احذف كل شيء و ضع الكودبعد ذلك انشر صفحة و مبروك الصفحة الرائعة.

مشاركة