اضافة اتصل بنا كنافذة منبثقة على مدونات بلوجر - فرسان الترافيك -

728x90 AdSpace

22‏/2‏/2017

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

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


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


اضافة هذا الكود قبل </BODY>
<div id='mbl-contact'>
<b:section class='contact' id='contact' maxwidgets='1' showaddelement='yes'>
  <b:widget id='ContactForm2' locked='true' title='Contact us' type='ContactForm' version='1' visible='true'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><i class='fa fa-paper-plane'/> <data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/>
        <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'/>
        <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:includable>
  </b:widget>
</b:section>
</div>
<script type='text/javascript'>
 //<![CDATA[
$( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");});
   //]]>
</script>



ثم اضافة هذا الكود في skin


#mbl-contact .ContactForm {
    margin: 0px!important;
}
#mbl-contact .contact-form-button-submit {
    max-width: none;
    width: 100%;
    height: 35px;
    border: 0;
    background-image: none;
    background-color: #FA411E;
    cursor: pointer;
    font: normal normal 13px Open Sans;
    font-style: normal;
    font-weight: 400;
}
.#mbl-contact .contact-form-button-submit:hover {
    background-color: #222;
    background-image: none;
    border: 0;
}
#mbl-contact #contact {
    position: fixed;
    bottom: 0;
    right: 75%;
    background-color: #EEE;
    color: #555;
    width: 300px;
    z-index: 1.0E+15;
}
#mbl-contact #contact .contact-form-widget {
    padding: 30px;
    display: none;
}
#mbl-contact #contact {
    position: fixed;
    bottom: 0;
    right: 75%;
    background-color: #EEE;
    color: #555;
    width: 300px;
    z-index: 1.0E+15;
}
#mbl-contact #contact h2.title {
    margin: 0px;
    font-weight: 400;
    background-color: #FA411E;
    color: #FFF;
    padding: 8px 15px;
    font-size: 16px;
    cursor: pointer;
    letter-spacing: 3px;
    text-align: center;
}
#mbl-contact #contact h2.title .fa {
    position: absolute;
    left: 10px;
    top: 12px;
}
#mbl-contact #contact .contact-form-widget {
    width: 240px;
    padding: 30px;
    display: none;
}
#mbl-contact #contact * {
    transition: all 0 ease;
    -webkit-transition: all 0 ease;
    -moz-transition: all 0 ease;
    -o-transition: all 0 ease;
}
#mbl-contact #contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message {
    background-color: #DDD;
    color: #111;
    border: 0;
    padding: 10px 5px;
    font: normal normal 13px Open Sans;
}
#mbl-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
    max-width: none;
    margin-bottom: 15px;
}
>
طباعة الموضوع
اضافة اتصل بنا كنافذة منبثقة على مدونات بلوجر Reviewed by Traffic Warriors on 2/22/2017 Rating: 5 اضافة اتصل بنا كنافذة منبثقة على مدونات بلوجر من يريد اضافة اتصل بنا كنافذة منبثقة من أسفل البلوجر فعليه اتباع المراحل التالية : اضافة ...

ليست هناك تعليقات:


تنبيه : الإساءة ممنوعة في التعليقات