إنشاء صفحة اتصل بنا جاهزة | كود اتصل بنا 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- اضغط على حفظ لحفظ هذه التغييرات وستجد أن صفحة نموذج الاتصال الخاصة بك قد ظهرت على صفحة مدونتك الرئيسية.

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

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

تعليقات



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -