الطرق الصحيحة لانشاء صفحة اتصل بنا Contact us لمدونةبلوجر . الكثير من الاشخاص يبحثون عن طريقة إنشاء صفحة اتصل بنا تعمل بدون مشاكل وطريقة عمل نموذج اتصل بنا لمواقع بلوجر Blogger . حيث أنه من بين الشروط الضرورية لتقديم الموقع للحصول على إعلانات جوجل أدسنس . وفى هذا الموضوع سنتطرق لكيفية انشاء صفحة اتصل بنا شغالة 100% + شرح كيفية إضافة كود اتصل بنا HTML يعمل على جميع القوالب مدونات بلوجر لحل مشاكل صفحة اتصل بنا لا تعمل او بها خلل.
كيفية إنشاء صفحة اتصل بنا جاهزة بلوجر
يعد نموذج الإتصال Contact us من اهم المكونات الأساسية فى المدونة أو الموقع إذا كنت تريد الستفادة من الربح من إضافة إعلانات جوجل أدسنس . وإذا كنت ممن يستخدم قالب بلوجر مدفوع فعادة يكون مدمج معه نموذج إتصال شغال. و إذا كنت تستعمل قالب بلوجر مجاني فعادة ستواجه مشكلة عدم تواجد نمودج إتصال أو صفحة اتصل بنا لا تشتغل. ولهدا سوف نتطرق لكيفية إضافة كود اتصل بنا HTML لمدونات بلوجر ببساطة ويشتغل مع اغلب القوالب بدون اية مشاكل .
خطوات اضافة صفحة اتصل بنا بلوجر
- افتح لوحة تحكم بلوجر الخاصة بك.
- قم بالدخول على الصفحات .
- إضغط على صفحة جديدة .
- قم بكتابة عنوان للصفحة ويستحسن أن يكون باللغة الإنجليزية مثل Contact us .
- من أعلى يمين الصفحة إضغط على رمز القلم وحول الى عرض HTML .
- أمسح أى اكواد موجودة داخل الصفحة ولصق كود اتصل بنا HTML لمدونات بلوجر.
- توجه الى الجانب الأيسر قسم إعدادات الصفحة قم بالضغط على خيارات ثم تعليقات القراء وفعل عدم السماح باضافة اي تعليقات .
- من نفس المكان أيضاً قم بالغاء علامات مخصصة لبرامج الروبوت التالية noindex و noarchive و noodp .
- ثم الضغط على نشر لحفظ التغيرات .
نمودج اتصل بنا HTML لمدونات blogger جاهز
بعد ان قمنا بشرح اهم الخطوات الضرورية لعمل نموذج اتصل بنا ومن بين العديد من أكواد نموذج الاتصال المتاحة على شبكة الإنترنت إخترنا كود اتصل بنا HTML يشتغل على كل مدونات بلوجر بدون اية مشاكل.
أنسخ الكود التالي :
/* JavaScript By http://tibart7.com/ */
<pre><code class="language-markup">
<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">#contact-form{background:#ececec;padding:10px;box-shadow:0 0 0 1px #d9dce1}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{margin:5px auto;border:1px solid #e3e3e3;transition:all .5s ease-out;width:100%;border-radius:10px;padding:8px 15px;margin-bottom:10px;font-family:'bein',Roboto,sans-serif}#ContactForm1_contact-form-submit{border:1px solid #e3e3e3;font:unset;text-shadow:1px 1px 5px #111;font-weight:700;font-size:14px;padding:5px 15px;background-color:#06de15;border-radius:5px;color:#fff;font-family:'bein',Roboto,sans-serif;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:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7)}.contact-form-error-message-with-border{color:#b90000;font-weight:700}</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>
</code></pre>
/* JavaScript By http://tibart7.com/ */
ولا تنسى وضع id مدونة بلوجر الخاصة بك وهو عباره عن رقم فى أخر رابط صفحة بلوجر الرئيسية لمدونتك .
ادا لم يعجبك هدا النمودج اعلاه , فيمكنك استعمال النمودج الثانى اسفله , فهو كدالك يعمل بدون اية مشاكل
<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">
#contact-form {
background: #ffffff;
padding: 10px;
}
#ContactForm1_contact-form-name,
#ContactForm1_contact-form-email,
#ContactForm1_contact-form-email-message {
margin: 5px auto;
border: 1px solid #e3e3e3;
transition: all .5s ease-out;
width: 100%;
border-radius: 10px;
padding: 15px 20px;
margin-bottom: 20px;
background-color:#ffffff;
}
#ContactForm1_contact-form-submit {
border: 1px solid #e3e3e3;
font: unset;
text-shadow: 1px 1px 5px #111;
font-weight: 700;
font-size: 14px;
padding: 5px 15px;
background-color: #689f38;
border-radius: 5px;
color: #fff;
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: rgb(104 159 56);
box-shadow: 0 0 5px rgb(104 159 56))
}
.contact-form-error-message-with-border {
color: #b90000;
font-weight: 700
}
</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': '2678521884433491553', 'contactFormNameMsg': 'الاسم إجباري', 'contactFormEmailMsg': 'بريد إلكتروني إجباري', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>
</div>
شرح تطبيقى لكيفية اضافة صفحة اتصل بنا | Contact us جاهزة لمدونة بلوجر blooger ، شاهد الفديو .
