إضافة صفحة إتصل بنا على بلوجر.

اتصل بنا
إضافة صفحة إتصل بنا على بلوجر

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

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

إذا على بركة الله نبدأ بأول خطوة و هي:

  • حفظ نسخة للمدونة.

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


حفظ نسخة للمدونة
حفظ نسخة للمدونة.


  • إضافة أداة نموذج الإتصال.

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


إظافة أداة نموذج الإتصال

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

أداة نموذج الإتصال

لا تقم بإعطاء إسم للنموذج و انقر على حفظ.

أداة نموذج الإتصال

يستحسن نقل الأداة إلى الأسفل تفاديا للمشاكل.


نقل الأداة

بعد الإنتهاء نقوم بحفظ التخطيط بالنقر على حفظ الترتيب أعلى الصفحة.


حفظ الترتيب


إنتبه: لا يجب حذف أداة نموذج الإتصال من مدونتك و إلا فلن تعمل صفحة إتصل بنا.

  • نقل نموذج الإتصال إلى صفحة إتصل بنا.

لكي نتمكن من نقل نموذج الإتصال إلى صفحة منفردة يجب أن نحذف محتوى الأداة التي قمنا بتركيبها و إلصاق الكود الجديد في الصفحة الخاصة بنموذج الإتصال. للقيام بهذه العملية يجب التوجه مجددا لقائمة الإعدادات و النقر على المظهر تم تعديل html.


نقل نموذج الأتصال


أنقر على الإنتقال إلى الأداة و ستظهر لك لائحة من الأدوات و اختر الأداة ContactForm1.


الإنتقال إلى الأداة

الأن يجب النقر على السهم الأسود المتواجد بجانب إسم الأداة ContactForm1.

السهم الأسود

مرة أخرى يجب النقر على السهم الأسود هذه المرة يتواجد السهم بجانب الكود التالي: 'id='main

السهم الأسود

بعد النقر على السهم يجب تحديد الكود (بإستعمال الفأرة) المتواجد بعد:
<b:includable id='main'>
و قبل:
</b:includable>
كما هو موضح في الصورتين.


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



إحفظ التغييرات بالنقر على حفظ المظهر المتواجد أعلى الصفحة.

  • لصق الكود الجديد في الصفحة

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

كود صفحة إتصل بنا الذي يجب نسخه و إلصاقه في الصفحة:

<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
 <div class="form">
<form class="contact-form" name="contact-form">
الاسم *<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="" size="30" type="text" value="" />
<br />بريد إلكتروني  *<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="" size="30" type="text" value="" />
<br />رسالة *<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="إرسال" />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>
</div>


كود صفحة إتصل بنا

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

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


إرسال تعليق

0 تعليقات