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

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

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

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

في تدوينة تخص إضافات بلوجر طرحت لكم إضافة خاصية إتصل بنا منزلقة طبعا وكما ذكرت في السابق أهمية نموذج الإتصال في أي موقع كان أو حتى في الحياة اليومية وهذه التدوينة تشمل أيضا إضافة إتصل بنا لكن هذه المرة بشكل أخر ومغاير بالكامل عن الإضافة السابقة من حيث الشكل والتأثير الذي هو عبارة عن صندوق ينفتح لتصبح الخلفية سوداء ونموذج الإتصال واضح ويسمى بـ LightBox للمعاينة إذهب لآخر الصفحة
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث عن ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
#contacts-forms{width:100%;margin-bottom:10px} #widget-contact{ position: fixed; top: 15%; left: 50%; width: 300px; height: auto; z-index: 1000; display: none; margin: 0 0 0 -200px; background-color: #fff; border: 4px solid #E74C3C;} #widget-contact h3.juduls{background: #444; color: #fff; position: relative; margin: 0; padding: 15px; text-transform: uppercase; text-align: center; font-size: 11px;text-shadow: 0px -2px 0px rgba(0, 0, 0, 0.15);} #widget-contact h3.juduls:hover {background: #D13F30;} #widget-contact h3.juduls a{position:absolute;left:15px;color:#fff;font-size:30px;text-decoration:none;cursor:pointer;top: 1px;font-weight: bold;} #ContactForm1 h2{display:none} #area-overlay{position:fixed!important;z-index:999;top:0;right:0;bottom:0;left:0;background-color:#000;display:none} #ContactForm1_contact-form-email-message{ width: 110%; background: #FAFAFA; outline: none; border: 1px solid #C7C7C7; overflow: hidden; height: 150px; color: #444; margin: 0 10px 10px; padding: 7px; max-width: 1100px;} #ContactForm1_contact-form-submit{font-weight:700;background:#E74C3C;position:relative;cursor:pointer;float:right;width:100px;outline:none;border:none;margin:0 10px 10px;color:#fff;font-family: Electrolize,ge_ss_tvbold;} #ContactForm1_contact-form-submit:hover{background:#C0392B} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:250px;margin-top:10px;color: #444;} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width: 110%; background: #FAFAFA; color: #444; outline: none; border: 1px solid #C7C7C7; margin: 0 10px 10px; padding: 10px; max-width: 1100px;} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{border:1px solid #1e90ff} .contact-form-widget p{margin:0} .contact-form-widget{ padding: 5px; font: normal 13px Droid Arabic Naskh; line-height: 2em; text-align: right; font-weight: 600; color: #676363;} .buka-contact { position: relative; z-index: 2; display: inline-block; font-size: 12px; top: 10px; font-weight: normal; padding: 0 12px; color: #fff; float: left; height: 25px; line-height: 27px; background-color: #E74C3C; font-family: Droid Arabic Naskh; cursor: pointer; right: -15px; } .buka-contact:before{ content: ""; border: 8px solid #E74C3C; border-left-color: rgba(0, 0, 0, 0); border-top-color: rgba(0, 0, 0, 0); position: absolute; left: -16px; top: -0px; } 
3. إبحث عن <body/> ثم ضع الكود التالي قبله
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script type='text/javascript'>
$(function(){$('.buka-contact').click(function(){$('#widget-contact').show();$('#area-overlay').fadeTo("normal",0.8);return false});$('#widget-contact .close').click(function(){$('#area-overlay, #widget-contact').hide();return false})});
</script>
4. ضع الكود التالي فوق <body/>
<div id='contacts-forms'>
<div id='widget-contact'>
<h3 class='juduls'>اتصل بنا<a href='#' class='close' title='إغلاق'>&#215;</a></h3>
<b:section class='kontaks' id='kontaks' maxwidgets='1' preferred='yes'/>
</div>
<div id='area-overlay'></div>
<button class='buka-contact'>اتصل بنا</button>
</div>
8. احفظ العمل ثم توجه لتخطيط وأضف أداة نموذج الإتصال بـ kontaks

ملحوظة:

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

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

  1. إضافاتك كلها لم تصلح لي يبدو أن أكوادك خاطئة

    ردحذف
    الردود
    1. يبدو أنك لا تقم بالأمور كما هي :)
      المعاينة بها نفس التطبيقات

      حذف
  2. اشكرك لا شيء خطا :-d
    لكن انا عنديقالب انا صممته يا ليت تساعدني على الاضافات

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

      حذف
  3. اخي لم اجد الكود الثالث ممكن كود بديل له رجاء وشكرا جزيلا:-bd

    ردحذف
  4. http://cayberspece.blogspot.com/

    ردحذف
    الردود
    1. ضع اسفل هذا الكود #footer-wrapper

      حذف
  5. اخي حسام انا لم اجد الكود الثالث
    ماذا افعل ؟
    مدونتي : http://tekny-net.blogspot.com/

    ردحذف
  6. ]]> اخي لم اجد هذه الكلمة في قالبي

    ردحذف
  7. الطريقه ما عملت معى

    ردحذف
  8. من فضلك انا عندي حساب علي جوجل ادسنس والعلانات لم تظهر في المدونه ماذا افعل ارجو الرد

    ردحذف

عن الكاتب :

إرشادات

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

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

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

    كلمة الختام

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