الثلاثاء، 18 يونيو 2013

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

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

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

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

يمكنك إستخدام الإضافة داخل المواضيع بتحويل وضع صندوق كتابة المواضيع من وضع التأليف الى وضع HTML أو أن تضيف الكود الى آداة HTML/JavaScript وهذا هو الكود
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 بالكلمات التي تريدها
ولزيادة عدد الروابط فقط قم بتكرار السطر الموضح بالأخضر فكل سطر يساوي رابط جديد
لتعديل لون القائمة غير هذا اللون #CB3A00
ولتعديل لون الخط غير هذا اللون #fff
ولتعديل حجم الخط غير الرقم 17 بالزيادة أو النقصان
ملحوظة هذا الكود width:auto; معناه أن حجم القائمة ستتوافق مع عرض المكان فلو وضعتها بموضوع ستأخذ عرض الموضوع لو وضعتها بآداة ستأخذ عرض الآداة في حالة الرغبة بتحديد عرض محدد فقط غير كلمة auto بهذا الكود 300px وغير الرقم 300 بالرقم الذي تريد

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

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


 طريقة الإضافة نفس الطريقة المتبعه مع الآداة السابقة

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;">


في حالة اضافة فديوهات أخرى نفس السابق أيضا تكرار السطر الأخضر
لكن بدلا من 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
 أتبرأ من أى شخص يستخدم قوائم الفديو في عرض ما يخالف الشريعة الإسلامية ويغضب رب العالمين

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


ليست هناك تعليقات:

إرسال تعليق