كيفية إنشاء معرض للفيديو Video Playlist على مدونات بلوجر

أشهر طريقة لعمل لائحة تشغيل فيديو Video Playlist هي باستعمال يوتيوب، ولكن ماذا لو كانت مقاطع الفيديو غير مرتبة كما يجب؟

هناك حل، وهو استعمال معرض يمكنك التحكم فيه بشكل كامل من حيث الشكل وترتيب المقاطع غلى غير ذلك.

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



شكل الأداة هو المستعمل في الكثير من المواقع التي تقدم دورات كاملة بالفيديو بحيث سيكون العنوان في الأعلى، وأسفله مقطع الفيديو ومن تحته المزيد من التفاصيل، ويليه مباشرة روابط بقية المقاطع إذ سيكفي  النقر على أي منها لإظهارها وتشغيلها.

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

 إليكم مثال حي لمعرض مكون من 3 مقاطع فيديو:

طريقة كتابة موضوع مميز

كيف تكتب موضوع يظهر على جوجل بسرعة.

ارقد على فراش الموت

لو عرفت حق أنك ستموت، فستحقق كل أحلامك.

شرح اداة التدرج

كيف تستعمل أداة التدرج على برنامج فوتوشوب.

كود الإضافة:

<style>
#folfolyplaylist {
background: #f6f6f6;
border: 1px solid #f1f1f1;
padding: 5px 0;
}
#folfolyplaylist h2 {
text-align: center;
font-size: 28px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.folfoly-bar button, button[disabled]:active {
border: none;
font-size: 17px;
font-weight: normal;
border-radius: 1px;
padding: 4px 10px;
text-decoration: none;
background: #ddd;
color: rgba(0,0,0,0.8);
display: inline-block;
transition: all 0.5s linear;
cursor: pointer;
width: 100%;
margin: 1px 0;
text-align: right;
font-weight: bold;
border-right: 2px solid #444;
}
</style>
<div id="folfolyplaylist">
<div class="folfoly-container tab" id="tab1">
<h2>
عنوان الفيديو الأول </h2>
كود الفيديو الأول
وصف محتوى الفيديو الأول
</div>
<div class="folfoly-container tab" id="tab2" style="display: none;">
<h2>
عنوان الفيديو الثاني</h2>
كود الفيديو الثاني
وصف محتوى الفيديو الثاني
</div>
<div class="folfoly-container tab" id="tab3" style="display: none;">
<h2>
عنوان الفيديو الثالث</h2>
كود الفيديو الثالث
وصف محتوى الفيديو الثالث
</div>
<script>
function opentab(tabName) {
var i;
var x = document.getElementsByClassName("tab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}
</script>
<div class="folfoly-bar folfoly-black">
<button class="folfoly-bar-item folfoly-button" onclick="opentab('tab1')">عنوان رابط الفيديو الأول </button>
<button class="folfoly-bar-item folfoly-button" onclick="opentab('tab2')">عنوان رابط الفيديو الثاني</button>
<button class="folfoly-bar-item folfoly-button" onclick="opentab('tab3')">عنوان رابط الفيديو الثالث</button>
</div>
</div>

طريقة إدراج معرض لمقاطع الفيديو داخل الموضوع على بلوجر