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

الأحد، 4 فبراير 2018

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

شريط الاشعارات بتقنية jquery



السلام عليكم ورحمة
الله وبركاته
--
 نعود لمك بتدوينة جديدة نقدم لكم اضافة ربما تجدها في بعض المدونات
شريط الاشعارات قمنا بتطويره بتقنية jquery
 فبدل ان تقوم بوضع اشعار ثم تقوم حذفه ووضع اخر مرة تلو الاخرى
أصبح بامكانك عرض كل الاشعارات في ان واحد






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

    1. توجه الى القالب ثم تحرير html
    2. ضع الكود التالي اسفل الناف بار navbar (اختياري)
 <section class="awNotices">
  <a href="https://www.isweeb.com" notice-color="orange"><i class="fa fa-exclamation"></i>هذا النص هو مثال لنص تم استبداله بنص اخر ويمكنك انت ايضا استبداله</a><a notice-color="red"><i class="fa fa-exclamation-triangle"></i>هناك حقيقة مثبتة منذ زمن طويل توحي للقارئ بان النص تم استبداله</a><a notice-color="blue"><i class="fa fa-bullhorn"></i> هذا النص هو مثال لنص تم استبداله بنص اخر ويمكنك انت ايضا استبداله  <a href="https://www.isweeb.com" notice-color="yellow"><i class="fa fa-bell"></i>هذا النص هو مثال لنص تم استبداله بنص اخر ويمكنك انت ايضا استبداله</a><a notice-color="purple"><i class="fa fa-bug"></i>هناك حقيقة مثبتة منذ زمن طويل توحي للقارئ بان النص تم استبداله</a><a notice-color="pink"><i class="fa fa-calendar"></i> هذا النص هو مثال لنص تم استبداله بنص اخر ويمكنك انت ايضا استبداله</a><a notice-color="green"><i class="fa fa-check"></i>هناك حقيقة مثبتة منذ زمن طويل توحي للقارئ بان النص تم استبداله</a><a notice-color="dark"><i class="fa fa-cog"></i> هذا النص هو مثال لنص تم استبداله بنص اخر ويمكنك انت ايضا استبداله</a>
</a><a notice-color="light blue"><i class="fa fa-cloud-download"></i>هناك حقيقة مثبتة منذ زمن طويل توحي للقارئ بان النص تم استبداله</a><a notice-color="gray"><i class="fa fa-coffee"></i> هذا النص هو مثال لنص تم استبداله بنص اخر ويمكنك انت ايضا استبداله</a>
</section>


      1. ابحث عن ]]></b:skin> وضع فوقه الكود التالي
    .awNotices {
      position: relative;
      color: white;
      font: 400 12px droid arabic kufi;
    }
    .awNotices a {
      text-align: center;
      padding: 8px 25px 8px 10px;
      position: absolute;
      left: 0;
      right: 0;
      opacity: 0;
      color: inherit;
      text-decoration: none;
      visibility: hidden;
      transition: opacity .6s;
      border-radius: 3px;
      text-shadow: 0 0 3px rgba(1, 1, 1, 0.3);
      line-height: 150%;
    }
    .awNotices a i.fa {
      padding-left: 8px;
        margin-left: 5px;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        float: right;
        margin: 3px -13px 0;
    }
    .awNotices a[notice-color="orange"] {
      background-color: #ff9800;
    }
    .awNotices a[notice-color="gray"] {
      background-color: #b7b4b4;
    }
    .awNotices a[notice-color="pink"] {
      background-color: #ea5c75;
    }
    .awNotices a[notice-color="light blue"] {
      background-color: #0dc9da;
    }
    
    .awNotices a[notice-color="purple"] {
      background-color: purple;
    }
    .awNotices a[notice-color="yellow"] {
      background-color: #e6e60e;
    }
    .awNotices a[notice-color="red"] {
      background-color: #e51c23;
    }
    .awNotices a[notice-color="blue"] {
      background-color: #3f51b5;
    }
    .awNotices a[notice-color="green"] {
      background-color: #8bc34a;
    }
    .awNotices a[notice-color="dark"] {
      background-color: #414141;
    }
    .awNotices a.active {
      opacity: 1;
      visibility: visible;
    }
    .awNotices span.controller {
      position: absolute;
      cursor: pointer;
      background: transparent;
      left: 0;
      padding: 8px 10px;
      line-height: 150%;
    }




      1. ثم ابحث عن </head> وضع الاكواد التالية فوقه
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/3.2.1/jquery.min.js'></script>
    <script src='https://cdn.rawgit.com/ortilex/ortslider/38ab12eb/noticeisw.js'></script>


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


    EmoticonEmoticon