سكريبت عرض حلقات بشكل إحترافية بلوجر

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

معاينة

مميزات سكربت عرض فيديوهات على بلوجر

قمت بجرد بعض مميزات هدا كود البسيط

1. شكل بانورامي
2. إضافة عدد كبير من الفيديوهات
3. إضافة وتعديل على فيديوهات يوتوب بشكل يدوي
4. سكربت مستقل عن قالب بلوجر
5. [إستتناء] إمكانية وضع سكربت بدون حاجة إلى تحرير القالب
6. قمت بإضافة تأتير الظل لكل فيديو
7. إمكانية عرض الصور بدل الفيديوهات اليوتوب او هما معا

طريقة إضافة الكود او سكريبت الفيديوهات

بطبعة الحال هده إضافة تتطلب بعض التركيز اولا وقبل كل شئ قم بحفظ نسخة احتياطية لقالبك تجنبا لحدوت أخطاء

هده اضافة تتم عبر تلاتة مراحل وهي كالآتي

إضافة كود ستايل خاص بسكربت الفيديوهات

طريقة اضافة كود ستايل او css

ادخل إلى بلوجر > قالب > تحرير القالب > ابحث عن ]]></b:skin></style> بإستخدام cntrl + F وضع الكود التالى فوقه

   

 <style>

 /* CSS mdwab.blogspot.com Mini Slider */
.mdw-slide-wrap{margin:30px 0;overflow:hidden;position:relative;
              box-shadow: rgba(0, 0, 0, 0.57) 0px 25px 20px -21px;
              background: #faa1bf;
              padding: 10px;
              border-radius: 5px;}
              /* CSS mdwab.blogspot.com Mini Slider */
.mdw-slide-wrap ul li a img{height:309px;width:100%;border-radius: 10px;box-shadow: rgba(0, 0, 0, 0.57) 0px 25px 20px -21px;}
.mnajiri{overflow:hidden;overflow-x:scroll;position:relative;width:100%;height:330px}
.mdw-slide-wrap ul{position:absolute;list-style:none;padding:0;margin:0}
.mdw-slide-wrap li{white-space:nowrap;list-style:none;padding:0;margin:0}
.mdw-slide-wrap iframe{width:100%;height:87%;background:#000;border-radius: 10px;box-shadow: rgba(0, 0, 0, 0.57) 0px 25px 20px -21px;}
.mdw-slide-wrap ul li a{cursor:auto;padding-right:0!important;margin-right:5px;display:inline-block;vertical-align:middle;position:relative;max-width:550px;height:355px;background-position:center;background-repeat:no-repeat;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover}
.mdw-slide-wrap ul li a.youtube-iframe{width:550px}
.mdw-slide-wrap ul li a:last-child{margin-right:0}
/* CSS mdwab.blogspot.com Mini Slider */
a.right-b{right:0}
a.left-b svg,a.right-b svg{width:15px;margin:10px 0 0}
a.left-b,a.right-b{position:absolute;top:40%;width:40px;line-height:50px;height:50px;text-align:center;color:#fff;background:#000;opacity:.7;transition:all 0 ease-in-out}
a.left-b:hover,a.right-b:hover{opacity:1}
.mnajiri::-webkit-scrollbar{width:8px;height:8px;border-radius:10px}
.mnajiri::-webkit-scrollbar-track{background-color:#c8edff;border-radius:10px}
.mnajiri::-webkit-scrollbar-thumb:hover{background-color:#ffeb3b}
.mnajiri::-webkit-scrollbar-thumb{border-radius:2px;background-color:#ec407a;transition:all 400ms ease-in-out;border-radius:10px}

</style> 

كود جافا خاص بتمرير في اضافة الفيديوهات

بنسبة لكود جافا سكريبت فهو مسؤول عن تمرير إلى اليمين و اليسار طريقة استخدام إبحث عن </body> بإستخدام cntrl + F وضع الكود التالي فوقه

    
<script type='text/javascript'>
//<![CDATA[
// Scroll
$('a.right-b').click(function() {
  $('.mnajiri').animate({
    scrollLeft: "+=500px"
  }, "normal");
});
 $('a.left-b').click(function() {
  $('.mnajiri').animate({
    scrollLeft: "-=500px"
  }, "normal");
});
//]]>

</script>

كود أساسي الإضافة خاصة بالسكربت الفيديوهات

كل ما عليك في هده المرحلة هو أن تقوم بتحرير مشاركة جديدة و ضع الكود التالى

   
<div class="mdw-slide-wrap">
<div class="mnajiri">
<ul>
<li>
<a class="youtube-iframe" href="javascript:void(0)">
  <iframe allow="autoplay; encrypted-media" allowfullscreen="false" frameborder="0" src="https://www.youtube.com/embed/CISWFq0OSYA?rel=0&showinfo=1"></iframe>
  </a>
<a href="javascript:void(0)">
    <img alt="mnajiri" src="img/1.jpg" title="mnajiri" />
    </a>                
<a href="javascript:void(0)">
      <img alt="mnajiri" src="img/1.jpg" title="mnajiri" />
      </a>
<a href="javascript:void(0)">
<img alt="mnajiri" src="img/1.jpg" title="mnajiri" />
</a>
<a href="javascript:void(0)">
<img alt="mnajiri" src="img/1.jpg" title="mnajiri" />
</a>
<a href="javascript:void(0)">
<img alt="mnajiri" src="img/1.jpg" title="mnajiri" />
</a>
</li>
</ul>
</div>
<a class="left-b" href="javascript:void(0);">
<svg aria-hidden="true" data-prefix="fas" data-icon="angle-left" class="svg-inline--fa fa-angle-left fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path></svg></a>
<a class="right-b" href="javascript:void(0);">
<svg aria-hidden="true" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></a>
</div>

لوضع الفيديوهات يوتيوب غير رابط محدد بأحمر
لوضع الصور قم بلصق رابط الصورة في المكان المحدد ب أصفر

شفرة فيديوهات

   
    <a class="youtube-iframe" href="javascript:void(0)">
    <iframe allow="autoplay; encrypted-media" allowfullscreen="false" frameborder="0" src="https://www.youtube.com/embed/CISWFq0OSYA?rel=0&showinfo=1"></iframe>
    </a>

شفرة الصور

    <a href="javascript:void(0)">
    <img alt="mnajiri" src="img/1.jpg" title="mnajiri" />
    </a>

اذا كان لديك اي تساؤلات او إضافات شارك بالتعليقات أسفله

و بالتوفيق للجميع و سلام عليكم ورحمة الله وبركاته 🖐️

شارك Share Tweet Share Share Share

انقر هنا

محمد نجيري (mnajiri@) مشرف على مدونة ماتريال ويب تحت الرابط التالي :https://mdwab.blogspot.com/ مند 2018 و أدعوك لمتابعتي عبر حسابي على أنستغرام