U3F1ZWV6ZTgwNzczMjc0MDNfQWN0aXZhdGlvbjkxNTA0OTc4MjA3
recent
أخبار ساخنة

اضافة زر ملاحظات مهمة لقوالب البلوجر




إضافة غاية في الروعة و الاحترافية

اضافة زر ملاحظات مهمة

بعد الضغط على الزر تظهر صفحة الملاحظات بشكل منبثق 


شرح تركيب الاضافة


ندخل الى المظهر و نبحث عن ]]></b:skin> و نضع الكود التالي فوقه



/* Modal button */
.modal-btn{font-family:'Cairo', sans-serif;letter-spacing:1px;    float: left;border:none;outline:none;cursor:pointer;padding:10px 25px;background-color:#ef6633;color:#fff;transition:all .3s}
.modal-btn:hover{background-color:#d25729}
/* Modal Iris-Tips.blogspot.com*/
.modal{background-color:rgba(0,0,0,.65);display:none;overflow:auto;position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%}
/* Modal Content */
.modal-content{position:relative;top:0;width:600px;margin:0 auto;background-color:#e5f361;//background-color:#fff;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.modal-animated-in{animation:totop-in .3s ease}
.modal-animated-out{animation:totop-out .3s ease forwards}
.modal-header{background-color:#111;width:86%;height:60px;line-height:60px;padding-right:84px}
.modal-content .close{position:absolute;right:0;top:0;background-color:#222;width:60px;height:60px;color:#fff;line-height:60px;text-align:center;cursor:pointer;transition:all .3s}
.modal-content .close:hover{background-color:#fff;color:#222}
/* Modal Body */
.modal-body{padding:0 20px}
.modal-body ul{margin:0;padding:0;list-style:none}
.modal-body ul li{position:relative;display:block;margin-left:20px;color:#555}
.modal-body ul li::before{position:absolute;content:'\f00c';color:#5cc560;left:-20px;top:10px;display:inline-block;font:normal normal normal 14px/1 FontAwesome;text-rendering:auto;-webkit-font-smoothing:antialiased}
/* Modal Footer */
.modal-footer{background-color:#111;width:96%;height:60px;line-height:60px;padding-right: 24px;padding-left:0px}
.modal-header h3,.modal-footer h3{color:#fff}
/* Keyframes */
@keyframes totop-in{0%{top:600px;opacity:0}100%{top:0;opacity:1}}
@keyframes totop-out{0%{top:0;opacity:1}100%{top:-100%;opacity:0}}




ثم نبحث عن </body> و نضيف الكود التالي فوقه


<script type='text/javascript'>
$(function() {

  // Vars
  var modBtn  = $('#modBtn'),
      modal   = $('#modal'),
      close   = modal.find('.close'),
      modContent = modal.find('.modal-content');

  // open modal when click on open modal button
  modBtn.on('click', function() {
    modal.css('display', 'block');
    modContent.removeClass('modal-animated-out').addClass('modal-animated-in');
  });

  // close modal when click on close button or somewhere out the modal content
  $(document).on('click', function(e) {
    var target = $(e.target);
    if(target.is(modal) || target.is(close)) {
      modContent.removeClass('modal-animated-in').addClass('modal-animated-out').delay(300).queue(function(next) {
        modal.css('display', 'none');
        next();
      });
    }
  });

});
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>




الان ناتي لتركيب الزر يمكنك اختيار مكان مناسب مثلا فوق رسائل المدونة الالكترونية 



  <!-- Modal button -->
  <button id="modBtn" class="modal-btn">  ملاحظة مهمة</button>
</div>
<!-- Modal -->
<div id="modal" class="modal">
  <!-- Modal Content -->
  <div class="modal-content">
    <!-- Modal Header -->
    <div class="modal-header">
      <h3 class="header-title">ملاحــظة مهمــة</h3>
      <div class="close fa fa-close"></div> 
    </div>
    <!-- Modal Body -->
    <div class="modal-body">
      <h3>أهلا بكم زوار و متابعي مدونة هلا تك</h3>
      <p>نظرا لبعض الأمور التقنية قد تلاقي بعض المشاكل</p>
      <p>سنحاول بقدر المستطال و السرعة التوصل للحل.</p>
      <ul>
        <li>يمكنك تحديث الصفحة .</li>
        <li>يمكنك الانتظار عدة ايام.</li>
        <li>يمكنك الاتصال بنا.</li>
        <li>يمكنك مراسلتنا.</li>
      </ul>
      <p>و نرجوا من حضراتكم الصبر لحل المشكلة ثق تماما نحن هنا لخدمتكم و لكم منا كل الشكر و التقدير و الأحترام .</p>
    </div>
    <div class="modal-footer">
      <h3>مدونــة هلا تــك </h3>
    </div>
  </div>


التعديلات



يمكنك التعديل على النص مثلما تريد


و ثم قم بالحفظ و مبروك عليك الاضافة
الاسمبريد إلكترونيرسالة