تضمين الصور والفيديوهات في تعليقات بلوجر بمجرد وضع رابط


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


فقط إذا كنت تريد تجربة الإضافة اضف بالتعليقات رابط صورة أو مقطع فيديو لترى كيف


طريقة إضافة الأداة

1. نقم بالدخول إلى لوحة تحكم المدونة https://draft.blogger.com --> المظهر --> أنقر على تحرير HTML ثم أبحث عن الرمز </body> وهو قبل آخر رمز دائماً في المظهر وبعد العثور عليه أضف الكود التالي أسفل الرمز </body> مباشرةً


<script>
//<![CDATA[
!function(){for(var a=/(\[img\])?((http:|https:)?\/\/\S*?\.(jpg|gif|png|bmp|jpeg]))(\[\/img\])?/gi,b=/(\[vid\])?http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?(\[\/vid\])?/gi,c=/(\[vid\])?(http:|https:)?\/\/(vimeo.com)\/([0-9]*)(\[\/vid\])?/gi,d=document.querySelectorAll(".comment-content"),e=0;e<d.length;e++){for(var f=d[e].getElementsByTagName("a"),g=0;g<f.length;g++)if(f[g].href.match(a)||f[g].href.match(b)||f[g].href.match(c)){var h=document.createElement("span");h.innerHTML=f[g].href;var i=f[g];i.parentNode.insertBefore(h,i),f[g].href="",f[g].innerHTML=""}var j=d[e].innerHTML;j=j.replace(a,'<img style="max-width: 100%; height: auto;display: blocK;margin: 10px auto;" src="$2"" alt=""/>'),j=j.replace(b,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;margin:20px auto;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://www.youtube.com/embed/$2" frameborder="0" allowfullscreen></iframe></div>'),j=j.replace(c,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;margin:20px auto;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://player.vimeo.com/video/$4" frameborder="0" allowfullscreen></iframe></div>'),d[e].innerHTML=j}}();
//]]>
</script>

أنقر حفظ المظهر
تستطيع إضافة المزيد من صيغ الصور في المكان المخصص كما هي  jpg|gif|png|bmp|jpeg

مشاركات أقدم المقال التالي
9 تعليق
  • Omar Shiriyani
    Omar Shiriyani 29‏/06‏/2017، 1:58:00 ص

    https://1.bp.blogspot.com/-aEtP3x2E3PY/WQI24lmqDTI/AAAAAAAAtK8/ZYGWaSgGJXgWFRn6ufnyGFjK3TNM8oeEQCLcB/s320/thumb.jpg

  • غير معرف
    غير معرف 30‏/08‏/2017، 9:15:00 م

    عفوا اخي مداد انا كتبت تعليق ولكن اظاهر حصل خلل بمتصفحي فاعدت كتابة التعليق

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

    • مداد الجليد
      مداد الجليد 30‏/08‏/2017، 9:20:00 م

      اهلا ومرحبا بك
      الكود يعمل على جميع المدونات ان شاء الله ولكن تأكد بأنه يعمل فقط على القالب الرئيسي وليس على نموذج الجوال
      كما يجب عليك التأكد ان كود اجاكس موجود في مدونتك وهو بطبيعة الحال موجود في جميع قوالب بلوجر ماعدا الاساسية اذا كان قالب مدونتك اساسي اضف الكود التالي فوق الرمز </head> في قالب مدونتك
      <script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

  • غير معرف
    غير معرف 30‏/08‏/2017، 9:52:00 م

    الان ايضا وضعت الكود ولكن لم يتغير شيء اخي الحبيب مازال الرابط يظهر في التعليقات والصورة والفيديو لايظهران
    في انتظارك اخي لايجاد حل
    واسف اتعبتك معي

    • مداد الجليد
      مداد الجليد 30‏/08‏/2017، 11:13:00 م

      يرجى ارسال رابط مدونتك بنموذج الاتصال للتحقق مها

  • غير معرف
    غير معرف 02‏/09‏/2017، 7:15:00 ص

    السلام عليكم اخي مداد
    بارك الله فيك على السرعة في الرد ومساعدة الجديد بالتدوين
    اخي مداد انا ارسلت رابط مدونتي بنموذج الاتصال هنا http://www.madad2.com/p/blog-page_17.html
    الاسم عمر احمد
    اخي مداد انا طبعا جربت الان جربت الكود مرة اخرى ولكن بائت جميع محاولاتي بالفشل
    ودي القى الحل عندكم بحكم خبرتكم وانا في انتظار حل المشكلة
    وفقك الله ياغالي

    • مداد الجليد
      مداد الجليد 04‏/09‏/2017، 11:34:00 م

      وعليكم السلام ورحمة الله
      تم الرد على رسالتك

  • خالد أبوعوف
    خالد أبوعوف 24‏/09‏/2019، 1:30:00 م

    موضوع رائع وجميل وجديد ولم أقرأه في مكان ..
    جزاك الله خيرا ..

    سؤال:
    هل يوجد كود يعمل أيضا داخل التعليقات لتشغيل رابط ام بي ثري ؟

    • مداد الجليد
      مداد الجليد 25‏/09‏/2019، 7:06:00 م

      اهلا بك
      اسف ليس لدي فكرة عن الموضوع

أضف تعليق
عنوان التعليق