كل مدونة لا تخلو من فديو أو اثنين ومدونات أخرى تمتلئ بها ولهذا شكل الفديو قد يكون هاماً وإعطاء الفديو مظهر جيد يليق مع المدونة يضيف لمسة جمالية ولهذا في هذا الموضوع سنقوم بعمل أمر بسيط جداً لتمييز الفديوهات في المدونة وإعطائها مظهر جيد وسنستخدم أبسط الأكواد وأخفها واسهلها في التنسيق وسيتم شرح تنسيق هذه الاكواد بشكل كامل بحيث تحصل على مظهر يتماشى مع مدونتك لكن أولا يمكنك معاينة شكل الفديو من نموذج المعاينة التالي ولا تنسى هذا مثال فقط يمكنك عمل الكثيير ن التنسيقات على الفديوهات
والآن مع طريقة التفعيل لكن يجب ان تعلم أن هذه الطريقة لن تطبق تلقائياً على الفديوهات بل تحتاج أن تضاف مع كل فديو يدوياً يعني الفديوهات الموجودة سابقاً لن تطبق عليها الخاصية لكن يمكنك طبعا تحريرها واضافتها لها أو اتركها كما هي لن يضر الأمر في شئ
أولا قم بالدخول الى صفحة تحرير قالبك ثم قم بتوسيع عناصر الستايل بالضغط على سهم التوسيع
ثم فوق الوسم ]]></b:skin> أضف الكود التالي
.cnmuvideo {
background:#FFFFFF;
border: 6px dashed #D73B36;
border-radius: 15px;
box-shadow: 0 0 5px 4px #000000;
height: 315px;
padding: 10px;
width: 420px;
margin:10px auto;
}
وهذه هي طريقة التنسيق
اللون #FFFFFF هو لون خلفية الفديو
أما هذا اللون #D73B36 هو لون الإطار الخارجي
الرقم 6 هو حجم الإطار
أما بالنسبة لكلمة dashed فهي تعني ان الإطار عبارة عن خطوط متقطعة
يمكن استبدالها بـ dotted لتصبح نقاط متقطعة
أو solid ليصبح الإطار خط كامل دون تقطيع
الرقم 15 هو درجة نعومة الحواف
هذا اللون #000000 هو لون الظل الخارجي
والرقم 315 هو ارتفاع الفديو
و 420 هو عرض الفديو
طبعا الإرتفاع والعرض المحددين سيكونان هما أيضا المستخدمان في كود الفديو
طريقة اضافة الفديو
عندما يأتي وقت اضافة الفديو وانت تكتب الموضوع قم بتحويل صندوق كتابة الرسائل من وضع التأليف الى وضع HTML
ثم اضف الكود التالي
<div class="cnmuvideo">
كود الفديو هنا
</div>
تضع كود الفديو في المكان المحدد طبعا الحصول على كود الفديو يكون من موقع الفديو مثال في اليوتيوب
تجد الكود تحت الفديو بالضغط على مشاركة >> تضمين >> وستجد الكود وهذا مثال عند وضع كود الفديو
<div class="cnmuvideo">
<iframe width="420" height="315" src="//www.youtube.com/embed/EhqCE9uKydc" frameborder="0" allowfullscreen></iframe>
</div>
وكما ترى العرض والإرتفاع في كود الفديو هما نفس لعرض والإرتفاع في الكود السابق
انتهى درسنا بفضل الله
No comments:
Post a Comment