الخميس، 12 ديسمبر 2013

اعطاء فديوهاتك على بلوجر شكل مميز

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


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

ثم فوق الوسم ]]> أضف الكود التالي
.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
ثم اضف الكود التالي

كود الفديو هنا
تضع كود الفديو في المكان المحدد طبعا الحصول على كود الفديو يكون من موقع الفديو مثال في اليوتيوب 
تجد الكود تحت الفديو بالضغط على مشاركة >> تضمين >> وستجد الكود وهذا مثال عند وضع كود الفديو


وكما ترى العرض والإرتفاع في كود الفديو هما نفس لعرض والإرتفاع في الكود السابق
انتهى درسنا بفضل الله

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

إرسال تعليق