فتح ملفات الفيديو والصوت والفلاش فى نافذة منبثقة داخل مدونات بلوجر

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

قمنا بتطوير الكود وإضافة موقع SoundCloud للمقاطع الصوتية بحيلة ستعرفونها عند الشرح وكذلك موقع  Instagram لمشاركة الصورة حيث واجه مدوني بلوجر عدم القدرة على وضع صور انستجرام داخل التدوينة لعرضها داخل موضوعاتهم بنفس الشكل المعروضه بها داخل الموقع نفسه. وبالتالى مع طريقة اليوم سنحل مشاكل عديدة ان شاء الله. ووجب التنويه على أن الكود المستخدم يعتمد على jquery وبالتالى يمكنه أن يتعارض مع إضافات أخرى على مدونتك ولا يعمل بشكل سليم. والأن يمكنك معاينة الإضافة من خلال مدونتنا التجريبية lightbox-plugin ولن ننسي صاحب الأكواد الرائع jackmoore وكذلك المطورJohn Resig. يمكنك مشاهدة فيديو لعرض الاضافة من هنا.

كما تعودنا بشرح فيديو لكيفية إضافة الأكواد, ننصح بالمتابعة الجيدة لأن هناك بعض الملاحظات التى يتم التأكيد عليها داخل الشرح


الخطوات:
1- اذهب الى لوحة التحكم ثم القالب ثم تحرير HTML
2- ابحث عن الوسم التالى
</head>  
3- ضع الكود التالى قبله أو فوقه
4- قم بحفظ القالب وركز جيدا فى الخطوات التالية :)
الأكواد المستخدمة فى إدراج الملفات (PDF,فلاش,يوتيوب,فيميو,ساوندكلاود,انستجرام)

كل ما عليك هو نسخ الكود ووضعه كما شرحنا بالفيديو (فى وضع HTML) وتغيير رابط الملف كما وضحنا كيفية استخراجه وكذلك قم بتغيير رابط الصورة ووصف الفيديو كما تُحب. يجب الانتباه جيدا عند تنفيذ خطوة استخراج رابط الملف بالطريقة التى تم شرحها بالفيديو- ومعنى مباشر انه ينتهى بامتداد الصورة وموقع tinypic.com سيفيدك فى الحصول على رابط مباشر لصورك بسهولة- 


ملحوظة: يمكنك التغيير فى شكل النوافذ المنبثقة عن طريق تغيير رقم 1 فى الرابط الخاص بملف CSS للكود المضاف داخل القالب بـ 2 , 3 , 4 , 5
https://abuiyadblog.googlecode.com/svn/trunk/colorbox-master/example1/colorbox.css
للتوضيح أكثر: الرابط السابق يوجد فى الكود الذى يوضع قبل وسم Head ابحث عنه وقم بتغيير رقم 1 الى 5 وشاهد الفرق. أى سؤال لا تتردد فى طرحه.

هناك 11 تعليقًا:

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

    ردحذف
  2. @haeedar qaz

    عليكم السلام ورحمة الله وبركاته
    أهلا وسهلا بك
    نعم لدينا خدمة على خمسات خاصة بتطوير القوالب وما يتعلق ببلوجر

    اطلع عليها من هنا
    @خدماتنا على خمسات

    ردحذف
  3. رائع جدا اخى شرح مميز جدا
    الله يجازيك خير

    ردحذف
  4. @المواطن

    أنت الرائع أخى الفاضل :)

    ردحذف
  5. السلام عليكم
    شكرا على الإضافة الرائعة ,, تسلم
    عندي استفسار هل يمكنني اظافة إعلان أدسنس تحت النافذة

    ردحذف
  6. شكراً لكم علي الموضوع الجميل .. هل يمكن إضافة مواقع مشاهدة فيديوهات اخري ؟

    ردحذف
  7. وهل يمكن أي فيديو يوضع في مدونتي تفتح في نافذة منبثقة تلقائياً ؟

    ردحذف
  8. عندي مشكل في صندوق التعليقات لايعمل بمعنى أخر عند الضغط علية لا يستجيب (مشنج)
    http://teqnet02.blogspot.com/

    ردحذف
  9. السلام عليكم اخي الكريم , انا اريد كود نافذة منبثقة اي عندما يدخل الزائر الى مدونتي تنبثق له تلك النافذة بها عداد تنازلي وفيديو
    المرجوا من سيادتكم الرد على استفساري لمراسلتي
    cherradiaymane@gmail.com

    ردحذف
  10. تسلم الأيادى يا أبو إياد دايما مبدع والله :]
    انا فعلا كنت محتاج الكود دا ضرورى
    بس للأسف مشتغلش على القالب اللى عندى بسبب أكواد الجيكورى
    لو تقدر تساعدى أكون شاكر ليك جداا
    فى انتظار ردك هنا أو على أميلى
    lahzet.samt@gmail.com

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية