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

عدد مشاهدات الموضوع:
إضافة صور أو فيديو لتعليقات بلوجر


كما نعلم جميعا في تعليقات بلوجر لا يمكننا إضافة فيديو أو صورة، ففي الكثير من الأحيان تصلك إستفسارات عبر نموذج التعليقات وقد يصعب فهمها لأن تفسير المعلق غامض وغالبا إمكانية إضافة صورة أو فيديو يشرح الأمر سيكون بمثابة حل أمثل لمثل هذه العقبات، أن تكون هذه الخاصية غير موجودة في بلوجر لا يعني فقدان الأمل فكما عودناكم على مدونة أبو إياد أنه لا يوجد مستحيل ولكل شئ حل. لذلك سنغير ونظهر ما حجبته بلوجر ;)
هذه الأداة تعتمد على الجافا سكريبت، حيث تقوم بتحويل وسم بسيط يكتبه المعلق إلى كود HTML، ومن أجل بعض التنسيق أضفنا بعد الخصائص بإستخدام الـCSS لنحصل على جمالية وتنسيق أكبر.
من أجل إستخدام الأداة نقوم بإضافة كود الجافا و السي إس إس فوق وسم نهاية جسم المدونة: </body>.


فيديو يشرح طريقة التركيب وعمل الأداة:





كود الجافا سكريبت:

<script>
//<![CDATA[
// video y imagines para blogger - desarrollo: Ayoub Etmaiti
function InsertarImagenVideo(id) {
var IDelemento = document.getElementById(id),
sustituir = IDelemento.innerHTML;
sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
sustituir = sustituir.replace(/\[video\]https:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$1'><\/iframe>");
sustituir = sustituir.replace(/\[video\](https:\/\/youtu\.be\/|https:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/player\.vimeo\.com\/video\/)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='http://player.vimeo.com/video/$2'><\/iframe>");
document.getElementById(id).innerHTML = sustituir;} InsertarImagenVideo('comment-holder');
//]]>
</script>

كود السي إس إس:

<style>
<!--
#comment-holder .img-comentarios, #comment-holder i[rel="image"] {
max-width: 450px; /* Ancho máximo de las imágenes */
width: auto;
height: auto;
display: block;
border: 5px solid #FFF; /* Borde de las imágenes */
margin: 0 auto;
padding: 0;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /* Sombra de las imágenes */
}
#comment-holder .vid-comentarios {
width: 450px; /* Ancho del video */
height: 253px; /* Alto dle video */
display: block;
margin: 0 auto;
padding: 0;
border: 5px solid #FFF; /* Borde del video */
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /* Sombra del video */
}
-->
</style>

وسوم تفعيل الأداة:

 [img]URL IMG[/img]
 [video]URL video[/video]

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

  1. جزاك الله كل خير ؛ جااارى التجربة ولكن المشكلة إن لم يتم الاشراف عليها بشكل جيد

    ردحذف
    الردود
    1. حاول الإهتمام قليل بالإشراف على التعاليق إن لم تكن كثيرة ;)

      حذف
  2. مشكوووور كثير موضوع مميز جدا ومفيد :

    http://harvest-tv.blogspot.com/

    ردحذف
    الردود
    1. عفوا، وفقك الله!!

      حذف
  3. اخي شكرا على المدونة الرائعة والمواضيع المفيدة لدي استفسار قمت بوضع اعلانات ادسنس على شكل اعلانات منبثقة جانب المدونة هل هدا مخالف لادسنس المرجو الاجابة في اسرع وقت ولكم جزيل الشكر الموقع من هنا كومبيوتر007

    ردحذف
  4. شكرا اخي الكريم لدي استفسار قمت بوضع اعلانات ادسنس منبتقة على الجهة اليسرى للمدونة هل هدا مخالف لادسنس المرجو الرد
    رابط المدونة http://abounizar005.blogspot.com/

    ردحذف
  5. جزاك الله خيراً موضوع رائع
    مدونه الاختراع سمارت
    مطلوب فريق عمل لمدونه الاختراع

    المدونه فازت علي منتدي دفدي وروح شوفها في جوجل

    بس للأسف كل ما المدونه تكبر كل مأحتاجت محررين اكتر

    دلوقتي المدونه بقت بشكل جديد واسهل بكتير
    دلوقتي عدد الزوار وصل 2000 يومياً
    دلوقتي محتاجين متطوعين

    رابط المدونه
    http://smart-inv.blogspot.com

    ردحذف
  6. غير معرف10:59 م

    شكرا ليك يا بطل والله برنس ألف شكر
    [img]http://im79.gulfup.com/Scqjdt.png[/img]

    ردحذف

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

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