كيفية إضافة زر إطفاء أو تشغيل الأضواء أثناء مشاهدة الفيديو لمدونات بلوجر

مرحباً بكم زوار ومتابعي المدونة

اليوم سوف يقدم لكم فريق عمل المدونة  إضافة جديدة من إعداد وتصميم فريق عمل المدونة  الإضافة  فيها لمسة جمالية إحترافية ، والإضافة متوافقة مع جميع قوالب بلوجر .

لمشاهدة الإضافة

- طريقة التركيب :

1- أدخل إلى مدونتك ثم أختر لوحة التحكم >> قالب >> تحرير قالب .

2- ابحث عن الوسم : </head>

3- اضف فوقه الكود التالي :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){
    $("#lightsoff").css("height", $(document).height()).hide();
    $(".lightSwitcher").click(function(){
    $("#lightsoff").toggle();
    if ($("#lightsoff").is(":hidden"))
    $(this).html("إطفاء الأضواء").removeClass("turnedOff");
    else
    $(this).html("تشغيل الأضواء").addClass("turnedOff");
    });
    });
    //]]>
    </script>

4- ابحث عن الوسم : ]]></b:skin>

5- اضف الكود التالي فوقه :

/* Turn off the lights
    ----------------------------------------------- */
    #lightsVideo {
    position:relative;
    z-index:102;
    }
    #switch {
    max-width:640px;
    text-align:right;
    position:relative;
    height:25px;
    display:block;
    margin:25px 60px 0 0;
    }
    .lightSwitcher {
    position:absolute;
    z-index:101;
    background-image:url(http://3.bp.blogspot.com/-Vs5EJnjVScM/Um0Sq84fJtI/AAAAAAAAEeQ/PEu-OStZciA/s1600/lights-on.png);
    background-repeat:no-repeat;
    background-position:right;
    padding:0 20px 0 0;
    outline:none;
    text-decoration:none;
    }
    .lightSwitcher:hover {text-decoration:underline;}
    .turnedOff {
    color:#ffff00 !important;
    background-image:url(http://3.bp.blogspot.com/-vKGxmBhYshA/Um0Sqwy_hNI/AAAAAAAAEeU/F0WKs6_WARM/s1600/lights-off.png);
    }
    #lightsoff {
    background:#000;
    opacity:0.9;
    filter:alpha(opacity=90);
    position:absolute;
    right:0;
    top:0;
    width:100%;
    z-index:100;
    }

6- ابحث عن الوسم : </body>

7- اضف الكود التالي فوقه :

<div id='lightsoff'/>

8- إحفظ القالب .

- طريقة الاستخدام الإضافة :

1- استخدم كود الإضافة التالي في خاصية " HTML " وليس في وضع التأليف :

<center>
    <div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>
    <div id="lightsVideo">
    ضع كود الفيديو هنا
    </div>
    </center>

2-كيف تحصل على كود الفيديو  ، ندخل على اليوتيوب ، ثم نضغط رابط تشغيل الفيديو ، ثم نضغط على زر " share " بعد ذلك نضغط على زر " Embed " سوف يظهر لنا  كود تشغيل الفيديو ، كما بالصورة التالية :

وأخيراً نترككم برعاية الله وتوفيقه