آخبار الموقع
recent
404
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة
  • العودة الى الصفحة الرئيسية
  • الخميس، 15 سبتمبر، 2016

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

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


    في هذا اليوم معنا إضافة رائعة سوف تعجبك كثير ففي هذا الدرس سوف نعرف كيفية إضافة فيديو منبثق في تدوينة ما إلي منصة بلوجر ، هذه الإضافة غالبا لا تجدها في منصة بلوجر لان هذه الإضافة خاصة بالمنصة ووردبريس ، لكن بالحمد لله وجدت هذه إضافة الرائعة ، فمعظم المدونين يعرفون ان هناك حجم خاص بالتدوينة عندما يزاد حجم التدوينة سوف تقوم منصة بلوجر بإنقاص عدد التدوينات في الصفحة الرئيسية ، فتأتي دور هذه الإضافة التي تقوم بجعل الفيديو منبثق يعني أنه إذا قام الزائر بالضغط علي زر شاهد الفيديو مثلا سوف يظهر له الفيدو بشكل منبثق.
    شرح تركيب الإضافة :
    1. أولا من لوحة تحكم القالب ثم غلي قسم القالب وبالضغط علي HTML.
    2. بعد هذا قم بالبحث  في القالب عن هذا الوسم </head>
    3. وقم بوضع الاكواد الاتية فوقه.
    <style type='text/css'>
    /*Pop Up Responsive*/
    .container{margin:100px auto}
    .btnnya{background-color:#039be5;border:0;border-radius:2px;box-shadow:none;color:white!important;;cursor:pointer;display:inline-block;font:500 14px/20px Roboto,sans-serif;margin:0;min-width:36px;outline:0;overflow:hidden;padding:8px;text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;transition:background-color .2s,box-shadow .2s;vertical-align:middle;white-space:nowrap;padding:7px 16px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}
    .btnnya.yt{background-color:red}
    .wmBox_overlay{position:fixed;width:100%;height:100%;display:none;top:0;left:0;background:rgba(0,0,0,0.5);z-index:999}
    .wmBox_centerWrap{display:table;position:absolute;width:100%;height:100%}
    .wmBox_centerer{display:table-cell;vertical-align:middle}
    .wmBox_centerer iframe{width:95%;display:table;margin:0 auto;position:relative}
    .wmBox_contentWrap{width:50%;margin:0 auto;position:relative}
    .wmBox_scaleWrap{position:relative;height:0;padding-top:20px;padding-bottom:56.25%;width:100%}
    .wmBox_centerer iframe{position:absolute;top:0;border:0;outline:0;box-shadow:0 0 10px rgba(0,0,0,0.5);left:0;width:100%;height:100%;padding:12px;background:black;border-radius:12px}
    .wmBox_closeBtn{z-index:2;position:relative;margin-top:-40px}
    .wmBox_closeBtn p{line-height:0;margin:0;padding:0.5em 0 0.75em;color:#FFF;background:#000;width:1.3em;font-size:25px;border-radius:100%;text-align:center;font-family:Verdana,serif;position:relative;bottom:-0.5em;right:-1.5em;cursor:pointer;float:right;box-shadow:0 0 10px rgba(0,0,0,0.5);transition:color 0.2s ease-out,background 0.2s ease-out}
    .wmBox_closeBtn p:hover{background:#FFF;color:#000}
    </style>

    1.  كذلك قم بالبحث في القالب عن هذا الوسم </body> 
    2. وقم بوضع الاكواد الاتية فوقه.
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){$.wmBox()}),function(o){o.wmBox=function(){o("body").prepend('<div class="wmBox_overlay"><div class="wmBox_centerWrap"><div class="wmBox_centerer">')},o("[data-popup]").click(function(e){e.preventDefault(),o(".wmBox_overlay").fadeIn(750);var a=o(this).attr("data-popup");o(".wmBox_overlay .wmBox_centerer").html('<div class="wmBox_contentWrap"><div class="wmBox_scaleWrap"><div class="wmBox_closeBtn"><p>x</p></div><iframe src="'+a+'">'),o(".wmBox_overlay iframe").click(function(o){o.stopPropagation()}),o(".wmBox_overlay").click(function(e){e.preventDefault(),o(".wmBox_overlay").fadeOut(750)})})}(jQuery);
    //]]>
    </script>

    1. عند عمل تدوينة ما قم بالذهاب إلي تبويب HTML
    2. وقم بوضع الاكواد الاتية في التبويب
       <div class="container">
        <a class="wmBox btnnya yt" href="#" data-popup="هنا رابط الفيديو?rel=0&amp;controls=0&amp;showinfo=0">شاهد الفيديو</a>
      </div>
    1. قم بالتغير ما هو باللون الأحمر ومبروك عليك الإضافة.

    إلي اللقاء في تدوينة جديدة
    تابعونا على

    أنا عادل إبراهيم مؤسس موقع إتقان ويب هدفي الأول هو تطوير المحتوي العربي وذلك عن طريق مدونتي التي أنشر فيها دروس وشروحات تقنية يوميا لي خبرة في البرمجة والتصميم والموشن جرافيك وغيرها

    الكاتب : Adel Ibrahim

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

    إرسال تعليق

    تصميم : عالم المدون