حصرياتالمزيد

الاثنين، 5 مارس 2018

احصل على هذة الاداة من هنا

اضافة نمودج الاتصال وصندوق الاشتراك معا



السلام عليكم ورحمة
الله وبركاته


 نقدم لكم في هذه التدوينة اضافة من تصميم عصام ويب 100%
وهي عبارة عن سلايدر منبثق بتويبين لعرض نمودج
الاتصال وصندوق الاشتراك كلاهما معا






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

    1. توجه الى القالب ثم تحرير html
    2. الكود التالي هو كود الزر ضعه في المكان الذي يناسبك
<a class="modal-open" href="#modal-tabbed">اضغط هنا</a>


      1. ابحث عن </head> وضع فوقه الكود التالي
    <style>
    a.modal-open {
      display:block;
      padding:20px;
      color:#424242;
      font-weight:bold;
      margin:50px auto;
      width:200px;
      background:#e0e0e0;
      border-radius:2px;
      text-align:center;
      text-decoration:none;
      font-family: droid arabic kufi;
    }
    .modal {
      background:rgba(0,0,0,0.7);
      position:fixed;
      width:100%;
      height:100%;
      top:0px;
      left:0px;
      bottom:0px;
      transition:all .5s ease-in-out;
      opacity:0;
      z-index:-1;
    }
    .modal:target {
      opacity:1;
      transition:all .5s ease-in-out;
      z-index:+1;
    }
    .modal-content {
      position:fixed;
      top:50%;
      left:50%;
      width:500px;
      background:#fff;
      border-radius:4px;
      transform:translate(-50%, -200%);
      transition:all .5s ease-in-out;
      perspective: 1000;
      outline:1px solid transparent;
      opacity:0;
      font-family: droid arabic kufi, sans-serif;
    }
    .modal:target .modal-content {
      transform:translate(-50%, -50%);
      transition:all .5s ease-in-out;
      transition-delay:.5s;
      z-index:9999;
      opacity:1;
    }
    .modal-close {
      float:left;
      text-decoration:none;
          width: 8%;
      color:#424242;
      font-weight:800;
      transition:all .5s ease-in-out;
      z-index:+1;
      background:rgba(0,0,0,0.1);
      text-align:center;
          height: 40px;
        line-height: 3;
    }
    .modal-close:hover {
      color:#fff;
      background:rgba(0,0,0,0.5);
    }
    .modal-content h3 {
      padding:20px;
      display:block;
      text-align:center;
      border-bottom:1px solid #e0e0e0;
      text-transform:uppercase;
      background:rgba(2,162,239,1);
      color:#fff;
      border-radius:4px 4px 0 0;
    }
    .modal-area {
      padding:0;
    }
    
    .modal-area input[type="radio"] {
      display:none;
    }
    .modal-area label {
      float:right;
      display:block;
      padding:6px 20px;
      font-weight:700;
      cursor:pointer;
      z-index:+2;
      background:rgba(0,0,0,.3);
      color:#fff;
      transition:all .5s ease-in-out;
      width: 46%;
          text-align: center;
    }
    .modal-area input[type="radio"]:checked + label {
      background:#fff;
      color:#424242;
    }
    .tab-list {
      display:block;
      padding:20px;
      margin:0;
      list-style-type:none;
      width:100%;
      overflow:hidden;
      height:460px;
      transition: 0.5s;
    }
    ul.tab-list.clicked {
        height: 248px;
    }
    .tab-list:before {
      content:"";
      display:block;
      height:0;
      clear:both;
    }
    .modal-tab {
      display:inline-block;
      width:92%;
      padding-top:20px;
      transform:translateX(-150%);
      transition:all 300ms cubic-bezier(0, 0, .40, 1);
      opacity:0;
      top:0px;
      position:absolute;
      height:150px;
      perspective:1000;
          text-align: right;
    }
    #opentab1:checked ~ .tab-list .tab1 {
      transform:translateX(0%);
      opacity:1;
    }
    #opentab2:checked ~ .tab-list .tab2 {
      transform:translateX(0%);
      opacity:1;
    }
    </style>




      1. ابحث عن </body> وضع فوقه الكود التالي
    <div class="modal" id="modal-tabbed">
      <div class="modal-content">
        <a href="#" class="modal-close" title="Close Modal">X</a>
        <div class="modal-area">
          <input id="opentab1" type="radio" name="modaltabs" checked="checked"/>
          <label id="opentab4" for="opentab1">اتصل بنا</label>
          <input id="opentab2" type="radio" name="modaltabs"/>
          <label id="opentab5" for="opentab2">اشترك</label>
          <ul class="tab-list">
            <li class="modal-tab tab1">
              <form name="contact-form">
    الاسم الكريم 
    <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
    
    البريد الإلكتروني <span style="border-radius: 3px;
        color: #fafafa;
        font-size: x-small;
        font-weight: bold;
        background: #f56954;
        padding: 0 5px;">مهم</span> 
    <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
    
    الرسالة <span style="border-radius: 3px;
        color: #fafafa;
        font-size: x-small;
        font-weight: bold;
        background: #f56954;
        padding: 0 5px;">مهم</span>
    <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
    <input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />  
    <div style="max-width: 222px; text-align: center; width: 100%;">
    <div id="ContactForm1_contact-form-error-message">
    </div>
    <div id="ContactForm1_contact-form-success-message">
    </div>
    </div>
    </form>
    <style scoped="" type="text/css">
    #comments {display:none;}
    #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
    height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;width: 100%;border:1px solid #e6e5e5;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
    #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px 0;background:#fafafa;color:#444;border:1px solid #e6e5e5;border-radius:3px;resize:none;transition:all 0.5s ease-out;}
    #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgb(245, 105, 84);box-shadow:0 0 5px rgb(245, 105, 84);}
    #ContactForm1_contact-form-submit{float:left;background:#f56954;font-family: droid arabic kufi;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
    #ContactForm1_contact-form-submit:hover {background:#2A2B2B;color:#fff;}
    #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
    .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
    .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
    img.contact-form-cross {line-height:40px;margin-left:5px;}
    .post-body input {width:initial;}
    @media only screen and (max-width:640px){
    #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
    </style>
            </li>
            <li class="modal-tab tab2">
              <style>
    #subscribe-box {background-color:#fff;}
                #subscribe-box .emailfield input:focus {
        outline: none;
        background: #fff;
        color: #444;
        border-color: rgb(245, 105, 84);
        box-shadow: 0 0 5px rgb(245, 105, 84);
    }
    #subscribe-box p {font-size: 18px; color: #fff; padding: 10px 20px 0 20px; margin: 0; font-family: 'Noto Sans Kufi Arabic', sans-serif!important; text-align: center;    font-weight: bold;}
    #subscribe-box .emailfield {padding:0;}
    #subscribe-box .emailfield input {background: #f9f9f9; color: #bbb; padding: 10px; margin-top: 24px; font-size: 13px; width: 100%; border: 1px solid #e6e5e5; transition: all 0.4s ease-in-out; font-family: droid arabic kufi; border-radius: 2px!important;text-align: right;}
    #subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
    #subscribe-box .emailfield .submitbutton {background: #4D504F; color: #fff;font-weight: 700; font-size: 12px;  border: none; outline: none; width: 100%; cursor: pointer; border-radius: 3px!important; transition: all 0.4s ease-in-out;text-align: center;}
    #subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
    #subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;} 
    </style>
    <div id="subscribe-box">
    <div class="emailfield">
    <form action="https://feedburner.google.com/fb/a/mailverify?uri=xxxxx/TFDh" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=xxxx/TFDh, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    <input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;الاسم الكريم&quot;;}" onfocus="if (this.value == &quot;الاسم الكريم&quot;) {this.value = &quot;&quot;;}" type="text" value="الاسم الكريم" />
    <input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;البريد الالكتروني&quot;;}" onfocus="if (this.value == &quot;البريد الالكتروني&quot;) {this.value = &quot;&quot;;}" type="text" value="البريد الالكتروني" />
    <input name="uri" type="hidden" value="xxxxx" />
    <input name="loc" type="hidden" value="en_US" />
    <input class="submitbutton" type="submit" value="اشترك الآن" />
    </form>
    </div>
    </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <script type='text/javascript'>
    $('#opentab5').on('click', function() {
        $('.tab-list').addClass('clicked');
    });
    $('#opentab4').on('click', function() {
        $('.tab-list').removeClass('clicked');
    });
      </script>





  1. ثم قم بتغيير ما يلي                                                 

  2. xxxxx باسم رابط الخلاصة




      1. اذا واجهت اي مشكلة ضعها بتعليق





    EmoticonEmoticon