الاثنين، 22 يوليو 2013

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

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

3/بعد إضافة الأداة إذهب إلى القالب ثم قم بتحريره وابحث عن 

]]></b:skin>


بعد ان تجده ضع فوقه هذا الكود


/* Contact Form Container */

.contact-form-widget {

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 {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}
4/ بعد أن أضفت هذا الكود قم بالبحث عن ContactForm
ستجده بهذا الشكل
5/بعد ان تجد الاداة قم بتضليلها كلها كما هو موضح في الصورة ثم قم بحذفها واحفظ القالب 
بعد ذالك إذهب للصفحات وقم بإضافة صفحة جديدة فارغة ثم
غير التحرير من تاليف إلى HTML
وضع هذا الكود في الصفحة
-------------------------------------------------------------------------------------------
 <div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>الإسم<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>البريد الإلكتروني *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>الرسالة *</p>
        <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='أرسل'/>
        <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>
      </form>
    </div>
  </div>
</div>

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

ليست هناك تعليقات:

إرسال تعليق