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

السلام عليكم

سنشرح اليوم عمل خاصيه اتصل بنا

لتلقي الرسائل من اعضاء وزوار مدونتك

نبدا
اولا نذهب الي لوحه تحكم المدونه

ثم اضافه اداه



ثم نضغط حفظ

سيظهر نموزج الاتصال في القائمه الجانبيه قم بعرض المدونه للمشاهده

الان نقوم بانشاء صفحه جديد فارغه



ثم نقوم بوضع هذا الكود بالصفحه
<form name="contact-form">
الاسم
<input id="ContactForm1_contact-form-name" name="name" size="30"
 type="text" value="" />
البريد الإلكتروني <span style="color: red; font-weight: bolder;">*</span>
<input id="ContactForm1_contact-form-email" name="email" size="30"
 type="text" value="" />
الرسالة <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email
-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit"
 type="button" value="إرسال" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style type="text/css">
/* mdwanblog */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

قبل نشر الصفحه تاكد من الاعدادت التاليه
 
 
والان قم بحفظ الصفحه ونتقل الي قالب ثم تحرير HTML
وقم بالبحث عن 
 ]]></b:skin>
 

وقم بوضع هذه الكود قبله مباشر
 
 

#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus,
#ContactForm1_contact-form-email:focus,
 #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: right;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message,
#ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}


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



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

Sharing Widget bychamelcool

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

إرسال تعليق

جميع الحقوق محفوظة لـ عرب نايس ©2013-2014 | ، عرب نايس . Mohamed Said| تم تعديل القالب بواسطه عرب نايس