مساحة إعلانية

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

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

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

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


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

ثم فوق الوسم ]]></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>
وكما ترى العرض والإرتفاع في كود الفديو هما نفس لعرض والإرتفاع في الكود السابق
انتهى درسنا بفضل الله

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

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

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      حبيبي الغالي بدر
      وأنت أيضا كما عودتنا على الدعم والردود المشجعة
      شكرا لمرورك العطر حبيبي

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©