شرح طريقة اضافة ثأتير اضاءة على الفيديوهات في البلوجر

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

معاينة الَاضافة 

شرح طريقة اضافة ثأتير اضاءة على الفيديوهات في البلوجر

1. نتوحجه ال المدونة

2. قالب 

3. تحرير HTML

4. نبحث عن الكود 

</head>

5. نضيف الكود الثالي فوقه مباشرة 

<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("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>
<style>
 /* Turn off the lights bu Http://Hukmat.blogspot.com
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7VRIIiFo9rSuP2TidQebOpixOATgReedsMjRs00xLWzZdq4TdPqQ9C2nmEZl0YdWE-FlYv_W8zjgasAfB3noRFOi3Wf5BGtR1_U2MQ8tUUmOVrTAHH-23_Nf-6-lvlN8SqGimqqxyy_in/s1600/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYk5dGHvy_aSzyuO3ddmc4zs4kDF3WJgNOiVlFV73qTuXGfDGf9C4ta0xIV6a1wexLZ2BxmrPBHwhz6_0Ly-q-8A8_727nnSdxrr-dO_jFQSOiMrNiY082tIgbDFnE4z_3gLOJmrZJdqVk/s1600/lights-off.png);
}
#lightsoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}</style>

6. نبحث عن الكود 

</body>

7. نضيف الكود الثالي فوقه

<div id='lightsoff'/>

8. نضغط على حفظ .

9. عند تحرير موضوع أو تدوينة على البلوجر اضف الكود الثالي في خاصية HTML الموجودة على المحرر التدوينات  مع تغيير المطلوب منك.

<center>
<div id="switch">
<a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a>
</div>
<div id="lightsVideo">

ضع الكود الخاص بالفيديو هنا
 </div>
</center>

المرجوا احترام المجهود المبذول منا ، و أن تتفاعل بالشكل اكثر مما يحفزنا و يجعلنا نقدم دائما الأفضل و الجديد 
و أيضا وضع أرائكم فهي تهمنا و استفساراتكم .

مقالات ذات صلة