اضافة قائمة منسدله لوضع الفيديوهات على Blogger

بسم الله الرحمن الرحيم يارب تكونوا فى أحسن حال اليوم سأقدم لكم إضافة جميلة جدا لم تستعمل من قبل في المدونات العربية وهي إضافة الفديوهات في قائمة مسندلة بحيث لا تحجز حيز من مساحة الموضوع أو المقالة فيمكنك عرض 50 فيديو أو أكثر في قائمة منسدلة واحدة لا يتجاوز إرتفاعها 10 px وعند الضغط عليها تظهر لك عناوين الفيديوهات فبضغطك على أي عنوان سيظهر الفيديو، الأداه هذه لا تعمل بشكل أتوماتيكي يجب عليك وضع العناوين و الروابط بنفسك والأداة مصممة بإستخدام الجافا سكريبت ;) والجميل أنني قمت بتحسين الأداة لتستطيع وضعها على جوانب المدونة أيضا بحيث أن حجمه يتناسب بشكل تلقائي بالمكان الذي تضعها فيه .
هذه صوره للأداة :

طريقة تركيبها، يمكننا تركيب الأداة في أي مشاركة أو صفحة أو حتى بإضافة أداة الجافا سكريبت على جانب الصفحة أو في أي مكان، كل ما علينا هو نسخ الكود التالي :

 

<!--by-abda3design.blogspot.com- slide bar youtube -->

<script type="text/javascript">

function MostrarVideo(idYouTube)

{

var contenedor = document.getElementById('divInnerVideo');

if(idYouTube == "")

{

contenedor.innerHTML = "";

}

else

{

var dimensiones = "width='420' height='315' 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="lOYBSSP64S4">عنوان الفيديو</option>

<option value="lOYBSSP64S4">-عنوان الفيديو-</option>

</select>

</div>

<div id="divInnerVideo"></div>

<!--by-abda3design.blogspot.com- slide bar youtube -->

1-قم بتغيير عنوان الفيديو الذي سيظهر به في القائمة المنسدلة وذلك بتغيير العبارة "عنوان الفيديو"
2-قم بتغيير القيمة lOYBSSP64S4 في الكود بالقيمة التي سوف تجدها برابط الفيديو ،مثلا لو كان رابط الفيديو على هذا الشكل :
http://www.youtube.com/watch?v=lOYBSSP64S4 ,سوف تستبدلها بالقيمة الموجودة في آخر الرابط ،اي ما لون باللون البرتقالي
3-الجملة " إختر الفيديو المراد عرضه" هي عنوان القائمة المنسدلة ويمكنك تغييره بأي جملة أخرى تريد
أتمنى أن تنال إعجابكم ،دمتم في رعاية الله

... نهاية الشرح ...

اقرا ايضا :

إضافة "تابعني" للمدونات و المواقع CSS
اضافة تقيم لتدوينات لمستخدمين Blogger&Wordpress

ولأي إستفسار الرجاء ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجل

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