إضافة نموذج الإتصال منبثقة v1

الكاتب بتاريخ عدد التعليقات : 5

مرحبا بكم أصدقائي متابعين مدونة مهووسين الويب في إضافة جديدة في المدونة وهي إضافة اداة إتصل بنا او ما يعرف بـ"نموذج الإتصال" وهو اداة من بلوجر تستطيع وضعها بالسايدبار او الفوتر (الطريقة الطبيعية) ولكن هذه المرة بشكل اخر صحيح ان الاضافة موجودة بأشكال كثيرة ولكن هذه افضل شكل لها اذا لنبدأ الشرح وقبل اي شئ يجب عليك أخذ نسخة إحتياطية من القالب او العمل في مدونة تجريبية اذا كنت مبتدأ في بلوجر.

طريقة التركيب
1 . قبل كل شيئ أضف الكود التالي خاص بالأيقونات ضعه فوق </head> إذا كنت تتوفر عليه فلا داعي لإضافته
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
2 . توجه لقالب >> تحرير 3. ابحث بإستعمال CTRL+F عن ]]></b:skin> ضع الكود التالي فوقه
 /*----contact-button-----------*/
      .contact-button {}
      .contact-button a {padding: 9.7px;color: #FFFFFF;display: inline-block;width: 50px;height: 60px;font-family: droid arabic kufi;background: #22A1C4;text-shadow: 0 -1px 0 rgba(115, 114, 114, 0.3);float: left;}
      .contact-button a:hover {box-shadow:inset 0 60px 0 #2797B7;}
      #search-button button.open:hover {box-shadow:inset 0 60px 0 #2797B7;}
      .contact-close:hover {color: #0894D8;background: #2797B7;}
      .contact-sec {border: 1px solid #eee;position: fixed;top: 50%;margin-top: -190px;left: 50%;max-width: 300px;width: 90%;margin-left: -150px;background-color: #FFF;height: auto;z-index: 99999;display: none;-webkit-transform: scale(0);-moz-transform: scale(0);transform: scale(0);transition: all .5s ease;webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;}
      .contact-close {position: absolute;top:-1px;background-color: #2797B7;color: #FFF!important;height: 40px;width: 40px;text-align: center;line-height: 40px;font-size: 13px;left: 87.1%;}
      .contact-sec .widget {padding: 20px;}
      .contact-sec .contact-form-cross {display: none;}
      #ContactForm1 h2 {width: 116%;font-size: 16px;text-align: center;line-height: 40px;height: 40px;font-weight: 500;color: #fff;background-color: #22A1C4;padding-bottom: 8px;top: -21px;left: 20px;}
      .contact-sec.contact-show {-webkit-transform: scale(1);-moz-transform: scale(1);transform: scale(1);}
      contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-widget {max-width: none;padding: 5px;  text-align: right;}
      .contact-form-name, .contact-form-email, .contact-form-email-message {background-color: #f3f3f3;width: 250px;border: 0;}
      .contact-form-button-submit {max-width: none;width: 100%;height: 35px;border: 0;background-image: none;background-color: #0894D8;cursor: pointer;color: #fff;}
      .contact-form-name:focus, .contact-form-email:focus, .contact-form-email-message:focus {border: 0;box-shadow: none;}
      .contact-form-name:hover, .contact-form-email:hover, .contact-form-email-message:hover {border: 0;}
      .contact-form-button-submit:hover {background-color: #222;background-image: none;border: 0;}
      input#ContactForm1_contact-form-name, input#ContactForm1_contact-form-email{padding: 8px;background: #F7F7F7;border: 1px solid #ECECEC;margin-bottom: 10px; width:100%;}
      textarea#ContactForm1_contact-form-email-message {padding: 8px;background: #F7F7F7;border: 1px solid #ECECEC;margin-top: 10px;width: 100%;}
      .contact-button {margin-left:-50px;float: left;font-family: droid arabic kufi;}
      #ContactForm1_contact-form-submit {background: #FFFFFF;color: #4993A8;font-weight: 100;width: 110%;font-family:'ge_ss_threeregular',Droid Sans;height: 40px;margin-right: -16px;font-size: 14px;border: 1px dashed #4993A8;float: right;margin-top: 10px;}
      #ContactForm1_contact-form-submit:hover {color: #fff;background: #2797B7;}
      #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 135%;margin-top: 62px;font-size: 13px;font-weight: 100;color: #FFF;font-family: 'ge_ss_threeregular',Droid Sans;margin-right: -26px;background: #22A1C4;}
      .contact-form-error-message-with-border {background: #ED5345;border: none;box-shadow: none;color: #fff;padding: 5px 10px;font-family: 'ge_ss_threeregular',Droid Sans;font-weight: 100;}
      .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
      img.contact-form-cross {line-height:40px;margin-left:5px;}
      form i.fa.fa-pencil, form i.fa.fa-users,form i.fa.fa-envelope,form i.fa.fa-bars {padding:3px 5px;border-radius:3px;font-weight:normal;font-size:120%;float: right;
        margin-left: 10px;}
      form i.fa.fa-users {color:#ffa726;}
      form i.fa.fa-envelope {color:#22A1C4;}
      form i.fa.fa-pencil{color:#22A1C4;}
      .contact-button .fa.fa-envelope {
        margin: 7px;
        margin-top: 12px;
      }
4 . ابحث عن </body> وضع فوقه الكود التالي
<script type='text/javascript'>
   $(&quot;.contact-button a&quot;).click(function() {
        var e = $(&quot;.contact-sec&quot;);
        if (e.is(&quot;:hidden&quot;)) {
            e.fadeIn(300);
            e.addClass(&quot;contact-show&quot;);
            $(&quot;#outer-wrapper&quot;).addClass(&quot;pop_contact &quot;)
        }
        return false
    });
    $(document).bind(&quot;click&quot;, function(e) {
        if ($(e.target).parents(&quot;.contact-sec&quot;).length === 0) {
            $(&quot;.contact-sec&quot;).fadeOut(300);
            $(&quot;#outer-wrapper&quot;).removeClass(&quot;pop_contact &quot;);
            $(&quot;.contact-sec&quot;).removeClass(&quot;contact-show&quot;)
        }
    });
    $(&quot;.contact-close&quot;).click(function() {
        $(&quot;.contact-sec&quot;).fadeOut(300);
        $(&quot;#outer-wrapper&quot;).removeClass(&quot;pop_contact &quot;);
        $(&quot;.contact-sec&quot;).removeClass(&quot;contact-show&quot;);
        return false
    });
</script>
5 . إبحث عن <body> وضع الكود التالي اسفلها
*إذا لم تجد <body> قم بالبحث عن footerwrapper أو عن footer-wrapper وضع الكود التالي فوقه
<b:section class='contact-sec' id='contact-sec' maxwidgets='1' showaddelement='yes'>
     <b:widget id='ContactForm1' locked='true' 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'>
<span style='text-align: right;'>
<i class='fa fa-users'/>
الإسم الكريم
</span>
<input id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<span style='text-align: right;'>
<i class='fa fa-envelope'/>
البريد الإلكتروني
</span>
<input id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<span style='text-align: right;'>
<i class='fa fa-pencil'/>
الرسالة
</span>
<textarea cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'/>
<input id='ContactForm1_contact-form-submit' type='button' value='أرسل'/>
<br/>
<div style='max-width: 222px; text-align: center; width: 100%;'>
<div id='ContactForm1_contact-form-error-message'>
</div>
<div id='ContactForm1_contact-form-success-message'>
</div>
</div>
</form>
</div>
</div>
<a class='contact-close' href='#'>
<i class='fa fa-times'/>
</a>
</b:includable>
     </b:widget>
   </b:section>
6 . الكود الآتي هو لتفعيل ظهر أيقونة الإتصال يمكنك إضافتها بأي مكان تراه مناسب
<div class='contact-button'><a href='#'><i class='fa fa-envelope'/></a></div>

5 تعليقات على موضوع " إضافة نموذج الإتصال منبثقة v1 "

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء