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


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

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

avatar

اشكرك اخي على مدحك ... شكرا ^__^

avatar

جميل اخي استمر

avatar

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

avatar

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

avatar

اخي اجرب ارسل رسالة ولاكن لم تصلني ابدا ما المشكل

avatar

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

avatar

اين تصلني الرساله

avatar

هل اقدر انقل موقعها من اليسار الى اليمين

avatar

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

avatar

في بريدك الــ Gmail

avatar

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

avatar

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

avatar

اخي الكريم تصلك في بريدك الجيميل

avatar

الله يسعدك اخي .. هذه واجبي

avatar

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

avatar

الله يسعدك اخي نحن في الخدمة

avatar

لا اعلم لم اجد كلمة ال body هل هذا ممكن

avatar

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

avatar

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

avatar

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

كيف تعلق ؟

نموذج الاتصال

الاسم

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

رسالة *