31 أغسطس 2014

مدون محترف اضافات بلوجر دروس بلوجر إنشاء نموذج اتصال احترافي لمدونات بلوجر

إنشاء نموذج اتصال احترافي لمدونات بلوجر


إنشاء نموذج اتصال احترافي لمدونات بلوجر ليستطيع العملاء التواصل معك بكل سهولة

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




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


الآن سوف تحتاج إلى إنشاء صفحة ثابتة حيث سنقوم بإضافة التعليمة البرمجية HTML للنموذج اتصال جديدة.

  1. الذهاب إلى Blogger> الصفحات
  2. اختيار صفحة فارغة
  3. اعطائها أي عنوان تريد. أوصي "اتصل بنا"
  4. التبديل إلى وضع HTML ولصق رمز HTML التالي داخله:


    <div class='form'>
    <!-- Custom Contact Form By mudwnp Starts -->

    <form name='contact-form'>

    <!-- Name Field -->

    <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
    <p></p>

    <!-- Email ID Field -->

    <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
    <p></p>

    <!-- Message Field -->

    <textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
    <p></p>

    <!-- Clear Button -->
    <input class='contact-form-button contact-form-button-submit mudwnp-button-color' type='reset' value='إمسح'/>

    <!-- Send Button -->
    <input class='contact-form-button contact-form-button-submit mudwnp-button-color' id='ContactForm1_contact-form-submit' type='button' value='إرسال'/>
    <p></p>

    <!-- Validation -->
    <div style='text-align: center; max-width: 222px; width: 100%'>
    <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>
    </div>
    </form>

    <!-- Custom Contact Form By mudwnp Ends -->
    </div>

تخصيص النموذج:

الذهاب إلى Blogger> قالب
النسخ الاحتياطي لديك
انقر على "تحرير HTML"
ابحث عن الوسم </head>  و اضف الكود التالي فوقه


 <style>

/*---- Compatible contact Form by mudwnop-----*/

.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 220px;
width: 100%;
font-weight:bold;
}

   
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSTimkbRsHIMI6Xvjzotuo0Fh_b9A-mlBBGZTbPsRjy-N6G56nwjuAzvbQ1tvs_ovwbwEUfhmuq081o8C3Jgp8s3hw9iEe-7oZHjShvZiWnz6ds2gWf9WBZLDC9dumOiSV76XDk9H1bl0/s320/name.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;

}
   

.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIgrsc6nFY5g6gjO7q8YrV88A9mMICsA0WY5yb-Wawv-Bs8h0lCgCpIuQMaxnEKCqjRr8gz4vEwqovy0FRATUiPvCuLvSOFMP9R0acWMJ2RO6AwDL2DXBBjZjN_SR-aUNB52WNKNjembw/s320/email.png) no-repeat 7px 10px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;

}



.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);


padding: 5px 15px 5px 28px;

}

.contact-form-email-message:hover {
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
}

.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 5px;
padding: 10px;
vertical-align: top;
max-width: 350px!important;
height: 150px;
border-radius:4px;
}


.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;
}



.contact-form-button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}


.mudwnp-button-color {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.mudwnp-button-color:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
border-color: #F47C20!important;
}
.mudwnp-button-color:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

</style>


      <!--[if IE 9]>
    <style>
 
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSTimkbRsHIMI6Xvjzotuo0Fh_b9A-mlBBGZTbPsRjy-N6G56nwjuAzvbQ1tvs_ovwbwEUfhmuq081o8C3Jgp8s3hw9iEe-7oZHjShvZiWnz6ds2gWf9WBZLDC9dumOiSV76XDk9H1bl0/s320/name.png) no-repeat 7px 0px;
}

.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIgrsc6nFY5g6gjO7q8YrV88A9mMICsA0WY5yb-Wawv-Bs8h0lCgCpIuQMaxnEKCqjRr8gz4vEwqovy0FRATUiPvCuLvSOFMP9R0acWMJ2RO6AwDL2DXBBjZjN_SR-aUNB52WNKNjembw/s320/email.png) no-repeat 7px 6px;
}

    </style>
    <![endif]-->
 
    <style>
@media screen and (-webkit-min-device-pixel-ratio:0) {


.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSTimkbRsHIMI6Xvjzotuo0Fh_b9A-mlBBGZTbPsRjy-N6G56nwjuAzvbQ1tvs_ovwbwEUfhmuq081o8C3Jgp8s3hw9iEe-7oZHjShvZiWnz6ds2gWf9WBZLDC9dumOiSV76XDk9H1bl0/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;


}

.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIgrsc6nFY5g6gjO7q8YrV88A9mMICsA0WY5yb-Wawv-Bs8h0lCgCpIuQMaxnEKCqjRr8gz4vEwqovy0FRATUiPvCuLvSOFMP9R0acWMJ2RO6AwDL2DXBBjZjN_SR-aUNB52WNKNjembw/s320/email.png) no-repeat 7px 8px;
padding: 15px 15px 15px 28px;

}



.contact-form-email:hover, .contact-form-name:hover{
padding: 15px 15px 15px 28px;
}


.contact-form-button {
height: 28px;

}

}

</style>

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


اهم الملاحظات حول الكود


لتغيير الوان الازرار ابحث عن .mudwnp-button-color و قم بتغيير الارقام اسفله
لتغيير لون الزر عند مرور الماوس .mudwnp-button-color:active و قم بتغيير الارقام اسفله
لتغيير لون الزر عند مرور الماوس .mudwnp-button-color:hover و قم بتغيير الارقام اسفله

من يواجه مشكلة مع الاضافة فليترك تعليق و سوف يتم حلها


مدونة مدون محترف 
في امان الله

مواضيع ذات صلة
إنشاء نموذج اتصال احترافي لمدونات بلوجر
4 / 5
بواسطة

هناك 18 تعليقًا :

  1. يعطيك ألف عافية صديقي .

    ردحذف
    الردود
    1. الله يعافيك اخي نورت المدونة =r

      حذف
  2. بعض الإستفسارت أرجوا منك الحل و مشكور مقدماً
    1- الرسائل المرسلة أين سيتم إستقبالها ؟
    2- كيف يعلم المرسل أنه تم إرسال رسالته ؟
    و شكراً =s =q

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

      حذف
    2. لقد جربتها بنفسي و لم تصلني أي رسالة على حسابي الجيميل الخاص بالمدونة

      حذف
    3. اهلا صديقي
      لا تستطيع إرسال رسالة من بريدك الإلكتروني لنفس البريد
      اجعل شخص يقوم بإرسال الرسالة من جهاز اخر و سوف تصل الرسالة

      حذف
    4. مشكور أخي ,
      الرسالة وصلت على قسم الإجتماعي في الجيميل
      و حتى الرسائل إللي قمت بإرسالها من نفس عنوان بريدي الإلكتروني وصلت ما فيها مضكلة
      عموماً شكراً جزيلاً ^_^ =r =r

      حذف
    5. لا شكر على واجب صديقي
      بالتوفيق =r

      حذف
  3. =w صور لم تظهر لي اخي ما الحل

    ردحذف
    الردود
    1. تأكد من إضافة الاكواد بالشكل الصحيح

      حذف
  4. ولا يتم الارسال

    ردحذف
    الردود
    1. جرب إضافة النموذج من التخطيط
      بعدها نفذ الخطوات

      حذف
  5. أخي اريد تكبيره في الصفحة كيف ذلك

    ردحذف
    الردود
    1. جرب تغيير max-width: 220px
      حيث سوف تغير 220 إلى العدد الذي تريده

      حذف
  6. السلام عليكم
    كيف يمكن تغيير وجهة الرسائل إلى بريد مختلف عن البريد الخاص المدونة

    ردحذف
  7. لا تصلني الرسائل و عند الضغط علي ارسال لا يخبرني انه تم ارسال الرسالة ..ما العمل؟

    ردحذف
    الردود
    1. قم بإضافة نموذج الاتصال من التخطيط وسوف تعمل الاضافة

      حذف

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