القائمة الرئيسية

الصفحات

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

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

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

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

يعتبر نموذج الإتصال Contact us أو Cull us مكون أساسي فى المدونة أو الموقع إذا كنت تريد الربح من إضافة إعلانات جوجل أدسنس . وإذا كنت تستخدم قالب بلوجر مدفوع فغالباً سيكون مدمج معه نموذج إتصال فعال. ولكن إذا كنت تستخدم قالب Blogger مجاني فغالباً ستواجه مشكلة عدم وجود نموذج إتصال أو صفحة اتصل بنا لا تعمل . لذلك سوف نشرح كيفية إضافة كود اتصل بنا HTML لمدونات بلوجر بسهولة ويعمل مع جميع القوالب بدون مشاكل .

خطوات إنشاء صفحة اتصل بنا وعمل نموذج الإتصال بلوجر

  • إذهب إلى لوحة تحكم مدونة بلوجر الخاصة بك من موقع بلوجر.
  • من القائمة الجانبية فى بلوجر قم بالدخول على الصفحات  .
  • إضغط على صفحة جديدة لإضافة صفحة إتصل بنا للمدونة .
  • قم بإدخال عنوان للصفحة ويفضل أن يكون باللغة الإنجليزية مثل Contact us .
  • من أعلى يمين الصفحة إضغط على رمز القلم وإختار عرض HTML .
  • قم بمسح أى محتوى فى الصفحة وأضف كود اتصل بنا HTML لمدونات بلوجر.
  • فى الجانب الأيسر فى قسم إعدادات الصفحة قم بالضغط على خيارات ثم تعليقات القراء وإختر عدم السماح بإضافة التعليقات .
  • من إعدادات الصفحة على اليسار أيضاً قم بالضغط على علامات مخصصة لبرامج الروبوت قم بالضغط على noindex و noarchive و noodp .
  • ثم الضغط على نشر لحفظ التغيرات . 

كود اتصل بنا HTML لمدونات بلوجر جاهز

بعد شرح خطوات عمل نموذج اتصل بنا ومن بين الكثير من أكواد نموذج الاتصال المتوفرة على الإنترنت إخترنا كود اتصل بنا HTML يعمل على جميع مدونات بلوجر بدون مشاكل.

قم بنسخ الكود التالي 
<div dir="rtl" style="text-align: right;" trbidi="on">
<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:#06de15;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': 'جارٍ الإرسال...', 'contactFormMessageSentMsg': 'تم إرسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة، يرجى المحاولة مرة أخرى في وقت لاحق.', 'contactFormInvalidEmailMsg': 'يلزم إدخال عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'لا يمكن أن يكون حقل الرسالة فارغًا.', 'title': 'نموذج الاتصال', 'blogId': 'ضع هنا id بلوجر الخاص بك', 'contactFormNameMsg': 'الاسم إجباري', 'contactFormEmailMsg': 'بريد إلكتروني إجباري', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script></div>

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

مدونة بلوجر الخاص بك id
بعد وضع رقم اى دى مدونة blogger فى الكود مكان اللون بالأحمر ضع الكود فى الصفحة التى أنشئتها ثم إضغط على نشر ( راجع شرح خطوات عمل نموذج اتصل بنا بسهولة في بلوجر ) .

شرح إضافة صفحة إتصل بنا إلى الصفحة الرئيسية فى مدونة بلوجر

بعد شرح كيفية إنشاء صفحة اتصل بنا جاهزة وإضافة كود اتصل بنا HTML لمدونات بلوجر يتبقى لنا كيفية إظهار صفحة إتصل بنا Contact us إلى الصفحة الرئيسية فى المدونة لكى يكون موقعك جاهز للتقديم فى Google AdSens .

خطوات إضافة نموذج إتصال بلوجر 

1- قم بالدخول على التنسيق من القائمة الجانبية من لوحة تحكم مدونة بلوجر الخاصة بك .
2- إبحث عن الصفحات فى أدوات إدارة قالب مدونتك وإذا لم تجدها يمكنك الضغط على إضافة أداة وإختيار الصفحات من قائمة إضافات blogger .
3- إضغط على الصفحات ستجد جميع الصفحات التى أنشأتها على مدونتك إختار من بينها صفحة إتصل بنا أو نموذج الإتصال أو على حسب تسميتك لهذه الصفحة سابقا .
4- إضغط على حفظ لحفظ هذه التغييرات وستجد أن صفحة نموذج الإتصال الخاصة بك قد ظهرت على صفحة مدونتك الرئيسية .

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

ويمكنك الإطلاع على هذا الموضوع أيضاً إذا كنت تريد كيفية إضافة الصفحات الثابتة الأخرى . انشاء صفحة سياسة الخصوصية - اتصل بنا - من نحن لمدونة بلوجر
reaction:

تعليقات