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

4

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

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

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

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

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

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

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

1-شرح انشاء صفحة اتصل بنا جاهزة عربى وانجليزى لمدونات بلوجر

1-صفحة اتصل بنا جاهزة احترافية باللغة العربية

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

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

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

صفحة اتصل بنا جاهزة

ثمشرح انشاء صفحة اتصل بنا جاهزة عربى وانجليزى لمدونات بلوجر

2- قم بتحميل كود CSS التالى:-

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
اكواد CSS
ثم قم بفتح قالب مدونتك وعن طريق البحث داخل القالب عبر الامر Ctrl+F ابحث عن الوسم التالى :

]]></b:skin>

ثم فوقه مباشرة ضع كود CSS الذى قمت بتحميله سابقا  كما بالصوره التاليه :

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

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

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

ثم قم بتسمية الصفحه contact us أو اتصل بنا ،ثم حول الصفحه الى خانة HTML واحذف الاكواد التى تظهر لك والصق احد الأكواد التاليه :-
تحميل الكود الأول
تحميل الكود الثانى
تحميل الكود الثالث
ويتم كما بالصوره التاليه :

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

ثم ستكون النتيجه كالتالى لأحدهما :-

صفحة اتصل بنا بلوجر

وهكذا لأى كود .

2-صفحة اتصل بنا احترافية باللغة الإنجليزيه

1- قم بتفعيل أداة الاتصال كماشرحنا فى البند1 بالأعلى .
2- من خلال البحث فى القالب قم بالبحث عن الوسم الاتى :

]]></b:skin>

اعلاه ضع الكود التالى :

div#ContactForm1 { 
display: none !important; 
}

كما بالصوره التاليه :

contact

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

Code to add:<!-- Contact Form Code --> <style> .page-contact-form input, .page-contact-form textarea { width: 100%; max-width: 100%; margin-bottom: 10px; } .page-contact-form input.contact-form-button.contact-form-button-submit { padding: 10px; background: #000; /* Button background color */ color: #fff; /* Button text color */ border: none; } .page-contact-form input.contact-form-button.contact-form-button-submit:hover { background: #777; /* Button background hover color */ color: #fff; /* Button text hover color */ } </style> <div class="contact-form-widget page-contact-form"> <div class="form"> <form name="contact-form"> Name:<br /> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> E-mail: <span id="required">*</span><br /> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> Message: <span id="required">*</span><br /> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" /> <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> <!-- End Contact Form Code -->

ثم حفظ ونشر
نموذج آخر

    1.  قم بتفعيل خاصية اداة الاتصال – اذا كنت لم تفعلها من قبل – وذلك من التخطيط بلوحة تحكم مدونتك كما ذكرنا سابقا .
    2. قم بحذف أى اكواد CSS قمت بوضعها داخل القالب وكذلك صفحة اتصل بنا احترافية وذلك لكى تضع النموذج الجديد.

3- اذا كنت قد وضعت كود اخفاء أداة الاتصال من واجهة المدونه – كما ذكرنا فى فى البند 2 سابقا – فلاتضع كود الاخفاء التالى ،واذا كنت لم تفعل فضع الكود التالى بعد أعلا الوسم

</head>

ثم احفظ القالب.

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

4- انشىء صفحه جديده ثم حول الصفحه الى خانة HTML وضع فيها الكود التالى :

<form name="contact-form"> <div class='formcolumn1'> <input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" /> </div> <div class='formcolumn2'> <input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" /> </div> <div class='formcolumn3'> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea> </div> <div class='formcolumn4'> <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /> </div> <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:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)} #ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)} .formcolumn4{position:relative} .formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0} #ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px 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} @media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}} </style>

وهذا نموذج آخر تستطيع تحميله من الرابط التالى ويتم وضعه كما شرحنا سابقا وهو باللغة الانجليزيه
تحميل نموذج آخر

3-انشاء صفحة اتصل بنا عبر موقع JotForm مجانا

موقع JotForm هو موقع مجانى لعمل صفحة اتصل بنا احترافية بألوان رائعه ،وهو مجانى 100% ،ولكى تقوم بإنشاء نموذج لصفحة اتصل بنا عبر الموقع لابد أولا من التسجيل بالموقع ،ثم تفعل التسجيل به ،وبعدها تستطيع عمل صفحة اتصل بنا بكل سهوله وللحساب المجانى حوالى 100 قالب شهريا.
تابع الشرح التالى وبه طريقة عمل صفحة اتصل بنا احترافية

والموقع أيضا يوفر شرح بالفيديو لعمل صفحة اتصل بنا عبر الموقع .

2-طريقة تركيب نموذج اتصل بنا على قالب سيو بلس

ولمستخدمى قالب سيو بلس 

استخدم النموذج التالى :

<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="إرسال" />  
<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:#264079;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 type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2227587253-widgets.js"></script>
<script type='text/javascript'>
_WidgetManager._Init('');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'contact-sec', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جار&#1613; الإرسال...', 'contactFormMessageSentMsg': 'تم إرسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة&#1548; يرجى المحاولة مرة أخرى في وقت لاحق.', 'contactFormInvalidEmailMsg': 'يلزم إدخال عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'لا يمكن أن يكون حقل الرسالة فارغ&#1611;ا.', 'title': 'نموذج الاتصال', 'blogId': '5666337625103699220', 'contactFormNameMsg': 'الاسم', 'contactFormEmailMsg': 'بريد إلكتروني', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>

من داخل الكود ابحث عن :

blogId’: ‘5666337625103699220

قم بتغييره الى Id الخاص بمدونتك ، ولكى تعرف الــ Id الخاص بمدونتك عليك بالتالى :

ادخل لوحة تحكم مدونات بلوجر عبر ايميلك وحدد المدونة المطلوب تركيب صفحة اتصل بنا بلوجر بها

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

اذا لم تفعل ذلك فلن يعمل الكود معك لإختلاف الــ id عن الــ id الخاص بمدونتك .

إقرأ ايضا :-
سياسة الخصوصية لبلوجر 2019 باللغة العربية والانجليزية
ارجوا أن اكون وفقت فى الشرح
متمنيا لك كل التوفيق

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

    تم عمل كل الخطوات ونجحت كلها لكن عندما ارسل رسالة لا تكمل الارسال علما اني استعمل قالب سيوبلس النسخة المجانية ارجو الرد

  2. aldewaghry يقول

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

  3. كيرلس صلاح يقول

    لا تصل الرساءل الي الجميل
    يا اخي

    1. aldewaghry يقول

      مدونتك ووردبريس والا بلوجر؟
      واسم القالب من فضلك

اترك تعليق

يرجي التسجيل لترك تعليقك

شكرا للتعليق

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More