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

الثلاثاء، 26 نوفمبر، 2013

الثلاثاء، 26 نوفمبر، 2013

تنسيق آداة شريط الفديو في بلوجر

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


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

والآن مع طريقة التنسيق

ندخل الى تحرير القالب نقوم بتوسيع عناصر الستايل بالضغط على السهم المخصص لذلك
ثم فوق الوسم ]]></b:skin> نضيف الكود التالي
.videoBar-container {float:right;}
div.resultDiv_gsvb {
  background:transparent;
  border:0;
  height: 100px;
  margin-bottom: 5px;
  text-align: center;
  width: 130px;
margin-right:10px;
}

div.resultDiv_gsvb img {
  cursor: pointer;
  display: inline;
  height: 90px;
  width: 120px;
border:3px solid #fff;
outline:1px solid #000;
}

div.resultDiv_gsvb img:hover {
border: 3px solid #C53E08;
outline: 1px solid #F90004;
transition: all 0.9s ease 0s;}

table.resultTable_gsvb {width:300px;}
table.gsc-branding, table.gcsc-branding{display:none}

.videoBar-container {float:right;}
table.resultTable_gsvb td {float:right; padding:0;}
الأرقام المعلمة باللون الأزرق هي عرض صورة الفديو ويجب ان يتم تغييرها بنفس القيم يعني ان زدت الأول 5 تزيد الآخر 5
والأرقام المعلمة بالأحمر هي طول صورة الفديو وتعامل بنفس الطريقة

هاذين اللونين هما الوان حدود والإطار الخارجي للصورة
#fff
 #000

اما هاذين فهما نفس الشئ الحدود والإطار الخارجي ولكن عند تمرير الماوس
#C53E08
#F90004

أما الرقم 300 هو حجم الإضافة بمعني كلما كبر الحجم ستجد الفديوهات في خط واحد اما لو اصبح الحجم أقل من الصور ستنزل ستصبح صفوف توضيح أكثر
لو حجم الصورة 100 أى الأربع صور الخاصة بالفديو حجمهم يساوي أكثر من 300 وبالتالي ستظهر صورتين ثم ستصبح الصورتين الثانيتين في صف ثاني لكن ماذا لو جعلنا مثلا حجم الصورة 300 ستجد أن الأربع صور اصبحوا تحت بعضهم في صفوف أو لو جعلنا الصور صغيره مثلا 48 سنجدهم كلهم في صف واحد عموما جرب تعدي الرقم وستفهم أو اجعله كما هو ان لم تريد تعديل في الشكل وتجربه موفقة بإذن الله



هناك تعليقان (2):

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

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

      حذف

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

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