حصريا... قالب جدول المباريات متقدم مع مشغل المباريات على بلوجر

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

الجدول عبارة عن قالب يتوفر على جدول المباريات اليومي فقط اما طريقة عرضه على موقعك او مدونتك هي عبر كود iframe و هي طريقة سهلة جدا بدون التعديل على القالب الخاص بك.

تحميل القالب

انشئ مدونة جديدة ثم استعمل قالب التنظيف للمدونة الجديدة بعد التنظيف ارفع القالب على المدونة ، اذا قمت بمعاينة المدونة سوف تجدها فارغة بدون شئ ، انسخ الكود ادناه فهو عبارة عن بطاقة للمباراة الواحدة غير اسماء الفريقين ثم رابط التدوينة للمشاهدة ايضا غير روابط صور الفريقين ثم المعلق الخ...

<ul class="match">
<a title="الدحيل Vs السد القطري" target="_blank" href="رابط التدوينة الخاصة بهذه المباراة">
<ul class="meeting">
<ul class="team right">
<div class="logo"><img alt="الدحيل" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEhbcpEsrtdbAoCBiZgejTKXi6KkXYWOs1n5tUaYfI6_GJaZNxJbzrWb2c26Spg_SyMqFSlYz9XARVl-ydsmK7wE81yotg2taZ2pp7SauclUcCHn47GViqgAIFuCybZGTavdKEWYpTT2Jx76BARsf1dU4H2I1R_Yc2V03Xjz96M=s0-d"/></div>
<li>الدحيل</li>
</ul>
<ul class="case"> 
<li class="result">1</li>
<div class="time1">
<li class="time">
<div class="stay stsrt"></div>
<div class="date stay style colorDefinition size_sm" data-gameends="2020-01-17 20:50+01:00" data-start="2020-01-17 20:00+01:00"></div> 
</li>
</div>
<li class="result">0</li>
</ul>
<ul class="team left">
<div class="logo"><img alt="السد القطري" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEh9uKeVAHhJ6vrnxpB8ZrzZvuBjOjIVO_RdVH0lhwzkiedmOFv8H17sXibLLBhCvJ5nr8iFOXR7dHnmzY6PwcVjyRPI6w0ldvvG4gcw3W6eD7n5-No3NqO3nE8tvHUEtEdnw6vXz87kd9SfuqzKHSjVQ11urFBuCFCxSfPfxis=s0-d"/></div>
<li>السد القطري</li>
</ul>
</ul>
<ul class="info">
<li class="mb television"> بي ان سبورت</li>
<li class="mb trophy">كأس قطر</li>
</ul>
</a>
</ul>

بالنسبة للوقت فهو تلقائيا يظهر على الجدول بدون تدخل منك مع عداد تنازلي .

قبل بداية المباراة ب 15 : سوف تنطلق بعد قليل
عند بداية المباراة : مباشر الآن
عند انتهاء المباراة : انتهت شاهد الملخص

هذه هي الديناميكية التي يشتغل عليها السكربت و هذا يتم تلقائيا بدون تدخل منك اما بخصوص الوقت فهو سهل.
ابحث عن كلمة data-start بجانبها سوف تجد الوقت و التاريخ مع رقم لزيادة الساعة حسب الدولة التي تريد عرض الوقت عليها

مثال:
2020-01-17 20:50+01:00

يوم 17 شهر 01 سنة 2020 على الساعة 20:50 رقم +01:00 يعني مثلا انا مغربي اريد كتابة الوقت المغربي لكن اريد ان يعرض على الجدول بالوقت السعودي او مصري اتمنى ان تصل الفكرة فهو يغير المنطقة الزمنية .

ايضا ابحث عن هذه الكلة data-gameends تعني وقت نهاية المباراة من الافضل ان تضع زمن المباراة هو ساعتين مثلا من 19:45 الى 21:45 لان المباريات مدتها ساعتين فقط .

هذه المعلومات التي يجب تغييرها فهي سهلة تغيير الصور و اسماء الفرق مع تغيير الوقت ليظهر بشكل تلقائي في الجدول , الان اذا انتهيت من اكتمال الجدول و تريد عرضه على مدونتك او موقعك استخدم هذا الكود فهو iframe ضع به رابط تلك المدونة الجديدة التي وضعت عليها الجدول ثم اذهب الى الموقع الخاص بك الى التخطيط اختر اضافة اداة Javascript ثم ضع بها ذلك الكود انتهيت.

<iframe allowfullscreen='true' frameborder='0' height='550px' scrolling='no' src='https://testing45.blogspot.com' width='100%'></iframe>

الان سوف تغير عدد الاهداف و كل شيء من المدونة الجديدة التي بها قالب الجدول بسهولة.

الان لنرى طريقة اضافة مشغل المباريات الحصري على موقعنا انسخ هذه الروابط ادناة Javascript ضعها فوق head على موقعك .

<script src="https://cdn.jsdelivr.net/clappr/latest/clappr.min.js"></script>
<script src="https://cdn.jsdelivr.net/clappr.level-selector/latest/level-selector.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/clappr/dash-shaka-playback@latest/dist/dash-shaka-playback.js"></script>
<script src="https://cdn.jsdelivr.net/clappr.chromecast-plugin/latest/clappr-chromecast-plugin.js"></script>

الآن طريقة اضافة المشغل

مثلا انشئ 10 صفحات تابثة جديدة يعني 10 قنوات bien sport لكل صفحة ضع بداخلها هذا الكود ادناه مع تغيير رابط القناة , بعد و ضع المشغل على الصفحات و القنوات

<div id='player'></div>
<script>
//<![CDATA[ 
player=new Clappr.Player({source:"http://xtream.servers.web.tr:8888/live/rJ5w9zNXXs/tbJASozhc9/22.m3u8",
plugins:[DashShakaPlayback,LevelSelector,ChromecastPlugin],parentId:"#player",width:"100%",height:"530px",poster:"",hideMediaControl:!0,mediacontrol:{seekbar:"#007acc",buttons:"#007acc"},chromecast:{appId:"9DFB77C0",contentType:"video/mp4",media:{type:ChromecastPlugin.Movie,title:"yalla shoot 7sry",subtitle:"You won't get much closer to Skylining than this!"}},autoPlay:!0});
//]]>
</script>

السؤال المطروح الآن هو كيف تضع تلك القنوات داخل المواضيع الطريقة سهلة جدا عبر هذا الكود iframe ادناه ضع رابط الصفحة التابتة للقناة التي تريدها ثم في اخر الموضوع غير من جهة التأليف الى html ثم ضع الكود مباشرة عند الدخول الى التدوينة سوف تجد المشغل تم اضافته بسهولة بدون معانات .

<iframe allowfullscreen='true' frameborder='0' height='550px' scrolling='no' src='https://testing45.blogspot.com' width='100%'></iframe>

اظن الآن كل شيء واضح اتمنى ان اكون شرحت الطريقة بالتفصيل ليفهم الكل اذا واجت مشاكل في التركيب او اي مشكل ضعه في صندوق التعليقات و سوف نساعدك لحل المشكل نلتقي في درس قادم باذن الله الى اللقاء.