الأربعاء، 23 مايو 2018

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

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

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

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

كيفية إنشاء صفحة إتصل بنا لمدونات بلوجر

شرح تركيب الإضافة

طريقة التركيب بسيطة ويعتبر نوذج الاتصال هذا من افضل واحسن نماذج اتصالات بلوجر ،تقوم بنسخ كود نموذج الاتصال التالى وتقوم بالذهاب الى قسم الصفحات وتُنشئ صفحة جديدة ثم تنتقل الى تبويت الـ HTML وتضع كود الصفحة به وتقوم بالتعديل على التعليمات وتغير الايقونة التى فى بداية كل امر من صفحة ايقونات FontAwesome


<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<h4 style="text-align: right;">
للإتصال بنا احرص على مراعاة القواعد التالية:</h4>
<div class="postdescription">
&nbsp;أشكرك على رغبتك في مراسلتنا، لكن رجاءً قبل ذلك، اقرأ التالي :<br />
<i class="fa fa-bullhorn"></i>&nbsp;تأكد من كتابة عنوانك البريدي على وجهه الصحيح وتوضيح الرسالة.<br />
<i class="fa fa-bullhorn"></i>&nbsp;نقوم بعمل التبادل اعلاني مع جميع المواقع،قم بتقديم طلب من&nbsp;<a href="http://arads4tech.blogspot.com/p/blog-page_18.html" target="_blank">هنا</a>.<br />
<i class="fa fa-bullhorn"></i>&nbsp;لأي مشكل فالمرجو وضعه مباشرة على&nbsp;<a href="http://arads4tech.blogspot.com/p/blog-page_77.html" target="_blank">ركن الأسئلة</a>.<br />
<i class="fa fa-bullhorn"></i>&nbsp;لا نصمم قوالب للعملاء عملنا حر، نقوم بالتعديل عليها وتعريبها فقط.<br />
<i class="fa fa-bullhorn"></i>&nbsp;راسلنا إذا كان هناك رابط لايعمل أو كود لايعمل<br />
<i class="fa fa-bullhorn"></i>&nbsp;قم بكتابة الموضوع وسنرد عليك خلال 24 ساعة!<br />
<br />
<br /></div>
</div>
<style scoped="scoped">
.blanterinput{float:none;position:relative;margin-bottom:45px;margin-right:10px;font-family: neo;}.blanterinput input,.blanterinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd;    font-family: neo}.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;    font-family: neo}
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>

<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>
<div style="text-align: center;">
<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'] = '632843100156206407';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d632843100156206407','//arads4tech.blogspot.com/','632843100156206407');
_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': '632843100156206407', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script><span style="color: red;"><b>
سيتم الرد عليك فى أقل من ســـ 24 ــــاعة</b></span></div>
</div>

  • وتقوم بالتعديل على التعليمات بما تشاء وتغير رابط المدونة الخاصة بى برابط مدونتك، هذا هو رابط مدونتى ابحث عنه فى اكواد النموذج واحذف وضع رابط مدونتك arads4tech
  • وقم بتغير الـ ID الخاص بى والذى هو 632843100156206407 وتضع مكانه الـ ID الخاص بك 
  • كيف تعرف ماهو الـ ID الخاص بك ؟! ،سوف تجده فى شريط المتصفح الخاص بك ،مثل هذه الصورة: 


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

  • وهكذا تكون قد أخفيت نموذج الاتصال 

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَاٰلَمِين
إعلانات - Advertisement