طريقة انشاء مكتبة فيديو في مدونة بلوجر

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

مكتبة فيديو مصغره لمدونة بلوجر

1- الاضافه تعتمد بشكل كلي علي اليوتيوب ولا تستدعي اي اكواد برمجيه او جافا سكربت اخرى.

2- سهولة التركيب فقط هى (خطوه واحده للتركيب). ايضا سهولة وضع الفيديوهات وتغييرها.

3- امكانية وضع عدد لا متناهي من الفيديوهات وبعناوين توضيحيه.

4- سهولة التنقل بين الفيديوهات دون اعادة تحميل الصفحه كما لو كانت بتقنية الاجاكس .

5- الاضافه عباره عن قائمه منسدله بعناوين الفيديوهات اى تستطيع وضعها في اي مكان ترغب فيه شرط مراعاة قياسات الاضافه من عرض وارتفاع كى تتماشى مع تنسيق مدونتك.

مثال حى للاضافه مدونة تقارب القديمه

طريقة التركيب : سجل دخولك الى لوحة تحكم مدونتك ثم اذهب الي التخطيط وقم بانشاء اداه جديده من نوع جافا سكربت وضع عنوانا لها وفي المربع الموجود اسفل العنوان ضع الكود الموجود في الاسفل

[toggle title="إنسخ الكود" state="close" ]

<script type=”text/javascript”>
function MostrarVideo(idYouTube)
{
var contenedor = document.getElementById(‘divInnerVideo’);
if(idYouTube == “”)
{
contenedor.innerHTML = “”;
}
else
{
var dimensiones = “width=’260′ height=’300′ frameborder=’0′”;
var url = “http://www.youtube.com/embed/” + idYouTube;
contenedor.innerHTML = “<iframe ” + dimensiones + ” src=’”+ url +”‘></iframe>”;
}
}
</script>
<div style=”margin:20px 0px;”>
<select id=”sVideos” onchange=”MostrarVideo(this.value);”>
<option value=”" selected=”selected”>[مكتبة الفيديو]</option>
<option value=”cWHZYkUzksY”>عنوان فيديو رقم1</option>
<option value=”DJoTSp_VtRo”>عنوان فيديو رقم2</option>
<option value=”fbxJ8Sym_ZU”>عنوان فيديو رقم3</option>
<option value=”P6WxO35jTzg”>عنوان فيديو رقم4</option>
<option value=”Uwh3tVvk7tM”>عنوان فيديو رقم5</option>
</select>
</div>
<div id=”divInnerVideo”></div>

[/toggle]

** طريقة وضع الفيديوهات**

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

اذن اين نضع تلك الارقام ؟

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

شاهد هذا السطر <option value=”cWHZYkUzksY“>عنوان فيديو رقم1</option>

القيمه المعلمه باللون الاحمر هى الارقام التي تحدثت عنها في السابق.

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

اخر شئ يهمنا في الاضافه الان هي طريقة تنسيقها بما يتناسب مع قالب المدونه

نبحث داخل كود الاضافه عن

var dimensiones = “width=’260′ height=’300′ frameborder=’0′”;

ولتغيير العرض نقوم بتغيير رقم 260 الي عرض السايد بار بالضبط كى لا يخرج  اطار الفيديو للخارج ويشوه جماليه السايد بار . ولتغيير الطول غير رقم 300 لاى رقم ترغب فيه.

ملحوظه : تلك الاضافه يمكن وضعها في اى مكان في المدونه وليست مقصوره على السايد بار فقط . بالتوفيق للجميع . :-)

من فضلك شارك هذا الموضوع اذا اعجبك

الموضوع من طرف: أسامة سوهيلي

أسامة سوهيلي 17 سنة ، مدون مغربي مهووس بجديد تكنولوجيا المعلوميات ، مهتم بالحماية المعلوماتية ، ناشط في ميدان الهاكر ، والربح الإلكتروني . الفيسبوك . تويتر . جوجل بلس

ضع تعليقا أخي الكريم