مساحة إعلانية

الخميس، 26 ديسمبر، 2013

الخميس، 26 ديسمبر، 2013

نموذج اتصال بلوجر المطور

customize blogger email form widget
من الإضافات الحديثة في بلوجر هي اضافة نموذج الإتصال وهي ظهرت منذ حوالي 6 أشهر وفكرت كثيراً قبل ان اتكلم عنها ولكن أحببت أنه عندما اعرضتها يكون الأمر به شئ جديد طبعا تحدثنا من قبل عن نموذج اتصال FoxyForm وساضع مقارنة بسيطة بينهما للتتعرف على مميزات وعيوب كل منهما وتختار ما يناسبك ملحوظة هذه النسخة من الإضافة تنسيق خاص بنا وسيتم شرح طريقة التعديل حتى تصل للنتيجة التي تناسبك لكن قبل المقارنة يمكنك معاينة الإضافة بتنسيقها الخاص بنا من الرابط التالي


المقارنة

البنود نموذج بلوجر foxyform
دعم اللغة
سهولة التركيب
امكانية تنسق الشكل
تنسيق الرسالة المرسلة
الحماية من السبام عبر كلمة التحقق

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

قم بالدخول لصفحة التخطيط ثم أضف آداة نموذج الإتصال ستجدها في المزيد من الأدوات

blogger Email form

بعد ذلك قم بالدخول لصفحة تحرير القالب ثم اختار الآداة بالشكل التالي

chose widget

ثم اضغط على أسهم توسعة الآداة واحذف كل ما هو مجود بين هاذين الكودين
 <b:includable id='main'>
 </b:includable>
وهذه صورة توضيحية لما تم حذفه

remove code

ملحوظة في حالة أن الآداة تحمل رقم آخر غير الرقم واحد أي مثلاً ContactForm2 قم بتغييره الى واحد

آخر جزء في عملية التركيب

ننشئ صفحة ثابته جديد أو ان كانت لديك واحده منشئه
قم بوضع الكود التالي بها بعد أن تحول صندوق المواضيع من وضع تأليف الى وضع Html احذف اى شئ موجود ثم أضف الكود

<style>
.cnmufourm {
  background: #ddd;background: -moz-linear-gradient(top,#ddd,#fff);background: -webkit-linear-gradient(top,#ddd,#fff);
  border-radius: 10px;
  box-shadow: 0 0 9px 2px #777777;
  margin: 10px auto;
  padding: 20px 20px 20px 30px;
  text-align: center;
  width:80%;
max-width:600px;
-webkit-padding-end:20px;
border:2px solid #777;
}

.contact-form-widget {
  max-width: 100%;
  width: 100%;
  height:100%;
}

.contact-form-name,.contact-form-email,.contact-form-email-message {
  border: 1px solid #BBBBBB;
  color: #605F5F;
  max-width: 100%;
  padding: 3px 5px 5px;
  width: 100%;
  font-size:16px;
height:40px;
  font-family: tahoma;
text-align:right;
}

.contact-form-email-message {
margin-bottom:15px;
min-height:150px
}

.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
  border: 1px solid #8F8F8F;
  color:#000;
}

.contact-form-button-submit {
background: #F68B00;background: -moz-linear-gradient(top,#FBB74B,#FA6400);background: -webkit-linear-gradient(top,#FBB74B,#FA6400);
border:0;
color:#000;
font-size:16px;
padding:0 15px 26px;
font-family: tahoma;
box-shadow: 0 0 1px 0 #F86401;
border-radius:20px;
}

.contact-form-button-submit:hover {
background:#EC992C;
border:0;
color:#000;
box-shadow: 0 0 1px 0 #F86401;
border-radius:20px;
}

#ContactForm1_contact-form-submit2 {
background: #000;background: -moz-linear-gradient(top,#6F6F6E,#000);background: -webkit-linear-gradient(top,#6F6F6E,#000);
box-shadow: 0 0 1px 0 #000;
color:#fff;
font-size:16px;
padding:0 15px 26px;
font-family: tahoma;
border:0;
border-radius:20px;
}

#ContactForm1_contact-form-submit2:hover {
background:#424242;
box-shadow: 0 0 1px 0 #000;
color:#fff;
border:0;
border-radius:20px;
}

</style>

<div class="cnmufourm">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class='form'>
    <form name='contact-form'>
    <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="الإسم" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;الإسم&quot;;}' onfocus='if (this.value == &quot;الإسم&quot;) {this.value = &quot;&quot;;}' />
    <p></p>
    <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="البريد الإلكتروني"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;البريد الإلكتروني&quot;;}' onfocus='if (this.value == &quot;البريد الإلكتروني&quot;) {this.value = &quot;&quot;;}'/>
    <p></p>
    <textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='اكتب رسالتك هنا'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;اكتب رسالتك هنا&quot;;}' onfocus='if (this.value == &quot;اكتب رسالتك هنا&quot;) {this.value = &quot;&quot;;}'></textarea>
    <p></p>
    <input class='contact-form-button contact-form-button-submit CNMU-button-color' id='ContactForm1_contact-form-submit' type='button' value='إرسال'/>
    <input class='contact-form-button contact-form-button-submit CNMU-button-color' id='ContactForm1_contact-form-submit2' type='reset' value='مسح'/>
    <p></p>
    <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>
    </div>
</div>
</div>
</div>

بعض التنسيقات
اللونين #ddd,#fff هما الوان تدرج الخلفية
الرقم 777 هو لون الظل ولون الإطار الخارجي
الكودين الأخضر والازرق هما الوان تدرجات الأزرار يمكنك تغيرهما
وطبعا مع قليل من الخبرة في CSS ستستطيع تنسيقها بشكل أفضل
وبالتوفيق

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

  1. اخى الكريم ما رايك فى قالب مدونتى kzrg.blogspot.com
    ويريت تعطينى ملاحظاتك في المدونه وتنصحنى بالذى يجب ان افعله فيها
    اخيك فى الله مدحت

    ردحذف
    الردود
    1. القالب الذي تستخدمه غير معرب جيداً ولا يتوافق مع محتوى مدونتك
      استخدم احد هذه القوالب أخي
      http://cnmu.blogspot.com/2013/01/Rio-Movie.html
      http://cnmu.blogspot.com/2013/03/Revolution-Lifestyle.html
      http://cnmu.blogspot.com/p/template-ar.html
      ملحوظة هناك ركن للأسئلة يضاف به هذا النوع من الأسئلة
      حتى لا يكون خروج عن مسار الموضوع يمكنك الوصول اليه عبر الرابط التالي
      http://cnmu.blogspot.com/p/chat.html
      وبالتوفيق أخي مدحت

      حذف
  2. السلام عليكم ورحمة الله وبركاته
    كيفك أخي الغالي عمرو
    مبدع كعادتك ما شاء الله عليك ومتميز في الأدوات ذات التنسيق المخصص
    أشكرك أخي الغالي بالنسبة لي أرى نموذج foxyform أفضل لآخر بندين في المقارنة
    جزاك الله خير ووفقك لكل ما يحبه ويرضاه دمت في حفظ الله ورعايته

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      الإثنين تساووا فكل منهم أخذ ثلاث علامات صح وثلاث خطأ
      ولكن الفرق في البنود فمن يرغب بنموذج اللغة متوافقة تماما ويكن تنسيقه بسهولة
      فعليه ببلوجر
      ومن لا يهمه كثيراً مسالة التعريب والشكل كاملا ويهتم أكثر بتجنب الرسائل المزعجة
      وتنسيق شكل الرسالة الذي تصله فعليه بـ FoxyForm
      لكن أنا انتظر من جوجل بعض التطوير لنموذجها وتضيف كلمة التحقق لتجنب السبام
      وتنسق الرسالة وحينها سيتفوق نموذجها لكن حتى الآن لم يتم فعل ذلك الأمر
      وشكرا أخي بدر على مرورك الرائع

      حذف
  3. بارك الله فيك اخى الكريم

    ردحذف
    الردود
    1. وفيك بارك الله أخي مدحت
      وتشرفت بمرورك العطر

      حذف
  4. تسلم يا غالي على الاضافة بس في عندي مشكلة معها انها تبدأ من اليسار وليس كما في المعاينة فهي يجب ان تبدأ من اليمين
    توضيح:
    رابط المعاينة على مدونتي: http://cnmu.blogspot.com/p/preview.html?url=http://www.7ikayah.com/p/blog-page_5332.html
    رابط المعاينة الاصلية: http://cnmu.blogspot.com/p/preview.html?url=http://cnmu-template.blogspot.com/p/blog-page.html

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

      حذف
    2. تمت الاضافة بنجاح تسلم ياطيب

      حذف
  5. السلام عليكم
    كيف اغير خطوط المدونة الى الخط الموجود في هذه المدونة ؟؟؟ مع الشكر

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      راجع هذا الموضوع اخي
      http://cnmu.blogspot.com/2013/03/blog-post_14.html

      حذف
  6. السلام عليكم أخي عمرو تدوينة رائعة أخي انا عندي استفسار بسيط
    المدونة التي انا بها مدونة جماعية فانا اريد ان اجعل الزائر الذي يرسل رسالة في نموذج اتصل بنا تاتي الي جميع المدونين الذين بها ولا تاتي لشخص واحد لانه في الاغلب بعض المدونين يكونوا منشغلين هل يوجد طريقة
    رابط نموذج اتصل بنا بمدونتني للمعاينة http://alshabh4download.blogspot.com/p/blog-page_1956.html
    تحياتي لك

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      هذا النموذج يرسل الرسالة لكل مشرفين المدونة لا يرسل للكتاب ولكن للمشرفين
      وهذا يعتبر أقصى ما يمكن الحصول عليه من نموذج مجاني هناك مواقع تقدم نماذج مدفوعة ترسل رسائل متعددة بحسب البريد الذي تضيفه

      حذف
    2. شكرا لك أخي علي الرد انا أسف علي كثرة الاشياء التي أطلبها منك =s
      أريد ان أجعل عنوان تدويناتي لدية خلفيه او يكون فوق الصورة والوصف فأنظر الي العنوان
      http://uyun.meximas.com/load/kleeja/do.php?img=70
      فانا أريده هكذا يكون فوق الصورة او يكون له خلفية مثل هذا
      http://uyun.meximas.com/load/kleeja/do.php?img=71
      مع العلم انني جربت بعض الطرق ولم أنجح بها
      دمت بود

      حذف
    3. هذا أخيا لكريم بسبب بنية منطقة المواضيع لديك يجب الحذف الداخلي والتعديل على البنية نفسها وليس الستايل فقط
      هذه يا طيب خدمة دعم فني للأسف لا اقدمها عبر المدونة , ملحوظة أخي الكريم يرجى استخدام ركن الأسئلة لضمان ظهور التعليق طالما هو خارج عن اطار الموضوع
      تحياتي لك

      حذف
  7. هلا اخى تصميم رائع
    بسى اين تصل الرساله المرسله

    ردحذف
    الردود
    1. تصل الرسالة الى بريد كل مشرفين المدونة يعني بريد الإشراف الذي تستخدمه ستصل له الرساله وان كان هناك اكثر من مشرف ستصل اليهم جميعاً

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

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      أخي الكريم خطوة حذف الاجزاء المبينة في الموضوع هدفها هو ان لا تظهر الإضافة كإضافة نفذها وستكون الإضافة لديك فقط في التخطيط

      حذف
    2. بسم الله
      تمام التمام المشكلة اننى كنت احذف ايضا السطريين


      وباعادتهما اشتغل النموذج ممتاز
      تحياتى اليك والى مزيد من الرقى والتقدم

      حذف
  9. مشكلتي ان contactforum غير موجود ما العمل ؟

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

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

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

      حذف
  11. السلام عليكم ورحمةالله وبركاتة
    اذا سمحت يا اخ عمرو كنت عايزاعرف ازاى ازود خانة لنموزج الاتصال.

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

      حذف
  12. طيب معندكش اى فكرة اجيب اضافة بخانات اكتر ازاى.

    ردحذف
    الردود
    1. يمكنك استخدام هذا الموقع ويمكنك من خلاله بناء نموذج باى عدد خانات تريد وهناك ايضاً امكانيات اكثر ان حصلت على حساب مدفوع عبره
      http://www.emailmeform.com

      حذف
  13. لكن اين الايميل الدي سترسل اليه الرسالة أعني ايميل المرسل ولا أقصد المرسل اليه ؟

    ردحذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©