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

السلام عليكم ورحمة الله وبركاته

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

مثال على اضافة اتصل بنا لمدونة بلوجر

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

قمنا بتقديم من قبل الكثير من الشروحات للاضافات الخاصة بانشاء صفحة اتصل بنا لكن اضافة اليوم شكلها مختلف ومميز.

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

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

أما في حال كانت الإضافة موجودة فى مدونتك مسبقا فلا داعي لاضافتها مجددا.

بعد ذلك قم بالبحث عن هذا الكود ]]></b:skin> فى مظهر مدونتك بعده مباشرة قم بوضع الكود التالى فوقه.

#ContactForm1,#ContactForm1 br{display:none}

الأن قم بحفظ القالب وانتقل الى انشاء صفحة جديدة وقم بوضع الكود التالى فى وضع HTML

كما موضح فى الصورة التالية.

<div dir="rtl" style="text-align: right;" trbidi="on">
<form name="contact-form">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" placeholder="الاسم" size="30" type="text" value="" /> </div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="البريد الإلكتروني" size="30" type="text" value="" /> </div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="الرسالة" rows="7"></textarea> </div>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="ارسال" />  
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<style scoped="" type="text/css">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#f4f7f8;color:#222;border:0;transition:all .6s;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-email-message{width:100%;height:250px;margin:10px auto;padding:14px;background:#f4f7f8;color:#222;border:0;transition:all .6s;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-submit{background:#f4f7f8;color:#5f6368;font-size:16px;height:45px;float:left;padding:0 30px;margin:10px 0 3px 5px;cursor:pointer;border:none;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
</style>

<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'] = '6834270398171671909';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6834270398171671909','//wdbloog.blogspot.com/','6834270398171671909');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'إرسال...', 'contactFormMessageSentMsg': 'تم ارسال رسالتك.', 'contactFormMessageNotSentMsg': 'لا يمكن إرسال الرسالة. الرجاء معاودة المحاولة في وقت لاحق.', 'contactFormInvalidEmailMsg': 'مطلوب عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'لا يمكن ترك حقل الرسالة فارغًا.', 'title': 'Contact Form', 'blogId': '6834270398171671909', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'البريد الإلكتروني', 'contactFormMessageMsg': 'الرسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

</div>

او حمله من هنا في ملف تكست

وبعدها قم بتعديل هذه الاعدادات كما موضح في الصورة التالية

يجب عليك قبل الحفظ أن تقوم بالبحث في الصفحة عن الكود الملون بالأزرق وتقوم باستبداله ب blog id الخاص بمدونتك 6834270398171671909 بعد أن تضع الأكواد فى الصفحة ، وتقوم بتغيير بـ blogID الخاص بمدونتك كما فى هذه الصورة سوف تعرف المعرف ، وكذلك سوف تقوم بتغيير رابط مدونتي wdbloog.blogspot..om برابط مدونتك.

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

الى هنا نكون انتهينا من موضوع اليوم طريقة حديثة لانشاء صفحة اتصل بنا لمدونات بلوجر.

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