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

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

أقدم لكم صور للأداة :

مثال حي للأداة: إضغط هنا

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



<!--by-Ayoub Etmaiti- 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-Ayoub Etmaiti- slide bar youtube -->     

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

هناك 27 تعليقًا:

  1. شكرا لكم .
    جزاكم الله خيرا

    ردحذف
  2. شكرااا لك درس رائع

    معهد أرباحي

    www.arba7i.com

    ردحذف
  3. شكر جزيلا على الموضوع
    استفدت منكم الكثير
    التصميم الهادف

    ردحذف
  4. شكرا لتعليقاتكم المشرفة ..

    ردحذف
  5. ازاي احطها في مشاركة مثلا

    ردحذف
  6. @Sameh Galal

    تضع نموذج المشاراكات على html وتضع الكود عادي وبعد هذا تكمل كتابة المشاركة ;)

    ردحذف
  7. كود رائع جداً
    جزاكم الله خيراً

    ردحذف
  8. أخي الفاضل
    هل يمكن عمل كود مشابه ولكن لعرض ملفات صوتيه؟

    ردحذف
  9. أخي أيوب لقد أضفت قائمتين في صفحة واحده
    ولكن القائمتين يظهر الفديو في نفس المكان
    شاهد الصفحة
    http://muslimcd.blogspot.com/p/blog-page_31.html
    هل يمكن أن أجعل كل قائمة تعرض الفديو أسفل منها
    تكون كل قائمة منفصلة عن الثانية؟
    وجزاك الله خيراً

    ردحذف
  10. السلام عليكم ورحمة الله وبركاته
    يا جماعه انا معايه مشكله مع ادوات مشرفى المواقع انا محتاج حد من فرق العمل الخاص بمدونة ابو اياد او اى حد يقدر يساعدنى
    اميلى : hoda_joker80@yahoo.com
    صفحتى على الفيس بوك: http://www.facebook.com/Sa3idyModern

    فى اسرع وقت بارك الله فيكم

    ردحذف
  11. @A.M.A.M.S

    مادامت الأداتين في نفس الصفحة غير ممكن

    ردحذف
  12. @мαнмσυ∂-eℓѕσнαgу

    أخي راسلني http://www.facebook.com/CAyoubEtmaiti

    وإشرح لي بالتفصيل

    ردحذف
  13. بالتوفيق انشاء الله...
    ZODUZ

    ردحذف
  14. ممتازه اخى الكريم وجارى التجربة

    ردحذف
  15. غير معرف8:02 ص

    ;))

    ردحذف
  16. @Jehad Hussien

    إن شاء الله تفيدك

    ردحذف
  17. شكرا لكم .
    جزاكم الله خيرا ..

    ردحذف

  18. موضوع شيق .. جزاكم الله خيرا
    كرز للاستشارات مدير موقع

    ردحذف

  19. جزاكم الله خيرا
    حائط لعرض ومشاركة الصور مدير موقع

    ردحذف
  20. جزاكم الله خيرا
    حائط لعرض ومشاركة الصور مدير موقع

    ردحذف
  21. شكرا لكم

    ممكن كود اضافه فيديو بالمدونه في احد الصفحات ..

    ردحذف

  22. جزاكم الله خيرا"

    شركه تنظيف

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية