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

الصفحات

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

+حجم الخط-

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

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

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

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

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

  1. اذهب الي لوحة تحكم بلوجر الخاصة بك.
  2. نضغط علي الصفحات من القائمة الجانبية في بلوجر.
  3. ثم نضغط علي صفحة جديدة لإضافة صفحة اتصل بنا.
  4. قم بإدخال عنون للصفحة ويفضل ان يكون باللغة الانجليزية مثل كلمة Contact us.
  5. من اعلي يمين الصفحة نضغط علي رمز القلم واختيار عرض HTML.
  6. قم بمسح اي محتوي في الصفحة ونضيف كود اتصل بنا HTML لمدونات بلوجر.
  7. في الجانب الايسر نضغط علي الاعدادات ثم نضغط علي الخيارات ثم نضغط علي تعليقات القراء ونختار عدم السماح بإضافة التعليقات.
  8. من إعدادات الصفحة نقوم بالضغط علي علامات مخصصة لبرامج الروبوت نضغط علي noindex و noarchive و noodp.
  9. ثم نضغط علي نشر للحفظ.

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

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

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

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

  • قم بالدخول علي صفحة التنسيق من القائمة الجانبية لصفحة بلوجر الرئيسية.
  • إبحث عن الصفحات في صفحة التنسيق واذا لم تجدها يمكنك الضغط علي اضافة اداة واختيار الصفحات من قائمة إضافات blogger.
  • ثم تضغط علي الصفحات ستجد جميع الصفحات التي أنشأتها سابقاً علي مدونتك فقط قم بإختيار صفحة اتصل بنا أو نموذج الاتصال.
  • اضغط علي حفظ لحظ جميع التغييرات، ثم تقوم بعرض المدونة ستلاحظ انها تم وضعها في المدونة بنجاح وبدون أي مشاكل.
والي هنا لقد انتهينا من شرح كيفية إنشاء صفحة اتصل بنا جاهزة لمدونة بلوجر، وإذا واجهتك أي مشاكل في إضافة نموذج الاتصال قم بتوضيحها لنا في التعليقات وسيتم الرد عليك بالفور لمساعدتك في حل المشكلة ان شاء الله.
يمكنك الإطلاع علي موضوع مهم يختص لتحسين موقعك في محركات البحث من اداة جين رانك.
  • فيس بوك
  • بنترست
  • تويتر
  • واتس اب
  • لينكد ان
  • بريد
author-img
shehab waleed

انا شهاب وليد مدون ويوتيوبر مصري احب التدوين و نشر كل جديد.

إظهار التعليقات
  • تعليق عادي
  • تعليق متطور
  • عن طريق المحرر بالاسفل يمكنك اضافة تعليق متطور كتعليق بصورة او فيديو يوتيوب او كود او اقتباس فقط قم بادخال الكود او النص للاقتباس او رابط صورة او فيديو يوتيوب ثم اضغط على الزر بالاسفل للتحويل قم بنسخ النتيجة واستخدمها للتعليق