
الفديو والروابط هم جزء من التعامل اليومي مع مدونات بلوجر أحيانا نحتاج لعمل مكتبة روابط أو مكتبة فديو لكن غالبية الطرق تجعل من الموضوع ثقيل فمثلا لو أحببنا عرض مجموعة حلقات علمية كسلاسل الدروس الإسلامية سنجد أن الموضوع ممتلئ بالفديو وأصبح ثقيل ونفس الشئ عمل مكتبة روابط قد يسبب مشكلة كبيرة خصوصاً عندما نحب إضافتها الى آداة في السايدبار ستكون طويلة لذا أفضل حل هو القوائم المنسدلة في تسهل الأمر تماما وتجعل الموضوع منسق وتلبي الإحتياج الكامل منها وتم عمل تنسيق جيد للقوائم المنسدلة وتمييز قائمة الفديو عن قائمة الروابط وأيضاً يمكن تخصيصها مع اللوان مدونتك بكل سهولة وسنوضح هذا في باقي الموضوع
نبدأ بقائمة الروابط
وهذا مثال للمعاينة
يمكنك إستخدام الإضافة داخل المواضيع بتحويل وضع صندوق كتابة المواضيع من وضع التأليف الى وضع 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;">كل ما عليك فعله هو تغيير رمز # بالرابط وكلمة Name بالكلمات التي تريدها
<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>
ولزيادة عدد الروابط فقط قم بتكرار السطر الموضح بالأخضر فكل سطر يساوي رابط جديد
لتعديل لون القائمة غير هذا اللون #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
أتبرأ من أى شخص يستخدم قوائم الفديو في عرض ما يخالف الشريعة الإسلامية ويغضب رب العالمين
السلام عليكم ورحمة الله وبركاته
ردحذفدائما ما تتحفنا بالمواضيع
المطلوبة والمهمة دائما والأجمل من ذلك
مراعة ذوق المدون في الاضافة
يعجز لساني عن الشكر أخي الغالي عمرو
فقد بحثت كثيرا في هذه الطريقة وللأسف لم تنجح
لأسباب منها وجود الأخطاء بالكود وعدم التناسق
مع المدونة وفي أغلب الحالات عدم العمل
لكن يبدو لي بأن هذه المرة غير المرات السابقة
لانها مقدمة من رجل قمة في الإبداع والتميز
سلمت يداك أخي الغالي عمرو وجزاك الله خيراً
وفقك الله وسهل دربك دمت في حفظ الرحمن
وعليكم السلام ورحمة الله وبركاته
حذفرفع الله قدرك أخي بدر ودائما تحرجني يا طيب بكلماتك الجميلة
أشكرك يا طيب على دعمك الدائم وتشجيعك وبالتوفيق بإذن الله
السلام عليكم ورحمة الله وبركاته
ردحذفاهلا كيف الحال اخي عمرو؟
موضوع جد رائع ومدونة اروع مثل صاحبها
جزاك الله الف خير اخي عمرو
وعليكم السلام ورحمة الله وبركاته
حذفالحبيب الغالي أبو ملاك حياك الله يا طيب
وربي لا يحرمني من مرورك أخي الحبيب
دمت في حفظ الله
شكراا على الكود بس اريد يكون الفيديو الاول يعمل بدون تحديد
ردحذفالشكر لله أخي الكريم بالنسبة لطلبك لا أظن أن الكود يدعم تلك الخاصية لكن في حال وجود طريقة سأضيفها بإذن الله
حذفالسلام عليكم اخي الكريم
ردحذفأعجبتني تقريبا كل مكونات التصميم قائمة الروابط رائعة بس لو عملتها
بطريقة إطار منقط تكون أفضل وتمام
هل هناك طريقة لتغيرها الى إطار منقط ؟؟؟
تحياتي أخي الفاضل أتمنى رؤية المزيد من إبداعاتك
وعليكم السلام ورحمة الله وبركاته
حذفأهلاً ومرحباً بك اختي الكريمة
نعم يمكن جعل الإطار منقط
هذا السطر في الكودborder:2px solid #777
استبدلي solid بـ dotted ليصبح منقط أو dashed ليصبح شرط كالتي في كود الفديو
والرقم 2 هو حجم الإطار يمكنك زيادته
واما #777 هو اللون يكنك وضع اى لون آخر
وشكراُ لمرورك الكريم
احسنت اخي الفاضل وشكرا على متابعة طلبي دون مجاملة مدونتك في غاية الجمال وتنسيق دروس رائعة
ردحذفجزاك الله الف خير على كل ما تقدمه لهذه مدونة
سؤال اخي الكريم هل توجد لديك اضافة تأثير على صور بشكل جميل انا كالعادة أتجول في النت لم اجد اضافة جيدة
كلها متحركة اغلبها تأثير على صور داخل الموضوع وخارجه انا عايزة تأثير صور في الصفحة الرئيسية فقط ويكون تأثير تابت وشرا و ننتظر إبداعاتك الجميلة بفارغ الصبر
أشكرك أختي الفاضلة على كلماتك الطيبة
حذفبالنسبة لأمر التأثير على الصور بإذن الله قريباً سأحاول أن اعد موضوع حول أكثر واشهر التأثيرات لعلك تجدين من ضمنها ما يناسبك تحياتي لك
شكرا اخي بس لو دسوي فديوات احسن :) وشكرا مرة ثانية
ردحذفشكرا...بس بالنسبة لكود قائمة الروابط ...وين نكتب الكود ...قبل جزء الbody?
ردحذفكما هو موضح في الموضوع إما في آداة HTML/JavaScript أو داخل الموضوع بعد تحويل صندوق الكتابة من وضع التأليف الى وضع HTML
ردحذفكيفية تغير اللون الازرق الفاتح عند مرور الماوس
ردحذفهذه قوائم مصدرية يعني لا يتم تغيير الوانها الخلفية
حذفكالتمرير حتى لو تغيرت يقرأها كل متصفح وكل جهاز بشكل مختلف
شكرا أيها الأخ الفاضل على هذا الانجاز الرائع و من العطاء ان شاء الله..
ردحذفانا لست مبتدئا في مجال البلوجرواريد منك أخي أن توجهني بمساعدتك لي في إنشاء القوائم المنسدلة للفديو والروابط.
الملاحظات:
1-بعد وضع الكودين في جدول المشاركة ظهرت القائمتان ولم يظهر الفيديو
2-هل هناك كود خاص بالفيديو؟
3-الروابط والاسماء تكتب بنفس الطريقة في الكودين؟
أرجوك أخي الكريم مزيدا من الشرح و التوضيح جازاك الله خيرا.
أهلا بك يا طيب
حذفانا شرحت في الموضوع طريقة إضافة الفديو ووضعت مثال حى لرؤية طريقة العمل راجع جزء الفديو جيداً خصوصا امر المعرف
أخي الكريم ..لقد قمت باستبدال VIDبمعرف الفيديو وكتبت عنوان الفيديو مكان NAME ظهرت فقط القائمة المنسدلة و لم يظهر الفيديو
ردحذفساعدني اخي جزاك خيرا.
أخي الكريم أضف القالب دون تعديل نهائي
حذفثم استبدل او سطر في سطور الفديو بالسطر التالي
<option value="gNTMXK_KTf4">الفديو الأول</option>
إن عمل معك الفديو فالمشكلة لديك في إعداد القائمة ركز وانت تكتب المعرف وتأكد من عدم حذف العلامات "
بارك الله فيك انت مبدع بحق أرجو ألا تطيل علينا بابداعاتك
ردحذف