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

من أفضل إضافات بلوجر سهلة جدا لا تأثر على سرعة المدونة بشكل مميز قم بتحسين مدونتك إلى أفضل سيدبار شو يدوي لصور و الفيديوهات بشمل بانوراني panorama slidebar show blogger

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


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



قمت بجرد بعض مميزات هدا كود البسيط
  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>


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


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

المنشورات ذات الصلة

4 تعليقات

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق

● أن يكون التعليق خاص بمحتوى التدوينة
● أن لا تضع أي روابط خارجية
● أي سؤال خارج محتوى التدوينة يرجى تواصل معنا
● يمكنك تعليق بإستخدام صور ✋👇
  1. انا اريد نفس سكربت هذا ولكن لعرض المواضيع في الصفحة الرئيسية ولكى الشكر

    ردحذف
    الردود
    1. يمكنك إضافته يدويا مع وضع صورة موضوع في مكان مخصص ورابطه ايضا و وضعه في مكان الدي تريده من المظهر اما تلقائى سنحاول تصميه قريبا ♥️♥️ و شكرا 😅 على مشاركتك

      حذف
  2. ممكن معاينة لهذا السكريبت لطفاً

    ردحذف