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

الصفحات

إضافة صفحة إتصل بنا إحترافية إلى مدونة بلوجر بأسهل طريقة

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

إضافة صفحة إتصل بنا إحترافية إلى مدونة بلوجر بأسهل طريقة

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


  • تواصل مع قرائك
  • تواصل مع العلامات التجارية والرعاة
  • تواصل مع المدونين الآخرين الذين قد يرغبون في التعاون
  • اكتساب عملاء محتملين إذا كنت تقدم خدمات

كيفية إنشاء صفحة إتصل بنا على Blogger

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

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

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

الخطوة الأولى: أداة إتصل بنا الأصلية

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

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


- في النافذة المنبثقة انزل لأسفل حتى تجد أداة نمودج الإتصال ، انقر فوق الإرتباط .



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

الخطوة الثانية لإضافة صفحة إتصل بنا إحترافية لمدونة بلوجر

في لوحة تحكم Blogger ، انتقل إلى الصفحات.
قم بإنشاء صفحة جديدة وفي العنوان ضع إتصل بنا أو راسلنا على حسب ما يناسبك.


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


ولا تنسى أن تغير رمز ID برمز ID الخاص بمدونتك لتعمل الإضافة، وسوف تستقبل الرسائل إلى البريد الإلكتروني المرتبط بالمدونة الخاصة بك. ستجد أسفل الكود blogId': '848973641913846274' غير الأرقام إلى ID مدونتك. 




<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:#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 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': '848973641913846274', 'contactFormNameMsg': 'الاسم', 'contactFormEmailMsg': 'بريد إلكتروني', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

</script>


أصبح لديك الآن صفحة إتصل بنا احترافية على مدونة Blogger الخاص بك!، بعد الإنتهاء من كل شيء جرب إرسال رسالة عبر الإضافة حتى تتأكد من أنها تعمل بشكل جيد.

  • فيس بوك
  • بنترست
  • تويتر
  • واتس اب
  • لينكد ان
إظهار التعليقات