كيفية تخصيص نموذج المراسلة في بلوجر - الجزء 1

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

الخطوة 1 : تركيب الإضافة من بلوجر

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

الخطوة 2 : وهي متمثلة في تركيب الأداة على صفحة ثابتة

الآن نتوجه إلى الصفحات ونقوم بإضافة صفحة فارغة جديدة وننتقل إلى تبويب الhtml ونضع داخله هذا الكود :

<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">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

ثم نحدد الخيار Enter

الخطوة 3 : إضافة أكواد الCSS

هذه هي الخطوة الأخيرة والمتمثلة في إضافة هذه الأكواد قبل ]]></b:skin>

/* CSS Contact Form */
#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;
}