التخطي إلى المحتوى الرئيسي

اضافة يوتوب في بلوجر (اضافة عدد لا نهائي من الفيديوهات يضهر فيديو واحد في الصفحة و عند كل تحديث يتغير الفيديو )

السلام عليكم 
أقدم لكم اضافة بلوجر رائعة و فريدة من نوعها و لا تثقل سرعة المدونة و هي عبارة عن كود Java Script  , هده الاضافة خاصة باليوتوب ,يمكنك وضع أكثر من 100 فيديو يوتوب في السكريبت و سيضهر فيديو واحد في مدونتك و عند كل تحديث للصفحة يضهر فيديو اخر عشوائيا خلاصة المقال الفيديو يتغير عند كا مرة يدخل فيها الزائر الى مدونتك و هدا قد يزيد و لو بنسبة قليلة من المشاهدين لحلقات قناتك على اليوتوب 
ادا أول شيئ ستقوم بانشاء مدونة جديدة بهدا الشكل كما في الصور 

حسنا بعد أن أنشأنا المدونة نقوم بالدخول اليها ثم نغيير القالب بهدا القالبتحميل القالب 
بعد تغيير القالب يجب أن تقوم بتعديلات بسيطة و لهدا تقوم بالدخول الى تحرير HTML

1- و يعني رابط قناتك على اليوتوب لهدا غيير رابط قناتي برابط قناتك 


2- و يعني ID الفيديو على اليوتوب و يتجب أن تغيير ال Id لتحدد الفيديوهات التي ستضهر في الموقع 


طريقة معرفة ID الفيديو على اليوتوب 
أول شيئ تقوم به هو الدهاب الى الفيديو الدي  تريد اضهاره في موقعك ثم تدهب الى الرابط و تطبق كما في الصورة 

بعد دالك تغيير الID كما بالصورة السابقة ,تغيير الرقم 2 تطبق الطريقة مع كل الفيديوهات (ID كل فيديو يكون مختلف عن الاخر ) 
يمكنك اضافة المزيد من الفيديوهات بنسخ الكود التالي و لصقه في مكان ال Script بجانب أكواد فيديوهات اليوتوب 

و أخيرا تحفظ القالب ثم تدهب الى مدونتك التي تريد وضع الاضافة فيها ثم تدهب الى تخطيط ثم اضافة كود HTML/JavaScript
ثم تقو باضافة الكود التالي تحميل الكود بعد دالك تقوم بتغيير الرابط الموجود في الكود برابط المدونة التي وضعنا فيها السكريبت 
بهدا الشكل 
ثم تقوم بحفظ الأداة و مبروك عليك :) 
هدا كل شيئ أتمنا أن تستمتعو بالاضافة و أن تقومو بالتعليق فقط كي تشجعوني على الاستمرار و شكرا لكم 

تعليقات

  1. شكرا اخى على الاضافة الرائعة & هل ممكن نفس هذي الاضافة & بس تكون مش فيديو & تكون & للاعلانة كل تحديث الصفحة &

    ردحذف
    الردود
    1. فقط ضع هدا القالب مكان القالب السابق و طبق الخطوات كما في الموضوع
      https://mega.co.nz/#!Fc801Y6S!2K7Zzya4REag4cWEj2eFhja_g_7mvjVxZT8Wt58oiIk

      حذف
  2. شكرا اخى على الرد الطيب

    ردحذف
  3. السلام عليكم شكرا لك أما بعد
    رابط مدونتي
    http://azer42.blogspot.com/

    ردحذف

إرسال تعليق

المشاركات الشائعة من هذه المدونة

اضافة اداة المشاركه عبر المواقع الاجتماعيه تحت كل تدوينة

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

كيف تستفيد من أداة Inspect Element في جوجل كروم

Inspect Element هي أداة توجد في متصفح جوجل كروم وهي أداة وضعت خصيصا لمطوري الويب أو web devloper فيها العديد من المميزات لمساعدة مطور الويب في عمله و لهدا سأريك في هدا الدرس أهم الاستعمالات لأداة Inspect Element  كيف تستفيد من أداة Inspect Element في جوجل كروم  نافذة Elements من هده القائمة يمكنك مشاهدة جميع عناصر الصفحة و أكواد ال css الخاصة بكل عنصر ,ويمكنك التعديل عليها حسب ذوقك ادا كنت تتقن ال HTML و CSS  نافذة Sources هده النافذة تمكنك من مشاهدة مصادر موقعك التي تتمثل في السكريبتات  و كل ما يتصل به موقعك نافذة Resources هده النافذة تقوم باضهار موارد موقعك و أقصد بموارد هي الصور و السكريبتات و ال Stylesheets فعبر فتح ملف Frames يمكنك أن تشاهد الصور والسكريبتات و ال Stylesheets الخاصة بأي موقع أو مدونة  نافذة console  وهي وحدة تحكم المدونة أو الموقع يمكنك القاء أوامر للموقع أعطيك مثال على ذالك تلك الخدع التي تراها في الفيسبوك عن طريقة اختراق أي حساب أو فتح كامرا أي شخص ... فتلك الخدع تعمل بواسطة console وتلقي أوامر

كود Html تكبير الصورة بمرور الماوس عليها

السلام عليكم و رحمة الله وبراكته HTML اليوم أردت أن أقدم لكم اضافة لمدوناتكم و هي عبارة عن كود و هدا الكود يقوم بتكبير صورة بطريقة جميلة وبمجرد مرور الماوس عليها معاينة مرر الماوس على هده الصورة  تكبير الصورة بمرور الماوس عليها Htmlكود   تكبير الصورة بمرور الماوس عليها < image src = "رابط الصورة"  onmouseover = "this.height='300';this.width='300'"   onmouseout = "this.height='200';this.width='200'"  height = "200"  width = "200" > الكلمات الدلالية HTML الماوس صورة