الكود الكامل لإنشاء صفحة اتصل بنا contact us و شرح تركيبها في المدونة

كود وطريقة تركيب صفحة اتصل بنا لمدونات blogger لكي تعمل بشكل سليم

عند بداية إنشاء موقع أو مدونة blogger يجب أن يكون هنالك بعض الصفحات الأساسية و الثابتة مثل صفحة " سياسة الخصوصية " و هي تُعتبر من أهم الصفحات الثابتة التي يجب عملها من أجل الإفصاح للمُستخدم عن سير عملية تصفحه للمدونة أو الموقع و مشاركة معلومات المُستخدم مع الأطراف المُتعاقدة مع المدونة أو الموقع مثل " Google AdSense " ، و من ثُم تأتي صفحة " من نحن " التي تُمثل الثقة بين المُستخدم و بين مالك الموقع أو المدونة لكي يعلم المُستخدم مع من يتعامل و من هم المدونين في الموقع أو المدونة ، و صفحة " إتفاقية الإستخدام " و التي تُمثل العقد المُبرم بين مالك الموقع أو المدونة و بين المُستخدم مباشرة .

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

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

طريقة تركيب الكود في مدونة blogger :

نقوم بفتح المدونة التي نريد إضافة هذه الصفحة لها و نذهب إلى خيّار " الصفحات " و نضغط لإنشاء صفحة جديدة.

بعد ذلك نقوم بإنشاء صفحة جديدة عبر الضغط على صفحة جديدة .

بعد أن نقوم بفتح صفحة جديدة أول شيئ و أهم شيئ يجب عمله هو أن نقوم في البداية بكتابة اسم الصفحة و نكتب الإسم بالإنكليزية " contact us " ثم بعد ذلك نضغط " نشر " و ذلك من أجل أن يكون عنوان الصفحة على الشكل التالي : www.example.com/p/contact-us.html  و ذلك لكي يُظهر احترافية في العمل و لكي يكون لها عنوان واضح .

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

نقوم بحذف الأكواد التلقائية الموجودة بداخله و نُضيف الأكواد التي قمنا بنسخها من هنا و نضع التسمية التي نريدها بدلاً من " contact us " و بالتأكيد أفضل تسمية هي " اتصل بنا " ، لكي يصبح اسم الصفحة الظاهر للمُستخدم هو " اتصل بنا " .

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

بعد النشر هكذا تصبح الصفحة للمُستخدم في الوضع العادي

و في وضع التنشيط تُصبح هكذا

ملاحظات هامة يجب عليك عملها لكي تعمل الإضافة و الصفحة بشكل صحيح :

1- بعد نسخ الكود و لصقه قم بالضغط على Ctrl+f و ابحث عن هذا الوسم <textarea1  و قم بحذف الرقم 1 من آخره ، و في إغلاق هذا الوسم </textarea1> أيضاً قم بحذف الرقم 1 .

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

3-  بعد ذلك تذهب إلى الصفحة الرئيسة و تستخرج اسم الإضافة عبر الضغط عليها بزر الفأرة الأيمن و من ثم inspect فتظهر اسم الإضافة ، تنسخ اسم الإضافة و من ثم تذهب إلى : المظهر← تعديل HTML و تبحث عن القسم الخاص بأكواد الـ css في skin و تضع اسم الإضافة الذي نسخته و تضيف له الكود التالي : display: none; و من ثم تضغط على حفظ و تصبح الصفحة تعمل بشكل سليم .

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

الكود الكامل لإنشاء صفحة اتصل بنا contact us :

<style type="text/css"> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:97%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;direction: rtl;text-align: justify;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(155,83,100,1);box-shadow:0 0 5px rgba(155,83,100,0.7);} #ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#fff;color:#ca4724;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, brown 0%, burlywood 50%, transparent 50%, transparent 100%);background-size:205%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;} #ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#000000;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} </style> <br /> <form name="contact-form"> <span style="color: black; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-user"></i> الاسم </span> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <span style="color: black; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> البريد الإلكترونى <span style="color: red; font-weight: bold;">*</span></span> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <span style="color: black; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> نص الرساله <span style="color: red; font-weight: bold;">*</span></span> <textarea1 cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea1> <input id="ContactForm1_contact-form-submit" type="button" value="إرسال" /> <br /> <div style="max-width: 222px; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </form> </div> </div>