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


    السلام عليكم ورحمة الله تعالى وبركاته
    مع جديد لاضافات الخاصه ببلوجر اليوم اقدم لكم اضافه خاصه بمدونة القيسي ويب  مهمة في اي مدونة او اي موقع حتى في المواقع الاجتماعية فهي اضافة اهميه وجودها في مدونتك كبيره اذ تمكن زائر مدونتك من التواصل مع مدير الموقع او المدونة ، مايميز هذه الاضافة انها سهله الوصول اليها يعني لن يواجه الزائر صعوبه في الوصول اليها ولا حتى صعوبة في الاتصال بمدير الموقع ،فهي مثبتة على المدونة كاملة في النزول أو الصعود وهذا ايضا سيسهل على الزائر التواصل بضغطة زر لكي تظهر وبضغطة زر لكي يرسل الرسالة 😎 جميلة أليست كذلك ولهذا سأترككم لتركبوها لمدونتكم.
    شرح طريقة التركيب
    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>
    
    2 - ابحث عن <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>
    
    إقرأ أيضًا
    انشاء صفحة أتصل بنا بشكل احترافي ومميز

    السلام عليكم ورحمة الله تعالى وبركاته مع جديد لاضافات الخاصه ببلوجر اليوم اقدم لكم اضافه خاصه بمدونة القيسي ويب  مهمة في اي...

    روابط الموضوع للنسخ

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

    السلام عليكم ورحمة الله تعالى وبركاته مع جديد لاضافات الخاصه ببلوجر اليوم اقدم لكم اضافه خاصه بمدونة القيسي ويب  مهمة في اي...

    22 تعليقات
    كيف تعلق ؟

    1. وماالجديد دائما مبدع

      ردحذف
      الردود
      1. اشكرك اخي على مدحك ... شكرا ^__^

        حذف
    2. جميل اخي استمر

      ردحذف
    3. أخي لم أجد عندي body أجد فقط body/ !!?
      http://teqnet02.blogspot.com/

      ردحذف
      الردود
      1. اهلا اخي ، ابحث عن هذه <body class='index'> وضع الكود بعده او اسفله

        حذف
    4. اخي اجرب ارسل رسالة ولاكن لم تصلني ابدا ما المشكل

      ردحذف
      الردود
      1. اخي الرساله تصلك على بريدك الالكتروني .. يرجى تزويدنا برابط مدونتك لنرى المشكله

        حذف
    5. اين تصلني الرساله

      ردحذف
    6. هل اقدر انقل موقعها من اليسار الى اليمين

      ردحذف
      الردود
      1. نعم .. قم بالبحث عن
        #mbl-contact #contact
        سوف تجد مقابله right: 77% !important;
        احذفه حتى تصبح في اليمين

        حذف
    7. يا اخي لم تصلني الرسالة ابدا ولا اعرف ما المشكل

      ردحذف
      الردود
      1. اخي الكريم تصلك في بريدك الجيميل

        حذف
    8. جزاك الله خير على الشرح الاكثر من رائع

      ردحذف
      الردود
      1. الله يسعدك اخي .. هذه واجبي

        حذف
    9. جزاك الله خير على الشرح الاكثر من رائع

      ردحذف
      الردود
      1. الله يسعدك اخي نحن في الخدمة

        حذف
    10. لا اعلم لم اجد كلمة ال body هل هذا ممكن

      ردحذف
      الردود
      1. مستحيل اخي هذه الوسم موجود على كل قوالب بلوجر
        ابحث عنه كالتالي:-
        <body
        سوف تجده بالتاكيد

        حذف
    11. السلام عليكم اخي
      انا احبك في الله
      لانك انسان مميز وتحب مساعده الناس
      وقد قمت بتجربه قالب فكرة مين
      وشكراا لمجهودك الكبير
      الله يوفقك لكل خير اخي

      ردحذف
      الردود
      1. يسعدك ربي اخي، من واجبي مساعدة كل مبتديء ، وهدفي تطوير الويب العربي 😀

        حذف

    contact-us

    الاسم

    بريد إلكتروني *

    رسالة *