إضافة لصفحات بلوجر للإتصال بنا ثابتة

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

طريقة التركيب :

1 - اذهب الى مدونتك ثم تخطيط ثم قم باضافة نموذج اتصال فى الشريط الجانبى  :

2 - ادخل الى قالب ثم تحرير HTML و ابحث عن ]]> و ضع الكود التالي فوقه :

 #ContactForm1 {display:none;} 

ثم اضغط على حفظ النموذج

3 - اذهب الى قسم الصفحات و انشئ صفحة جديدة ضع في العنوان Contact ( يمكنك تغييره للعربية بعد أن تنشر الصفحة )

4. انتقل من وضع تأليف الى HTML في نفس الصفحة ثم ضع الكود التالى :

>form name="contact-form"<
الاسم الكريم 
>input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /<

البريد الإلكتروني >span style="color: #f56954; font-size: x-small; font-weight: bold;"<مهم>/span< 
>input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /<

الرسالة >span style="color: #f56954; font-size: x-small; font-weight: bold;"<مهم>/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 scoped="" type="text/css"<
#comments {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;width: 100%;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px 0;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;resize:none;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{float:left;background:#0099CC;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#2A2B2B;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
.post-body input {width:initial;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
>/style<

5 - تقوم بعمل الاعدادات مثل الصورة  التالية :

 6 - اضغط على نشر  وقم بعرض الصفحة لترى النتيجة .

و هكذا نكون انتهينا .