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

Published by : Unknown   

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

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

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

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

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

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