أفضل سكريبت سيرفرات المشاهدة متجاوب مع كل الأجهزة قم بإضافته الآن على موقعك.

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

مميزات سكريبت سيرفرات المشاهدة

  • متجاوب مع جميع الأجهزة والشاشات.
  • يحتوي على أزرار سيرفرات تدعم خاصية الزر الشغال بمعنى اذا ضغطت على سيرفر معين فسوف يتغير لونه لدلالة على انه هو السيرفر الشغال .
انظر الى الصورة كما تلاحظ السيرفر الشغال هو الرقم 5
هذه صورة لسيرفرات المشاهدة

لمعاينة سكريبت سيرفرات المشاهدة

تركيب سكريبت سيرفرات المشاهدة

الأداة تتكون من HTML و CSS و JAVA Script لذلك من الأفضل ان تركز لكي لا تنسى اي شيء 

لنبدأ اولا بتركيب جافا سكريبت

اريدك ان تعلم ان جافا سكريبت تبع الأداة مبنية على Jquery لذلك أتمنى ان تبحث في قالب مدونتك على سكريبت jquery اولا إن لم يكن موجود فقم بإضافة هذا السكريبت فوق </head> .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
بعد اضافة Jquery نقوم بإضافة السكريبت التالي فوق </body> .
<script>
$(document).ready(function(){
  $('.habtns').click(function(){
    $('.habtns').removeClass('hactive');
     $(this).addClass('hactive');
      $("#hwv").attr("src", $(this).data("vurl"));
    });
})
 </script>

والآن سنقوم بإضافة أكواد CSS

قم بإضافة أكواد CSS التالية فوق </head> .
<style>
#haall{position:relative;direction:rtl;text-align:center;width:100%;height:auto;display:block;}
.habtns{display:inline-block;font-size:18px;font-weight:bolder;color:#fff;border:none;padding:5px 10px;margin:6px;border-radius:5px;background-color:#00017d;cursor:pointer;outline:none;box-shadow:0 0 5px #000;transition:200ms;}
.hactive,.habtns:hover{background:#0020ff;box-shadow:0 0 10px #00beff;}
#hvideo{position:relative;width:100%;height:auto;padding-top:61%;border:solid 2px #b4b4b4;border-radius:20px;overflow:hidden;display:block;}
#hvideo iframe{position:absolute;top:0;right:0;width:100%;height:100%;border:none;}
</style>

وفي الآخير اكواد HTML

والآن اليك أكواد HTML التي ستضعها كمشاركة .
<div id="haall">
  <div id="habtns">
    <button class="habtns" data-vurl="#">سيرفر 1</button>
    <button class="habtns" data-vurl="#">سيرفر 2</button>
    <button class="habtns" data-vurl="#">سرفر 3</button>
    <button class="habtns" data-vurl="#">سيرفر 4</button>
    <button class="habtns" data-vurl="#">سيرفر 5</button>
    <button class="habtns" data-vurl="#">سيرفر 6</button>
    <button class="habtns" data-vurl="#">سيرفر 7</button>
    <button class="habtns" data-vurl="#">سيرفر 8</button>
    </div>
  <div id="hvideo">
    <iframe id="hwv" src="#"></iframe>
    </div>            
</div>

مهم جدا

  • لا تنسى استبدال # بروابط فديوهاتك ومن الضروري ايضا ان لا تنسى # الخاصة ب Iframe .
  • يفضل ان تضع نفس الرابط الموجود في سيرفر 1 في Iframe .
  • يمكنك تزويد عدد السيرفرات بالقدر الذي تريد.
شكرا على القراءة اذا واجهتك اي مشكلة اخبرني في التعليقات 😍
Tags:

إرسال تعليق

أحدث أقدم