الأحد، 23 فبراير 2014

كيفية إضافة خدمة 'اتصل بنا' لمدونة بلوجر بشكل إحترافي

بقلم: BR MED يوم الأحد، 23 فبراير 2014 القسم : 2 التعليقات
السلام عليكم و ررحمة الله و بركاته.
نموذج الإتصال من الأمور الضرورية التي ينبغي للمدونات أو المواقع الإحترافية أن تتوفر بها. شأنها شأن سياية الخصوصية ، فمن صفحة إتصل بنا أو ما يسمى "contact form" يستطيع الزوار التواصل مع إدارة في حالة الضرورية مثل طلبات الإعلان الممولة أو مشاكل في الموقع أو أمور مماثلة.
ما يميز نموذج إتصل بنا هذا هو سهولته و إحترافيته دعك من المواقع التي توفر لك تلك الخدمة، فاليوم سوف نعتمد على أداة إتصل بنا التي تمنحها لنا منصة بلوجر، وحيث سنقوم تغير حجمها و الستايل الخاص بها. كي لا أطيل عليكم ننتقل إلى الشرح.


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

1 - إذهب للوحة تحكم البلوجر ثم التخطيط ثم إختيارأداة نموذج الإتصال كما في الصورة. 
ملاحظة هامة: هذا في حالة إن لم تكن قد أضفتها سابقا إن كنت قد أضفتها لا تضفها مرة ثانية و لكن إنتقل للخطوة الثانية من الشرح.

 
2 - إذهب للقالب و يستحسن أخد نسخة إحطياطية منه تفاديا لأي مشكلة، بعده تضغط تحرير html .
3 - إنقر وسط الأكواد و إستعن بالزرين ( crtl+f ) للبحث عن عبارة : ContactForm1.
4 - بعد أن تجدها قم بتوسيع الأكواد بالضغط على المثلث أو السهم الصغير بجانب السطر الخاص بالإضافة. أنظر الصورة.



5 - ثم قم بتوسيع السطر الذي بعده. كما في الصورة.

6 - قم بحذف جميع الكواد التي قمت بالإشارة لها في الصورة التالية.

 7 - إستعن بالزرين (ctrl+f) للبحث عن الوسم التالي: ]]></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;
}

8 - الآن إذهب للصفحات و قم بإنشاء صفحة جديدة. ضع العنوان الذي يناسبك للصفحة ثم إنقر على الزر 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>
9 - قم بحفظ الصفحة و مبروك عليك نمودج إتصل بنا الإحترافي
هذا كل ما في موضوع اليوم ، أي إستفسار أنا في الخدمة، بالتوفيق للجميع في أمان الله.

هناك تعليقان (2):

  1. Unknown17 يونيو 2015 في 7:37 م

    شكرا لك

    100 قالب بلوجر

    كل قالب حملته من عندك معرب يعني قد أستعملهم كثيرا

    ردحذف
    الردود
    1. BR MED18 يونيو 2015 في 2:57 ص

      العفو أخي الكريم مرحبا بك في أي وقت =r

      حذف

يسعدنا تفاعلكم بالتعليق , أما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولابمحول الأكواد , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

الاشتراك في: تعليقات الرسالة (Atom)