شرح طريقة اضافة صفحة اتصل بنا إلى مدونة بلوجر 2022

كيفية إنشاء صفحة إتصل بنا(Contact Us) وإضافتها إلى مدونتك على أيّ منصة كانت بسهولة تامة.
لا داعي للقلق هي بِضعُ خطوات وتنتهي.
بسم الله نبدأ.

ما أهمية انشاء صفحة اتصل بنا احترافية؟

عند تصفحك لأي موقع من المواقع دوماً سوف تجد هؤلاء الصفحات:

اتصل بنا.

من نحن.

سياسة الخصوصية.

سياسة الاستخدام.

قد تسأل نفسك لماذا؟، أُجِيبُكَ لأنهم يعتبرون من ركائز وأساسيات أي موقع ويب، حيث يساعدون الزائر في التعرف على موقعك أكثر.

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

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

إضافة نموذج اتصل بنا احترافي لمدونات بلوجر:

أولا إذا كنت من مستخدمين إحدى القوالب الآتية: قالب سيو بلس وقالب سكويز وقالب ناز وقالب ليفون، فعليك باستخدام أكواد صفحة اتصل بنا التي تأتي جاهزة مع هذه القوالب.

حيث أن الذين صمموا هذه القوالب قاموا بتضمين أكواد نموذج الاتصال مسبقاً في القالب، فكل ما يجب عليك فعله هو استدعاء نموذج صفحة اتصل بنا عبر الخطوات الآتية:

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

الدخول إلى بلوجر.

الذهاب الى قسم "الصفحات" في مدونتك.

الضغط على زر "صفحة جديدة".

تقوم بتسمية الصفحة بـ "contact-us" لتخصيص الرابط (يمكنك تغيير الاسم بعد انشاء الصفحة).

الذهاب إلىالقسم الأيسر من الصفحة والنقر على "خيارات".

الضغط على "عدم السماح بإضافة تعليقات وإخفاء التعليقات الحالية".

اضغط على صورة القلم(في القسم الأيمن من الصفحة).

نختار "عرض HTML".

وضع الكود بحسب القالب الذي لديك.

الأكواد صفحة اتصل بنا بحسب القالب:

- قالب "سيو بلس" فعليك باستخدام الكود الآتي:

<div id='Pagecontactus'></div>

- قالب "سكويز" فعليك باستخدام الكود الآتي:

<div class="post-contact-form"></div>

- قالب "ناز" فعليك باستخدام الكود الآتي:

<div class="post-contact-form"></div>

- قالب "ليفون" فعليك باستخدام الكود الآتي:

<div class="contact"></div>

إذا لم تكن من مستخدمين القوالب السابقة فاتبع الخطوات السابقة الذكر ثم ألصق الكود الآتي(بدلاً من الخطوة رقم 9):


<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">
  /** created by https://abdulghani-alaya.blogspot.com/2022/07/2022.html**/

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email-message {
    margin: 5px auto;
    border: 1px solid #bdc3c7;
    transition: all .5s ease-out;
    width: 100%;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 20px;
    background-color: #ecf0f1;
}

#ContactForm1_contact-form-submit {
    font-weight: 700;
    font-size: 16px;
    padding: 5px 15px;
    background-color: #ecf0f1;
    border-radius: 5px;
    color: #7f8c8d;
    border: none;
    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: #7f8c8d;
    box-shadow: 0 0 5px #7f8c8d33;
}

.contact-form-error-message-with-border {
    color: #e74c3c;
    font-weight: 700;
    padding: 10px;
    margin: 10px;
    border-radius: 6px;
    background: #f0f3f4;
}
  </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 المدونة اذهب إلى الصفحة الرئيسية لمدونتك على بلوجر.

ستجد رابط الصفحة يشبه التالي:

https://www.blogger.com/blog/posts/xxxxxxxxxxxxxxxxxxx

انسخ الرقم الذي في مكان "xxxxxxxxxxxxxxxxxxx" وضعه في صفحة اتصل بنا بدلاً من "ضع هنا Id المدونة" في الكود.

اضغط "نشر".