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

المحتويات والمعلومات في هذا الموضوع قديمة أول لمشكلة تم حلها

العودة للرئيسية متابعة القراءة

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

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

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

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

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

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

طريقة إنشاء القوائم المنسدلة للفديو والروابط كن مدون : موقع متخصص في تطوير منصة بلوجر