recent
أخبار ساخنة

انشاء صفحة اتصل بنا بشكل احترافى بالماتيريال ديزاين

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

ويمكنك معاينة مميزات أداة أتصل بنا من الرابط فى الأسفل وايضا تحميل أكواد الإضافة حتى يمكنك تركيبها على مدونتك والإضافة سهل جدا فى تركيبها لانها تعمل بكود واحد فقط سوف تقوم بوضعه كم فى شرح التركيب .

انشاء صفحة اتصل بنا بشكل احترافى بالماتيريال ديزاين

معاينة وتحميل الأكواد



صورة من الإضافة




شرح التركيب



  • كما قلت لكم فأن الإضافة تتمثل فى كود واحد سوف تقوم بوضع هذا الكود فى صفحة جديده فى مدونتك من قسم الصفحات .
<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: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="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'] = '2758866356417450830';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2758866356417450830','//wdbloog.blogspot.com/','2758866356417450830');
_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">برجاء أدخال بريد الكترونى صحيح.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '2758866356417450830', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>


  • الأن بعد وضعك للكود فى الصفحة سوف تبحث عن الكود هذا2758866356417450830وسوف تجده مكرر أربع مرات وهو محدد باللون الأحمر فى الكود فى الأعلى وسوف تقوم ايضا بتغيير رابط مدونتى هذاwdbloog.blogspot.comبرابط مدونتك وهو ايضا محدد باللون الأحمر.
  • الكود الأول الذى سوف تقوم بتغييره هو معرف او id الخاص بمدونتك سوف تجدها عندما تدخل مدونتك فى رابط المدونة الخاص به فى بلوجر كما هذه الصورة التالى 




  • وفى هذا الاضافة لن تحتاج الى اضافة نموذج الأتصال فى التخطيط لأن هذا الإضافة بها كل شئ ولكن اذا لم تعمل معك يمكنك وضع نموذج الأتصال فى التخطيط وسوف تعمل معك .


    هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .
    google-playkhamsatmostaqltradent