نموذج الاتصال من بلوجر فى الصفحات الثابتة

بسم الله الرحمن الرحيم 

ـــــــــــــــــــــــــــــــــــــــــــ

المرجع برامج القاهرة

أولا :قم بأخذ نسخة إحتياطية من القالب
طريقة تركيب الاضافة :
قم بتسجيل الدخول الى لوحة تحكم المدونة بلوجر
ثم ( الصفحات )  واختار لانشاء صفحة جديدة ( صفحة فارغة | اضافة نص HTML)

ثم أضبط  اعدادات الصفحة   (عدم السماح للتعليقات ) لإخفاء صندوق التعليقات 

ثم قم بوضع الكود الاتى فى داخل Html كما بالصوره السابقة :

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
أسمك الكريم
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

البريد الألكترونى
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
نص الرسالة
<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="أرسال" />
<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>
</div>
<style>
/* Contact Form Container - www.cairo-pro.com */
.contact-form-widget {
text-align: right;
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Submit button style */
.contact-form-button-submit {
font-family: GESSTwoMediumRegular,Georgia;
font-size: 17px;
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
/* www.cairo-pro.com - Submit button on mouseover */
.contact-form-button-submit:hover{
cursor:pointer;
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}
P.comment-footer ,.comments{  visibility:hidden; }
</style>

</div>


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

- بعد ذلك سوف تجد ان الاضافة ظهرت فى الرئيسية كاضافة ونحن بالتأكيد نريد اخفائها واظهارها فقط داخل ( الصفحة الثابتة للمراسلة ) لذلك
 قم بالدخول الى لوحة تحكم المدونة  مره اخرى ثم اختر  ( قالب) ثم الزر ( تحرير Html )
ثم من القائمة ( الانتقال الى الأداة ) اختر منها ( Contactform1)  كما هو واضح فى الصوره التالية

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

وقم كما هو مشار في الكود التالي بمسح المشار اليه باللون الازق

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

واخيرا قم بحفظ القالب ومبروك عليك الإضافة  وللمعاينة من هنا

ولمن لا يستطسع النسخ فليتفضل بتحمبل الشرح والأكواد من هنا