Start typing and press Enter to search

مساحة إعلانية متجاوبة
فنون

الخميس، 29 مارس 2018

اضافة نموذج اتصل بنا منزلقة

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

شرح طريقة التركيب
1. داخل القالب ابحث عن </head> وضع الكود التالي فوقه[قبله] 

<style>
/* CSS Contact-Us qaisi1web*/
#mbl-contact .ContactForm {
    margin: 0px!important;
}
#mbl-contact .contact-form-button-submit {
    max-width: none;
    width: 130%;
    height: 35px;
    border: 0;
    background-image: none;
    background-color: #32C2A5;
    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: 77% !important;
    background-color: #EEE;
    color: #555;
    width: 300px;
    z-index: 9999;
}
#mbl-contact #contact .contact-form-widget {
    padding: 30px;
    display: none;
}
#mbl-contact #contact {
    position: fixed;
    bottom: 0;
    right: 1%;
    background-color: #EEE;
    color: #555;
    width: 300px;
    z-index: 1.0E+15;
}
#mbl-contact #contact h2.title {
    margin: 0px;
    font-weight: 400;
    background-color: #32C2A5;
    color: #FFF;
    padding: 8px 15px;
    font-size: 16px;
    cursor: pointer;
    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 lolblogger;
    width: 130%;
}
#mbl-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
    max-width: none;
    margin-bottom: 15px;
}
</style>
 ابحث عن <body> وضع الكود التالي بعده [اسفله] 
<div id='mbl-contact'>
<b:section class='contact' id='contact' maxwidgets='1' showaddelement='yes'>
  <b:widget id='ContactForm2' locked='true' title='اتص بنا' type='ContactForm'>
    <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>


https://qaisi1web.blogspot.com/2016/02/Contact-Us-form-sliding.html

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

إرسال تعليق

test section describtion