اضافة خاصية اتصل بنا منزلقة

اضافة خاصية اتصل بنا منزلقة

يوجد الآن مشاهدة التعليقات : 57

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

ملاحظة : تمّ إضافة شكل ثاني جديد بتاريخ 31/08/2015
شرح  طريقة التركيب
1. داخل القالب ابحث عن  ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style>   </style> فوق </head>
.ContactForm, .ContactForm .title {
 display:none;
}
.floating-ai {
 position:fixed;
 width:250px;
 right:15px;
 bottom:0;
 z-index:999;
}
.floating-ai-head a {
 padding:5px 10px;
 background:#2997e0;
 color:#fff;
 font-weight:bold;
 display:inline-block;
 font-family:droid arabic kufi;
 text-transform:uppercase;
 *display:block;
 zoom:1;
 transition:all 0.3s linear;
}
.fa-envelope-o:before {
content: "\f003";
margin-left: 5px;
font-weight: bold;
background: rgba(68, 68, 68, 0.27);
padding: 5px;
}
.floating-ai-head a:hover {
 background:#2588ca;
 color:#fff;
}
.floating-ai-body {
 height:400px;
 background:#fff;
 padding:10px;
 display:none;
 box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
}
.floating-ai-head {
 text-align:right;margin-right: 15px;}
.floating-ai-body .ContactForm {margin:0;display:block!important;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
 background:#eee;
 margin-bottom:10px;
 border:none;
 color:#8f8f8f;
 padding:2px;
 width:75%;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
 background:#f5f5f5;
 transition:all 0.3s linear;
}
#ContactForm1_contact-form-email-message {
 background:#eee;
 margin-bottom:10px;
 border:none;
 color:#8f8f8f;
 font-family:droid arabic kufi;
 padding:5px;
 width:95%;
}
#ContactForm1_contact-form-submit {
 width:100px;
 color:#fff;
 font-family:droid arabic kufi;
 text-transform:uppercase;
 font-weight:400;
 font-size:14px;
 cursor:pointer;
 background:#57ad68;
 border:none;
 float:left;
 transition:background 0.3s linear;
}
#ContactForm1_contact-form-submit:hover {
 background:#468a53;
}
2. إبحث عن </body> وضع الكود التالي فوقه
<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move"><i class="fa fa-envelope-o"></i>إتصل بنا</a></div><div class="floating-ai-body"></div></div>');
$('.ContactForm').appendTo('.floating-ai-body');
var slide_up_ai = false;
$('.floating-ai-head a').click(function(){
 if (!slide_up_ai) {
 slide_up_ai = true;
 $('.floating-ai-body').slideDown();
 } else {
 slide_up_ai = false;
 $('.floating-ai-body').slideUp();
 }
});
//]]>
</script>
3 .قم بالحفظ ثم توجه إلى التخطيط وأضف أداة  نموذج الإتصال
________________________________________________________________________
داخل القالب ابحث عن ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
#contact{position: fixed;bottom: 0;right: 1%;background-color: #434E52;color: #555;width:250px;z-index: 999999;}
#contact h2.title{font-weight: 400;color: #FFF;padding: 8px 15px;font-size: 16px;cursor: pointer;text-align: center;background-color: #2B2B2B;border-bottom: none;  font-family: electrolize,&#39;Droid Arabic Naskh&#39;, serif; ;}
#contact h2.title .fa{position:absolute;left:10px;top:12px}#contact h2.title:before { content: &quot;\f1d8&quot;; font-family: FontAwesome; float: left; background-color: #434E52; padding: 15px; margin-top: -8px; margin-left: -15px; }
#contact .contact-form-widget{padding: 0px; display: none; padding-right: 10px; width: 240px;}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{background-color:#DDD;color:#111;border:0;padding:10px 5px;}
.contact-form-widget {margin-right:0;max-width:250px;padding:0;padding-top:0;
width:100%;height:auto;}
.contact-form-email, .contact-form-email-message, .contact-form-name {max-width:100%;
width:100%;}#contact *{transition:all 0 ease;-webkit-transition:all 0 ease;-moz-transition:all 0 ease;-o-transition:all 0 ease}
.contact-form-email, .contact-form-name {background:#dce1e2;border:none;border-top:none;box-sizing:border-box;color:#2e3639;display:inline-block;font-family:&#39;Arial&#39;,sans-serif;font-size:13px;height:24px;margin:0;margin-top:5px;padding:10px;vertical-align:top;transition:.3s linear;}
.contact-form-email-message {background:#dce1e2;border:none;border-top:none;box-sizing:border-box;color:#2e3639;display:inline-block;font-family:&#39;Arial&#39;,sans-serif;font-size:13px;margin:0;margin-top:5px;padding:10px;vertical-align:top;transition:.3s linear;}
.contact-form-email:hover, .contact-form-email:focus, .contact-form-name:hover, .contact-form-name:focus, .contact-form-email-message:hover, .contact-form-email-message:focus {background:#fff;border:none;border-top:none;outline:none;box-shadow:none;transition:.3s linear;}
form {color:#dce1e2;}
.contact-form-button-submit {width:100%;height:30px;background-color:#55849E;background-image:none;border:none;color:#fff;transition:.3s linear;  margin-top: 5px;  font-family: electrolize,&#39;Droid Arabic Naskh&#39;, serif;}
.contact-form-button-submit:hover,.contact-form-button-submit:focus {background-color:#4DB2EC;background-image:none;;border:none;outline:none;color:#fff;cursor:pointer;transition:.3s linear;}
.contact-form-error-message-with-border {background:#FC4F3F;border:none;
bottom:0;box-shadow:none;color:#fff;font-size:11px;
font-weight:700;line-height:19px;margin-right:0;opacity:1;position:static;
text-align:center;transition:all 0.1s linear;}
.contact-form-success-message {background:#e1dae7;border:none;bottom:0;
box-shadow:none;color:#6a5b7a;font-size:11px;line-height:19px;margin-right:0;
opacity:1;position:static;text-align:center;transition:all 0.1s linear;}
2. إبحث عن </body> وضع الكود التالي فوقه
<script type='text/javascript'>
;$( &quot;#contact h2.title&quot; ).click(function() {$( &quot;#contact .contact-form-widget&quot; ).toggle(&quot;fast&quot;);});
</script>
3. ضع الكود التالي في مكان فوق الفوتر أو </body>
<b:section class='contact section' id='contact' maxwidgets='1' >
  <b:widget id='ContactForm1' locked='false' title='اتصل بنا' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;color: #F32525;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;color: #F32525;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

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

  1. السلام عليكم
    عندما ضغطت علي المفتاحين وجدت كلمات انجليزية كثيرة ولم اعرف ماذا افعل ارجو افادتي وشكرا

    ردحذف
  2. عليكم السلام :
    اولا عليك البحث عن هذا الكود ]]> بإستعمال ctrl+f وضعي الكود الذي يخص الإضافة فوقه - ونفس الشيئ للبقية تابعي الصورة -

    http://im58.gulfup.com/bPFhMZ.png

    ردحذف
  3. http://4.bp.blogspot.com/-8uSUxCcfL2Q/U6gJo_GQX3I/AAAAAAAAEJY/3u3b0czjQzs/s1600/ar1web.png

    ردحذف
  4. اتبعت ارشاداتكم وعند الضغط علي المعاينة ظهرت الرسالة التالية فماذا افعل افادكم الله
    حدث خطا اثناء تحليلxml في السطر506 العمود22" open quote isexpeted for attribute '"type associated with an element type script

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

      حذف
  5. شكرأ لك اخي على الاضافات الجميله
    ممكن طريقه تصنيف التدوينه اذا كانت ادوات,تحميل,مقاله,اغنيه كما في مدونتك
    واكون شاكر لك :)

    ردحذف
    الردود
    1. اخي الفاضل ذلك هاك ( كود ) يتماشى مع القالب ، لا يمكن مشاركته لكن ستكون إضافات قريبة لها في التدوينات القادمة .

      حذف
  6. اخي انا استخدمتها في قالب عادي ليس بلوجر وما زبط لماذا؟

    ردحذف
    الردود
    1. إذ لم يكن قالب بلوجر فلن تعمل

      حذف
  7. تمت اخي اضافة الاداة ولكن مو بشكل موقعك ......

    ردحذف
    الردود
    1. اجريت بعض التغييرات فقط

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

    ردحذف
  9. http://www.ar1web.com/

    ردحذف
  10. الاظافة شغالة شكراااا الدليل http://amine4web.blogspot.com

    ردحذف
  11. اضافه رائعه شكرا لك تم التركيب بنجاح
    http://yellowbnews.blogspot.com

    ردحذف
  12. العفو إخواني ، هنيئا لكم |o|

    ردحذف
  13. اخي العزيز السلام عليكم شكر على المجهود الجبار بس انا عندي مشكله من ابحث عن <[[ لايوجد بل مدونه

    ردحذف
    الردود
    1. ابحث عن skin الثاني هو المقصود

      حذف
  14. اخي 4 خطوه لاتوجد

    ردحذف
    الردود
    1. لا يمكن ستجدها في أخر الكود بالقالب

      حذف
  15. لقد قمت بالتركيب بنجاح ولكن لا اجد زر ارسال الرساله هناك حقل الاسم والبريد والرساله
    وليس هناك زر ارسال الرساله

    ردحذف
    الردود
    1. رابط مدونتك ليتم مراجعة المشكل

      حذف
    2. شكرا لك لقد تم حل المشكله بنجاح رابط المدونه
      ayanatechnecal.blogspot.com

      حذف
  16. مشكورررررررررررر أخي الكريم

    مدونة آفاق
    http://afaq0.blogspot.com/

    ردحذف
  17. غير معرف9/03/2014

    أخي ممكن كود
    اخر التعليقات
    الله يخليك أرسله عبر إميلي
    MarouanTech@gmail.com
    و شكرا لك يا حبيبي

    ردحذف
  18. ارجو منك يا اخي ان تخبرني الحل الرجوك انا عملت كل شئ بالضبط ولاكن لم تظهر عندي ارجوك اخبني ما هو الحل ارجوك وشكرا

    ردحذف
    الردود
    1. لم تظهر ؟؟ رابط مدونتك

      حذف
  19. يا أخي هاهو رابط مدونتيhttp://ahmedfarouk1.blogspot.com يمكن لك فحصعا وتر ان كنت كاذب ام لا:|

    ردحذف
    الردود
    1. بالراحة عليك اخي :) لم أقل شيئ يدعوك لتخيل أني كذبتك فقط طلبت منك معاينة لكي أرى المشكل بنفسي
      على العموم هل اضفت نموذج الإتصال من التخطيط إن لم يكن موجود أضفه
      إذ مازال نفس المشكل أنسخ أكواد Css والتي تبدأ من /* CSS Contact Form */ ثم ابحث عن /* CSS Error Page */ وضعها فوقها أكواد Css
      موفق.

      حذف
  20. شكرا لك يا أخي فانت انسان محترم وتستحق كل التقدير

    ردحذف
  21. ولكن يأخي انا عمل كل شئ ولاكن انظر علي شكلها كبيرها وليست بمكانها وهاهو عنوان المدونة
    http://ahmedfarouk1.blogspot.com/
    او عنوان الصورة
    http://im88.gulfup.com/dsHcVP.png

    ردحذف
    الردود
    1. اخي أنت تركت الأكواد السابقة احذفها فهي مكررة ابحث عن /* Global Responsive */ فوقها ستجد أكواد /* CSS Contact */ احذفها كاملة ثم أحذف الأكواد التي تركتها ايضا بعد المشكل الأول

      حذف
  22. السلام عليكم

    عندي مشكلة بسيطة جدا

    بدل كلمة اتصل بنا تظهر كلمة CONTACT

    هذه هيا صورة للمشكلة

    https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t34.0-12/10715838_1527879847430137_604196401_n.jpg?oh=5e440504a50dee87e769c7e593e88971&oe=542EB7AC&__gda__=1412413052_5a99049b378c0904dcb8892123b5c917

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

      حذف
  23. هل الاضافة عاديةو ام مجانية

    ردحذف
  24. !!! بالطبع مجانية ويمكن أن تركبها بأي قالب بلوجر

    ردحذف
  25. taalam kaif3/18/2015

    لم اجد هذا الكود <[[ ما العمل

    ردحذف
  26. ahmed wazani3/20/2015

    موضوع جميل هذا رابط موقع أختي :

    http://www.omsaad.com/

    ردحذف
  27. اخوي طبفت وظهر لي الزر ولاكن عند الضغط عليه لا يظهر شيئ , صفحة بيضاء

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

      حذف
    2. اخى لا يوجد نموذج الاتصال فى تخطيط

      حذف
    3. الشكل الثاني به نموذج الإتصال ضمن الأكواد سيضاف تلقائيا

      حذف
  28. اخي حسام لو سمحت ممكن الاضافة اللي في قالب المعاينة
    اللي هي الافضل لكم
    لو سمحت ......

    ردحذف
  29. كيف اغير اللون الازرق

    ردحذف
    الردود
    1. قم بالبحث عن هذا اللون في الكود الأول : #2997e0
      وكذلك هذا عندما يمر الماوس عليها : #2588ca

      حذف
    2. مشكلة عند الضغط على ارسال الزر لا يعمل الحل ايه

      حذف
  30. السلام عليكم ... اريد جعل هذا الزر يكون جهة اليسار ... ارجو الحل

    ردحذف
  31. غير معرف6/04/2016

    اخى لقد ذهبت الى التخطيط يقول مُضاف بالفعل ولكنه ليس موجود او ليس مرئيا

    ردحذف
  32. السلام عليكم اخي مشكووووووور على الموضوع لكن ايناضع ايمايلي ليصلني رسائل الزوار

    ردحذف
  33. لو سمحت من فين اجيب نموذج الاتصال

    ردحذف
  34. الو السلام عليكم انا عرفت كيف اجيب النموذج بس عندي مشكلة ممكن تشوفها
    مني عارف اشرحلك هي انت ادخل على مدونتي وشوف المشكلة http://qmafia0.blogspot.com/

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم