-->

اضافة صفحة اتصل بنا على بلوجر ياللغة العربية والانجليزية

 

إضافة صفحة اتصل بنا على بلوجر بدون التعديل في اكواد القالب 




1-مقدمة : 

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

2-شرح طريقة اضافة صفحة اتصل بنا في مدونتك 

لكي تقوم بتركيب صفحة اتصل بنا على بلوجر قم باتباع الخطوات التالية :

  1. الذهاب الى واجهة تحكم بلوجر
  2. الذهاب الى قسم الصفحات
  3. انشاء صفحة جديدة
  4. تقوم بتسمية الصفحة ب contact-us لتخصيص الرابط (بعد الانشاء يمكنك تغيير الاسم)
  5. تقوم بالغاء التعليقات من خيار في اليسار
  6. تضغط الآن على زر القلم على اليمين
  7. تختار عرض html
  8. في هذه الصفحة تقوم بلصق الكود التالي :

3-اكواد انشاء صفحة اتصل بنا باللغة العربية واللغة الإنجليزية : 


أ-كود لصفحة اتصل بنا باللغة العربية : 

اتصل بنا
<div id="contact-form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="الاسم" size="30" type="text" value="" />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="بريد إلكتروني" size="30" type="text" value="" />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="الرسالة" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />
<br />
<div style="text-align: center;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<style type="text/css">#contact-form{background:#ececec;padding:10px;box-shadow:0 0 0 1px #d9dce1}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{margin:5px auto;border:1px solid #e3e3e3;transition:all .5s ease-out;width:100%;border-radius:10px;padding:8px 15px;margin-bottom:10px;font-family:'bein',Roboto,sans-serif}#ContactForm1_contact-form-submit{border:1px solid #e3e3e3;font:unset;text-shadow:1px 1px 5px #111;font-weight:700;font-size:14px;padding:5px 15px;background-color:#264079;border-radius:5px;color:#fff;font-family:'bein',Roboto,sans-serif;letter-spacing:1px;cursor:pointer}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7)}.contact-form-error-message-with-border{color:#b90000;font-weight:700}</style>
<script src="https://www.blogger.com/static/v1/widgets/2227587253-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
_WidgetManager._Init('');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'contact-sec', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جار&#1613; الإرسال...', 'contactFormMessageSentMsg': 'تم إرسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة&#1548; يرجى المحاولة مرة أخرى في وقت لاحق.', 'contactFormInvalidEmailMsg': 'يلزم إدخال عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'لا يمكن أن يكون حقل الرسالة فارغ&#1611;ا.', 'title': 'نموذج الاتصال', 'blogId': ' 8501174574216874844', 'contactFormNameMsg': 'الاسم', 'contactFormEmailMsg': 'بريد إلكتروني', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>

ملاحظة : قم بتغيير الرقم باللون الاحمر id خاص بمدونتك حتى تتلقى رسائل في بريدك الإلكتروني : 

ب -كود اتصل بنا باللغة الإنجليزية 

<div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <p>Name</p><input class="contact-form-name" id="ContactForm_contact-form-name" name="name" size="30" type="text" value="" /> <p>Email<span style="font-weight: bolder;">*</span> </p><input class="contact-form-email" id="ContactForm_contact-form-email" name="email" size="30" type="text" value="" /> <p>Message<span style="font-weight: bolder;">*</span> </p><textarea class="contact-form-email-message" cols="25" id="ContactForm_contact-form-email-message" name="email-message" rows="5"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm_contact-form-submit" type="button" value="Send" /> <div style="max-width: 222px; text-align: center; width: 100%;"> <p class="contact-form-error-message" id="ContactForm_contact-form-error-message"></p><p class="contact-form-success-message" id="ContactForm_contact-form-success-message"></p></div></form> </div></div><script src="https://www.blogger.com/static/v1/widgets/609130596-widgets.js" type="text/javascript"></script> <script type="text/javascript"> window['__wavt']='AOuZoY4PUAjvdPMazQDQJXJCrDFxkBfenw:1546660985916';_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d5660140533106027695','//blogspot.com','5660140533106027695');_WidgetManager._SetDataContext([{'name':'widgets','data':[{'title':'Contact Form','type':'ContactForm','sectionId':'sidebar2','id':'ContactForm'}]}]);_WidgetManager._RegisterWidget('_ContactFormView',new _WidgetInfo('ContactForm','sidebar2',document.getElementById('ContactForm'),{'contactFormMessageSendingMsg':'Sending...','contactFormMessageSentMsg':'Your message has been sent :) ','contactFormMessageNotSentMsg':'Message could not be sent. Please try again later.','contactFormInvalidEmailMsg':'A valid email address is required.','contactFormEmptyMessageMsg':'Message field cannot be empty.','title':'Contact Form','blogId':'5660140533106027695','contactFormNameMsg':'Name','contactFormEmailMsg':'Email','contactFormMessageMsg':'Message','contactFormSendMsg':'Send','submitUrl':'https://www.blogger.com/contact-form.do'},'displayModeFull')); </script>

ملاحظة : قم بتغيير الرقم باللون الاحمر id خاص بمدونتك حتى تتلقى رسائل في بريدك الإلكتروني : 
 
عند وضح الكود يمكنك رؤية صفحتك اتصل بنا ويمكنك أيضا تجربة اذا كانت تعمل بشكل الصحيح و هدا بارسال رسالة ثم دهاب الى بريدك الإلكتروني للتحقق اذا وصلتك الرسالة 

4-تحميل الاكواد : 


تحميل كود خاص باتصل بنا اللغة العربية  : اضغط هنا 


تحميل كود اتصل بنا بالغة الانجليزية :  اضغط هنا