شرح شامل- طريقة إنشاء صفحة اتصل بنا بلوجر بدون أخطاء | دليل عملي
أهلاً بك عزيزي المدون.في مدونة بلوجر بلس. لذلك نتفق جميعاً على أن أي مدونة.. تحتاج إلى الجسر تواصل فعال بين صاحب الموقع والزوار. نموذج الاتصال ليس مجرد إضافة ثانوية، بل هو أداة تبدأ بالثقة، وتتيح لمتابعيك تقديم استفساراتهم، أو يحتاج إلى مشكلة فنية، أو حتى تقديم عروض عمل وإعلانات. بعبارة أخرى، غابت صفحة التواصل يعني أنك تشعر بخيبة أمل الكثير من الفرص وتعزل عن جمهورك.
في عالم التدوين، لا ترغب في العودة طريقة إنشاء صفحة الاتصال بنا بلوجر بشكل كامل. ومع ذلك، هناك العديد من الشروحات على الإنترنت، إلا أن معظمهم يقدمون أوكواداً مع مشاهير، أو يعتمدون على مواقع خارجية لجعل النموذج غير مناسب لتصميم المدونة، أو يشارك في تحقيق الأخطاء في موقع الويب. لذلك، صممنا لك هذا الدليل لنضع بين يديك طريقة حصرية وسهلة جداً لتركيب نموذج اتصال داخل ومميز صفحة مستقلة، ليعمل بدقة تامة وبدون أي حلول تقنية.
 |
| شرح خطوات إنشاء صفحة اتصل بنا احترافية. |
اقرأ حول - طريقة إنشاء صفحات ثابتة في بلوجر
جدول المحتويات [إغلاق]
- متطلبات إنشاء اتصال بنا في بلوجر
لماذا تحتاج إلى صفحة "اتصل بنا" مستقلة في مدونتك؟
قبل أن نبدأ بالخطوات الصحيحة، وبعد ذلك اكتشف أهمية هذه الصفحة. يعتقد البعض أن بريد إلكتروني في أسفل الموقع يكفي، لكن هذا غير صحيح. صفحة مخصصة للاتصال بكلمات كثيرة لمدونتك:
- المظهر الاحترافي ; #741b47;">حماية بريدك من البريد المزعج (Spam)
العيوب الشائعة طرق إضافة الاتصال التقليدي
إذا فكرت في نموذج سابق عن طريقة إنشاء صفحة اتصل بنا بلوجر، فمن المتوقع أن تصادف العديد من الطرق القديمة والمستهلكة. لكي يتم تحديد القيمة الطريقة التي سنشرحها اليوم، يجب أن تعرف القرار الآخر:
| الطريقة التقليدية | العيوب والمشاكل |
|---|---|
| مواقع الارتباطات الخارجية (مثل Jotform وغيرها) | تكون مجانية وغير محدودة أو لبعض الرسائل المحددة، إضافة شعار الموقع الخارجي، كما أنها تبطئ سرعة تحميل مدونتك بشكل ملحوظ. |
| أكواد HTML معقدة | تتطلب تعديلات عديدة داخل قالب المدونة، وأي خطأ بسيط قد يؤدي إلى اختلاف بشكل كامل إلى الخلف أو تشوه مظهره. |
| أداة بلوجر الفرامل الافتراضية | شكلها بدائي جداً، ولا يمكن القراءة في صفحة مستقلة بسهولة، بل ترى تأثير في قائمة الشكاوى لكل صفحات المدونة مما يزعج القارئ. |
متطلبات إنشاء اتصال في بلوجر
الجميل في الشرح الذي نقدمه اليوم يعتمد على برمجة بلوجر الأصلية، ولكن مع تعديلات برمجية ذكية (CSS & JS) لا تتردد في الإشعارات إلى صفحة موثوقة وحصرية. بعد ذلك، لن تحتاج إلا إلى:
- تفعيل أداة الأصلية: سيتم إدراجها من التخطيط الجديد.
- مدونة كود (ID): لربط النموذج بحسابك واستقبال الرسائل.
- الكود الحصري: الذي سنوفره لك في هذا المقال، والذي يدمج الجميل مع الوظائف.
ملاحظة مهمة 💡: قبل البدء في أي قالب على بلوجر، يُنصح دائمًا بأخذ نسخة احتياطية (احتياطية) لقالبك الحالي تحسب لأي خطأ غير مقصود أثناء النسخ واللصق.
الخطوة الأولى- إضافة أداة الاتصال بنا وإخفائها
برمجة بلوجر تتطلب وجود أداة الاتصال الافتراضية مفعلة لكي تتواصل مع جوجل لإرسال الرسالة. ما يهمها هو أن تتوقف في العدد من الزيارات وتزعج الزوار. الحل الذكي هنا هو المتصلا ثم اخفاءها برمجياً. اتبع الخطوات التالية بدقة:
- أولاً: تسجيل الدخول إلى لوحة تحكم مدونتك في بلوجر.
- ثانيًا:توجيه إلى قسم "التنسيق" أو "التخطيط" (Layout).
- ثالثًا: في دعوات الفرح (الشريط الجانبي) أو أي مكان آخر، اضغط على "إضافة أداة" (إضافة أداة).
- رابعاً: ابحث عن أداة "نموذج الاتصال" (نموذج الاتصال) واضغط على علامة الجمع (+) لإضافتها، ثم احفظ الترتيب.
الآن موجود في مدونتك لكنه ظاهرة للجميع. لإخفائها، وسوف يتم وضع الكود البسيط في الموقع:
- خامساً: من لوحة التحكم، توجه إلى "المظهر" (السمة).
- ببساطة: انقر على الأسهم المتجه للأسفل زر "تخصيص"، و"تعديل HTML".
- سابعا: انقر داخل مربع الأكواد، واضغط من لوحة المفاتيح على (Ctrl + F) لفتح البحث.
- ثامناً: ابحث عن هذا الكود الدلالي:
]]>
.ContactForm{display: none!important;}اضغط على علامة الحفظ (أيقونة القرص المرن) أعلى يسار الشاشة. بهذا نكون قد فعلنا أداة وأخفينا عن أعين الزوار الفعالة.
الخطوة الثانية- كيفية استخراج كود معرف المدونة (Blog ID)
الآن نأتي لخطوة حيوية جداً في تطبيق طريقة إنشاء صفحة اتصال بنا بلوجر. الكود الاحترافي الذي سنضعه في الصفحة يحتاج إلى أي مدونة يجب أن يرسل الرسائل. يتم هذا عبر رقم فريد يسمى (معرف المدونة). لتحقيق الأمر بغاية المتوسط:
- افتح لوحة تحكم مدونتك.
- انظر إلى شريط العنوان (URL) في متصفحك (في الأعلى).
- ستجد رابطًا طويلًا مثل هذا:
https://www.blogger.com/blog/posts/4371357773824486577 - الرقم الطويل المكون من عدة أرقام (المظلل بالخط العريض) هو رمز المدونة الخاصة بك.
- قم بنسخ هذا الرقم واحتفظ به في ملف نصي (Notepad) فيما سنستخدمه في المرحلة التالية.
تحذير هام ⚠️: تأكد من نسخة الأرقام فقط. لا تنسى بنسخ أي علامات أو رموز أخرى مثل الشَرطة (/) أو علامة النطاق (#)، فقط الأرقام الصافية.
الخطوة الثالثة- طريقة إنشاء صفحة الاتصال بنا بلوجر مستقلة وتركيب الكود
وصلنا الآن إلى الجزء الممتع، وهو إنشاء الصفحة لوضع التصميم المناسب بداخلها. في هذه الخطوة الثانية من إنشاء صفحة تقييد جديدة، ولصق فيها الكود الحصري بعد التعديل البسيط.
- إنشاء الصفحة: من فرويد لوحة التحكم بلوجر، انقر على "الصفحات" (الصفحات).
- صفحة جديدة: اضغط على الزر "صفحة جديدة" (صفحة جديدة).
- كتابة العنوان: في خانة عنوان الصفحة بالأعلى، اكتب "اتصل بنا" أو "اتصل بنا".
- style="background-color: #d9ead3;"> تغيير وضع العرض: تحت العنوان مباشرة في شريط الأدوات، ويجب أيقونات القلم. اضغط عليها عالميًا "عرض HTML" (عرض HTML). تأكد من حذف أي رمز موجود في الكل الأبيض.
الآن، قم بنسخ الكود الكامل الموجود في الأسفل. ولكن انتبه جيدًا: قبل حفظ الصفحة، يجب عليك البحث داخل الكود عن الرقم 4371357773824486577 يتغيره برقم مدونتك (Blog ID) الذي يعمل باستخراجه في الخطوة التالية. مضطر إلى الرقم الثالث من الكود تقريبًا.
<النص>
var blogId = '4371357773824486577'; // استبدل هذا الرقم بمعرف مدونتك
// يمكن أيضًا تحرير الرسالة التالية المكونة من 5 سلاسل
var contactFormMessageSendingMsg ='جاري الارسال...';
var contactFormMessageSentMsg = 'تم إرسال رسالتك الفعالة.';
var contactFormMessageNotSentMsg = 'تعذر إرسال الرسالة. من فضلك معاودة المحاولة في وقت لاحق.';
var contactFormEmptyMessageMsg ='صندوق الرسالة لا يمكن أن يكون كاملا.';
var contactFormInvalidEmailMsg = 'ادخل بريد إلكتروني صحيح.'
var widgetLoaded=false;
دالة إرسال رسالة بريد إلكتروني () {
إذا (تم تحميل الأداة == خطأ) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'نموذج الاتصال', 'blogId': blogId, 'contactFormNameMsg': 'الاسم', 'contactFormEmailMsg': 'البريد الإلكتروني', 'contactFormMessageMsg': 'الرسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click(); }
return
true; }
بعد وضع الكود والتأكد من تغيير معرف المدونة، قم بتركيز على زر "نشر" (نشر). مبارك عليك! الآن لديك صفحة اتصال كاملة تعمل بالكامل.اقرأ حول - شرح إعدادات بلوجر كاملة للمبتدئين| الدليل الشامل لضبط مدونتك
تخصيص ألوان الاتصال ليتناسب مع قالب مدونتك
قد يكون موقع إلكتروني الخاص بمدونتك أزرق أو أخضر، بينما نموذج اللون الافتراضي للنموذج المنفق بالأعلى يتجه إلى لون الزهري أو الأحمر. من المبادئ الأساسية للتغيير أن تكون ألوان المدونة. ليتحول نموذج الخلفية ليتناسب مع ذوقك، يتبع التالي:
- ابحث في الكود: أثناء وجودك في وضع HTML داخل الصفحة، ابحث عن رمز اللون هذا:
#f93c64. (ستجده في الجزء الخاص بـ.login-body). - تغيير اللون: قم باستبدال هذا الكود بكود اللون الذي تفضله. على سبيل المثال، للحصول على لون أزرق جامق استخدم
#0b5394، أو لون أسود أنيق استخدم#333333. - تغييرات الأزرار: إذا اخترت تغيير لون اللون زر "إرسال"، فابحث عن اللون
#F79D29واستبدله بلونك المفضل. - حفظ التغييرات: اضغط على زر "تحديث" للصفحة الخاصة بتطبيق الألوان الجديدة.
كيفية اختبار النموذج والتأكد من وصول الرسائل
لا يجب أن تكتفي بتركيب النموذج التجريبي، بل يجب عليك اختباره للتأكد من أننا لن نواجه مشاكل التواصل معك. خطوة تجريبية ضرورية جداً في طريقة إنشاء صفحة الاتصال بنا بلوجر:
- افتح مدونتك كزائر: تسجيل رابط صفحة "اتصل بنا" التي قمت بإنشائها، ويفضل فتحها من متصفح مخفي (نافذة التصفح المتخفي) أو من هاتفك المحمول.
- املأ البيانات: اكتب اسماً وهمياً، وبريداً إلكترونياً بشكل صحيح (غير البريد الخاص بمدونتك)، وكتب رسالة رخيصة مثل "هذا النموذج التجريبي لنموذج الاتصال".
- اضغط على الإرسال: بمجرد الضغط، راقب الرسالة التي ستظهر. إذا حان الوقت "تم إرسال رسالتك فعالة"، وهذا يعني أن البرمجة الإلكترونية تعمل بشكل جيد.
- تفقد بريدك: اذهب الآن إلى صندوق الوارد (Inbox) للبريد الإلكتروني بما في ذلك مدونة بلوجر الخاصة بك (حساب جيميل الذي تم إنشاؤه في المدونة). والتي قد وصلت باسم الزائر.
أبرز المشاكل التي قد تواجهك أثناء التركيب
رغم أننا بسطنا الشرح القوي ليكون مفهوماً للمبتدئين والمحترفين على حد سواء، إلا أن هناك سبب قد يسبب مشاكل. إليك جدول يشرح المشكلة وحلها بسرعة:
| المشكلة | السبب والحل |
|---|---|
| النموذج يوضح ولكن عند تدريب التعلم على خطأ رسالة. | السبب هو عدم وضع معرف المدونة (Blog ID) بشكل صحيح، أو أنك لم تتأخر بإضافة "أداة نموذج الاتصال" من التخطيط كما شرحنا في الخطوة الأولى. تأكد من تفعيل الجمع الجماعي. |
| وأد HTML تنقي كنص عادي في الصفحة ولا يظهر التصميم. | السبب أنك قمت بلصق الكود في وضع "عرض التأليف" (Compose View) وليس وضع "عرض HTML". ارجع لتعديل الصفحة لتحويل HTML ثم لصق الكود. |
| لا أستقبل أي رسائل رغم ظهور رسالة "تم التعلم الفعال". | تصل الرسائل إلى إيميل (الآدمن) الأساسي للمدونة. تأكد من فحص مجلد البريد غير الراديو فيه (Spam) أو الرسائل الترويجية في الجيميل الخاص بك. |
| الأداة التلقائية ما توقف مؤقتًا في مهرجان البندقية للمدونة. | نسيت وضع قالب كود الإخفاء (CSS) داخل المدونة، أو تثبيته في مكان خاطئ. الخطوة الأولى وتأكد من استخدام فوق الإشارة ]]> |
أهم الأسئلة الشائعة حول الاتصال في بلوجر
هل يمكن إضافة نصوص أو صور فوق نموذج الاتصال؟
نعم بكل تأكيد. يمكنك الدخول لتعديل الصفحة، المصادر "عرض التأليف"، وكتابة رسالة ترحيبية فوق النموذج مثل: "نسعد بتواصلكم معنا، بالرد على استفساراتكم خلال 24 ساعة". كما يمكنك إضافة صور أو روابط لمواقع التواصل الاجتماعي الخاصة بك، مما يزيد من رئة الصفحة.
هل هذا النموذج متوافق مع ألوان الألوان؟
بالطبع، الكود المرفق في هذا المقال يحتوي على أكواد (استعلامات الوسائط) خاصة بجعله متناسباً (Responsive). سواء فتح الزائر مدونتك من كمبيوتر مكتبي، جهاز لوحي، أو هاتف ذكي، فإن حجم الحقن والخطوط ستتقلص وتتمدد تلقائيًا بحجم الشاشة بشكل أنيق.
إلى أي بريد إلكتروني هل ترغب في شراء الرسائل؟ وهل يمكن تغييره؟
بشكل افتراضي في بلوجر، يتم إرسال رسائل نموذج الاتصال إلى البريد الإلكتروني الخاص بمدير المدونة (Admin) الذي اكتمالها. لا يمكنك توجيه الرسائل إلى بريد آخر إلا إذا قمت بإضافة ذلك البريد كمسؤول (Admin) في إعدادات المدونة الرئيسية، وبعد ذلك ستصل الرسائل إلى جميع الجهات.
هل يؤثر هذا الكود على سرعة المدونة؟
لا يؤثر على الكثير. تعتبر كبيرة في هذه الطريقة أنها تعتمد على سكربتات بلوجر الأصلية والموجودة دائمًا في سيرفرات جوجل، والأكواد التي تضيف أنها مجرد نماذج (CSS) بحجم لا يتعدى القليل، مما يجعلها قابلة للمقارنة بالنماذج الخارجية التي تستخدم تقنية الإطارات (Iframes).
الخاتمة: لقد قدمنا هذا الشرح وهذا الشرح واضح لكل مبرمج ومطور وصاحب مدونة سبورت للتميز. لقد حرصنا على أن تكون طريقة إنشاء صفحة الاتصال بنا بلوجر مشروحة الحدود متدرج يخلو من التعقيد الأكاديمي، مع ترتيب الأكواد لتسهيل التعامل معها والتعامل معها. وتساهم في المساهمة في هذه الخطوات في تطوير مدونتك وجعلها أكثر جاهزية لاستقبال الزوار والمعلنين. لا تتردد في تطبيق الخطوات، ونتمنى لك التوفيق في سيرتك التدوينية ومشاريعك الرقمية.
