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

الصفحات

انشاء صفحة اتصل بنا لمدونات بلوجر

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

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


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

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

أهمية صفحة اتصل بنا

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

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

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


الان وبعد  قيامنا بإاضافة أداة نموذج الإتصال التي غالبا بعد اضافتها سيظهر نموذج  الاتصال عبر صفحات المدونة بمكان إضافته , لكن نحن نريد تفعيله فقط في صفحة اتصل بنا, ولحل هذه المشكلة نحتاج لإخفاء النموذج وذالك عبر الذهاب الى المظهر ثم اختر تعديل HTML ثم ابحث بواسطة Ctrl + F عن الوسم </head> ثم ألصق الكود التالي أعلاه/قبله

<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>

إذا لم يظهر النموذج في صفحات المدونة لا داعي لإضافة الكود السابق غالبا الكثير من القوالب تحتويه.
الأن نتجه الى الصفحات ونقوم بإنشاء صفحة جديدة ولنسميها مثلا contact-us أو contact وثم نقوم بالضغط على تبويب  HTML و نقوم بمسح جميع الأكواد الموجودة و نلصق الكود التالي: 



<div dir="rtl" style="text-align: right;" trbidi="on">
<style scoped="scoped">
.blanterinput{float:none;position:relative;margin-bottom:45px;margin-left:10px}.blanterinput input,.blanterinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.blanterinput input:focus,.blanterinput textarea:focus{outline:none}.blanterinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;right:0;top:10px;transition:.2s ease all}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:14px;color:#2d87fb}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#2d87fb;transition:.2s ease all}.bar:before{right:50%}.bar:after{left:50%}.blanterinput input:focus ~ .bar:before,.blanterinput input:focus ~ .bar:after,.blanterinput textarea:focus ~ .bar:before,.blanterinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;right:0;pointer-events:none;opacity:.5}.blanterinput input:focus ~ .highlight,.blanterinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:13px;color:#2d87fb}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#2d87fb;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:right; font-family: unset;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:left;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:left;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
form{
    padding: 0 0 40px 0;
}
</style>
<form name="contact-form">
<div class="blanterinput">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>الإســـم</label>
</div>
<div class="blanterinput">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>البريد الإلكتروني</label>
</div>
<div class="blanterinput">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label>الرسالة</label>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="إرســــال" />

<br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>

الأن نقوم بمراجعة النتائج عبر معاينة او عرض الصفحة
قم بالضغط على زر الارسال فقط لإختبار نموذج الإتصال إذا ظهرت رسالة   يلزم ادخال بريد الكتروني صالح   فهذا يعني أن النموذج يعمل على أكمل وجه ,أما ان لم تظهر فهذا يعني أن المدونة مسرعة عبر استبال أكواد <head> و <body> و ]]></b:skin>
و لحل هذه المشكلة نقوم بلصق الكود التالي ضمن صفحة اتصل بنا التي أنشاناها

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4717033401200122451';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4717033401200122451','//zinothec.blogspot.com/','4717033401200122451');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جار&#1613; الإرسال...', 'contactFormMessageSentMsg': 'تم إرسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة&#1548; يرجى المحاولة مرة أخرى في وقت لاحق.', 'contactFormInvalidEmailMsg': 'يلزم إدخال عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'لا يمكن أن يكون حقل الرسالة فارغ&#1611;ا.', 'title': 'نموذج الاتصال', 'blogId': '4717033401200122451', 'contactFormNameMsg': 'الاسم', 'contactFormEmailMsg': 'بريد إلكتروني', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>


قم بإستبدال 4717033401200122451  بـ ID الخاص بمدونتك مكرر 4 مرات, واستبدل zinothec.blogspot.com  برابط مدونتك
ثم قم بالحفظ وبتجربة النموذج

تعليقات