نافذة اتصل بنا منبثقة لمدونات بلوجر

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

للمعاينة ما عليك سوى الذهاب إلى الصفحة الرئيسية والنزول للأسفل والضغط على الزر الأزرق.

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

1- ابحث عن */]]></b:skin> وأضف فوقه الكود التالي :

.contact-button {
    margin: 0 auto;
    width: 95px;
    background: #0894D8;
    border-radius: 81px 81px 0 0;
    margin-top: 20px;
    margin-bottom: -45px;
}
.contact-button a {
    padding: 19px;
    color: #fff;
    display: inline-block;
    padding-top: 7px;
    font-size: 16px;
}
.contact-close:hover {
    color: #0894D8;
    background: #000;
}
.contact-sec {
    border: 1px solid #0894D8;
    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: -13px;
    background-color: #0894D8;
    color: #FFF;
    height: 25px;
    width: 25px;
    text-align: center;
    border-radius: 25px;
    line-height: 25px;
    font-size: 10px;
}
.contact-sec .widget {
    padding: 20px;
}
.contact-sec .contact-form-cross {
    display: none;
}
#ContactForm1 h2 {
    font-size: 18px;
    text-align: center;
    color: #0894D8;
    border-bottom: 1px solid;
    padding-bottom: 8px;
}
.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;
    margin-bottom: 10px;
    padding: 5px;
}
.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{
  background: #eee;
  padding: 8px;
}

i.fa.fa-envelope {
  margin-right: 14px;
}

.fa-envelope:before {
  font-size: 30px;
  display: block;
  margin-bottom: 7px;
}

.fa-times:before {
  content: "\f00d";
  margin-right: 2px;
}

2- ابحث عن </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>

3- أضف الكود التالي في اي مكان داخل <body> :

<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'>
        <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;'>*</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;'>*</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>
        <a class='contact-close' href='#'><i class='fa fa-times'/></a>
</b:includable>
  </b:widget>
</b:section>

4- ضع كود الزر في الفوتر أو الهيدر أو أي مكان حسب إرادتك :

<div class='contact-button'><a href='#'><i class='fa fa-envelope'/></a></div>

5- في حال عدم توفرك على كود الأيقونات font awesome أضف الكود التالي اسفل <head> :

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

الأن اضغط حفظ وهكذا تكون قد حصلت على الإضافة.

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