أخر الاخبار
بلوجر
0

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

Dr youssef elshaer
اخر تحديث :


اضافة صفحة اتصل بنا مدونة بلوجر بطريقه احترافيه وبسهوله ولكن دعونا نتعرف على ما هى صفحه اتصل بنا؟ وما فوائدها بالنسبه لادسنس؟ ولكى لا اطيل عليكم دعونا نتحدث فى الموضوع

ما هى صفحه اتصل بنا

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


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

 فوائد الصفحه  بالنسبه لادسنس

اذا كنت تمتلك موقع وتريد ان تحقق الربح وان يتم قبولك فى جوجل ادسنس فلابد من تواجد هذه الصفحه فى مدونتك واذا لم تتواجد فلن يتم قبولك فى ادسنس

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

  1.  قم بالدخول الى لوحه التحكم ثم نقوم بالضغط بالماوس على قسم الصفحات
  2. نقوم بالضغط على زر انشاء صفحه جديده
  3.  قوم بالانتقال الى وضع HTML ثم قم بمسح جميع الاكواد وقم باضافه الكود  التالى
 <style>
.contact-form-name {float: right;width: 49%;height: 45px;background-color: rgb(243 245 245);font-family: inherit;font-size: 14px;color: #000;line-height: 34px;padding: 0 15px;margin: 0 0 10px;border: 0;border-radius: var(--radius);}.contact-form-email {float: left;width: 49%;height: 45px;background-color: rgb(243 245 245);font-family: inherit;font-size: 14px;color: #000;line-height: 34px;padding: 0 15px;margin: 0 0 10px;border: 0;border-radius: var(--radius);}.contact-form-email-message {height: 160px;float: left;width: 100%;background-color: rgb(243 245 245);font-family: inherit;font-size: 14px;color: #000;padding: 4px 15px;margin: 0 0 10px;border: 0;border-radius: var(--radius);}.contact-form-button-submit {float: right;background-color: var(--button-bg);font-family: inherit;font-size: 14px;color: #fff;font-weight: 400;cursor: pointer;padding: 10px 20px;border: 0;border-radius: var(--radius);}.contact-form-button-submit:hover {background-color: var(--button-hover-bg);color: var(--button-hover-color);}.rtl .contact-form-error-message-with-border, .rtl .contact-form-success-message-with-border {text-align: center;}
</style>
<div class='ContactForm' id='ContactForm1'>
  <form name='contact-form'>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-name'></label><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' placeholder='الاسم'/>
    </div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email'></label><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' placeholder='الايميل' />
    </div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email-message'></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' placeholder='الرساله'></textarea>
    </div>
    <div class='input-area'>
      <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='ارسال' />
    </div>
    <div class='notif-area'>
      <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
      <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
  </form>
</div>

<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '000000000000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d000000000000000000','//www.your_domain.com/','000000000000000000');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جارى الارسال....', 'contactFormMessageSentMsg': 'تم ارسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة. الرجاء معاودة المحاولة في وقت لاحق.', 'contactFormInvalidEmailMsg': 'مطلوب عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '000000000000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

قم بالتعديل على الاكواد المظلله الموجوده فى الكود

العنصر التغيير
000000000000000000 اضف الid الخاص بموقعك
//www.your_domain.com/ اضف رابط موقعك

تحميل الاكواد

TXT contact.txt تحميل

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

الخلاصه

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

تعديل المقال
الأقسام
تعليقات
إرسال تعليق

يرجى اتباع ارشادات المحتوى عند كتابه التعليق




    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -