مساحة إعلانية

الأربعاء، 19 يونيو، 2013

الأربعاء، 19 يونيو، 2013

طريقة إنشاء القوائم المنسدلة للفديو والروابط

Blogger Widget ScrollMenu For Video and Links
الفديو والروابط هم جزء من التعامل اليومي مع مدونات بلوجر أحيانا نحتاج لعمل مكتبة روابط أو مكتبة فديو لكن غالبية الطرق تجعل من الموضوع ثقيل فمثلا لو أحببنا عرض مجموعة حلقات علمية كسلاسل الدروس الإسلامية سنجد أن الموضوع ممتلئ بالفديو وأصبح ثقيل ونفس الشئ عمل مكتبة روابط قد يسبب مشكلة كبيرة خصوصاً عندما نحب إضافتها الى آداة في السايدبار ستكون طويلة لذا أفضل حل هو القوائم المنسدلة في تسهل الأمر تماما وتجعل الموضوع منسق وتلبي الإحتياج الكامل منها وتم عمل تنسيق جيد للقوائم المنسدلة وتمييز قائمة الفديو عن قائمة الروابط وأيضاً يمكن تخصيصها مع اللوان مدونتك بكل سهولة وسنوضح هذا في باقي الموضوع

نبدأ بقائمة الروابط

وهذا مثال للمعاينة

يمكنك إستخدام الإضافة داخل المواضيع بتحويل وضع صندوق كتابة المواضيع من وضع التأليف الى وضع HTML أو أن تضيف الكود الى آداة HTML/JavaScript وهذا هو الكود
<center><div style="width:auto; padding:0 10px 0 0;margin:5px 0 5px 0;background:#CB3A00;box-shadow: 0 1px 2px #999;-moz-box-shadow: 0 1px 2px #999;-webkit-box-shadow: 0 1px 2px #999;border:2px solid #777;border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;">
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="font-size:17px; width:100%;border:0; background:transparent; color:#fff;border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;">
<option>عنوان القائمة</option>
<option value="#">Name</option>
<option value="#">Name</option>
<option value="#">Name</option>
<option value="#">Name</option>
<option value="#">Name</option>
</select></form></div></center>
كل ما عليك فعله هو تغيير رمز # بالرابط وكلمة Name بالكلمات التي تريدها
ولزيادة عدد الروابط فقط قم بتكرار السطر الموضح بالأخضر فكل سطر يساوي رابط جديد
لتعديل لون القائمة غير هذا اللون #CB3A00
ولتعديل لون الخط غير هذا اللون #fff
ولتعديل حجم الخط غير الرقم 17 بالزيادة أو النقصان
ملحوظة هذا الكود width:auto; معناه أن حجم القائمة ستتوافق مع عرض المكان فلو وضعتها بموضوع ستأخذ عرض الموضوع لو وضعتها بآداة ستأخذ عرض الآداة في حالة الرغبة بتحديد عرض محدد فقط غير كلمة auto بهذا الكود 300px وغير الرقم 300 بالرقم الذي تريد

ننتقل الى قائمة الفديو

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


 طريقة الإضافة نفس الطريقة المتبعه مع الآداة السابقة
<center><script type="text/javascript">
function MostrarVideo(idYouTube)
{
var contenedor = document.getElementById('divInnerVideo');
if(idYouTube == "")
{
contenedor.innerHTML = "";
}
else
{
var dimensiones = "width='300' height='230' frameborder='0'";
var url = "http://www.youtube.com/embed/" + idYouTube;
contenedor.innerHTML = "<iframe " + dimensiones + " src='"+ url +"'></iframe>";
}
}
</script>
<div style="width:auto; padding:7px 10px 8px 10px;margin:5px 0 5px 0;background: #969595;background: -moz-linear-gradient(top,#969595,#000);background: -webkit-linear-gradient(top,#969595,#000);border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;box-shadow: 0 1px 2px #999;-moz-box-shadow: 0 1px 2px #999;-webkit-box-shadow: 0 1px 2px #999;border-top:4px dashed #fff; border-bottom:4px dashed #fff; border-right:4px solid #fff; border-left:4px solid #fff;">
<select id="sVideos" onchange="MostrarVideo(this.value);" style="font-size:17px; width:100%;">
<option value="selected="selected">عنوان القائمة</option>
<option value="VID">Name</option>
<option value="VID">Name</option>
<option value="VID">Name</option>
<option value="VID">Name</option>
<option value="VID">Name</option>
</select>
</div>
<div id="divInnerVideo"></div></center>
في حالة اضافة فديوهات أخرى نفس السابق أيضا تكرار السطر الأخضر
لكن بدلا من VID سنستبدله بمعرف الفديو
مثال هذا رابط الفديو من اليوتيوب
http://www.youtube.com/watch?v=buq3jJ31fOs
المعرف هو الرقم الموجود بعد علامة يساوي وقد يكون الرابط بأشكال أخرى مثل هذا
http://www.youtube.com/watch?feature=player_embedded&v=sO-XDhBoLTA
ولكن نفس مبدأ الرقم لا مشكلة مهما اختلف الشكل ستجد رقم المعرف في رابط فديو اليوتيوب
الرقمين 300 و 230 هما عرض وإرتفاع الفديو

بالنسبة لتنسيق شكل القائمة

الكود الأحمر هو تدرج لوني مكون من لونين #969595,#000  عليك تغيير كل لون في عدد المرات المتكرر فيها
هذا اللون #fff  والمكرر أربع مرات هو لون الإطار الخاص بالقائمة غيره بما تحب
وأيضا الرقم 17 هو حجم الخط
ونفس مبدأ تعديل عرض القائمة كما ذكرنا في الكود السابق بتعديل كلمة auto
 أتبرأ من أى شخص يستخدم قوائم الفديو في عرض ما يخالف الشريعة الإسلامية ويغضب رب العالمين

وبالتوفيق للجميع


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

  1. السلام عليكم ورحمة الله وبركاته
    دائما ما تتحفنا بالمواضيع
    المطلوبة والمهمة دائما والأجمل من ذلك
    مراعة ذوق المدون في الاضافة
    يعجز لساني عن الشكر أخي الغالي عمرو
    فقد بحثت كثيرا في هذه الطريقة وللأسف لم تنجح
    لأسباب منها وجود الأخطاء بالكود وعدم التناسق
    مع المدونة وفي أغلب الحالات عدم العمل
    لكن يبدو لي بأن هذه المرة غير المرات السابقة
    لانها مقدمة من رجل قمة في الإبداع والتميز
    سلمت يداك أخي الغالي عمرو وجزاك الله خيراً
    وفقك الله وسهل دربك دمت في حفظ الرحمن

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

      حذف
  2. السلام عليكم ورحمة الله وبركاته
    اهلا كيف الحال اخي عمرو؟
    موضوع جد رائع ومدونة اروع مثل صاحبها
    جزاك الله الف خير اخي عمرو

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      الحبيب الغالي أبو ملاك حياك الله يا طيب
      وربي لا يحرمني من مرورك أخي الحبيب
      دمت في حفظ الله

      حذف
  3. شكراا على الكود بس اريد يكون الفيديو الاول يعمل بدون تحديد

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

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

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      أهلاً ومرحباً بك اختي الكريمة
      نعم يمكن جعل الإطار منقط
      هذا السطر في الكودborder:2px solid #777
      استبدلي solid بـ dotted ليصبح منقط أو dashed ليصبح شرط كالتي في كود الفديو
      والرقم 2 هو حجم الإطار يمكنك زيادته
      واما #777 هو اللون يكنك وضع اى لون آخر
      وشكراُ لمرورك الكريم

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

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

      حذف
  6. شكرا اخي بس لو دسوي فديوات احسن :) وشكرا مرة ثانية

    ردحذف
  7. شكرا...بس بالنسبة لكود قائمة الروابط ...وين نكتب الكود ...قبل جزء الbody?

    ردحذف
  8. كما هو موضح في الموضوع إما في آداة HTML/JavaScript أو داخل الموضوع بعد تحويل صندوق الكتابة من وضع التأليف الى وضع HTML

    ردحذف
  9. كيفية تغير اللون الازرق الفاتح عند مرور الماوس

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

      حذف
  10. شكرا أيها الأخ الفاضل على هذا الانجاز الرائع و من العطاء ان شاء الله..
    انا لست مبتدئا في مجال البلوجرواريد منك أخي أن توجهني بمساعدتك لي في إنشاء القوائم المنسدلة للفديو والروابط.
    الملاحظات:
    1-بعد وضع الكودين في جدول المشاركة ظهرت القائمتان ولم يظهر الفيديو
    2-هل هناك كود خاص بالفيديو؟
    3-الروابط والاسماء تكتب بنفس الطريقة في الكودين؟
    أرجوك أخي الكريم مزيدا من الشرح و التوضيح جازاك الله خيرا.

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

      حذف
  11. أخي الكريم ..لقد قمت باستبدال VIDبمعرف الفيديو وكتبت عنوان الفيديو مكان NAME ظهرت فقط القائمة المنسدلة و لم يظهر الفيديو
    ساعدني اخي جزاك خيرا.

    ردحذف
    الردود
    1. أخي الكريم أضف القالب دون تعديل نهائي
      ثم استبدل او سطر في سطور الفديو بالسطر التالي
      <option value="gNTMXK_KTf4">الفديو الأول</option>
      إن عمل معك الفديو فالمشكلة لديك في إعداد القائمة ركز وانت تكتب المعرف وتأكد من عدم حذف العلامات "

      حذف
  12. بارك الله فيك انت مبدع بحق أرجو ألا تطيل علينا بابداعاتك

    ردحذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©